ucharts

このスキルを使用する場面

ユーザーが次のことを希望する場合は、このスキルを使用してください。

• プロジェクトに uCharts をインストールしてセットアップする
• uni-app アプリケーションでグラフを作成する
• WeChat Mini Program で uCharts を使用する
• H5 アプリケーションで uCharts を使用する
• グラフのオプションを設定する
• さまざまな種類のグラフを使用する
• グラフのイベントを処理する
• グラフの表示をカスタマイズする
• uCharts の API やメソッドを理解する
• uCharts の問題をトラブルシューティングする

このスキルの使用方法

このスキルは、uCharts の公式ドキュメントの構成（https://www.ucharts.cn/v2/#/、https://www.ucharts.cn/v2/#/guide/index、https://www.ucharts.cn/v2/#/document/index）に沿って整理されています。uCharts を使用するときは、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • インストール／安装 → examples/guide/installation.md
   • クイックスタート／快速开始 → examples/guide/quick-start.md
   • グラフの種類／图表类型 → examples/charts/
   • 機能／功能特性 → examples/features/
   • API／API 文档 → api/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   ガイド（使用指南）：

   • examples/guide/intro.md - uCharts の概要
   • examples/guide/installation.md - インストールガイド
   • examples/guide/quick-start.md - クイックスタートガイド
   • examples/guide/configuration.md - 設定
   • examples/guide/platform-support.md - プラットフォームのサポート

   グラフ（图表类型）：

   • examples/charts/line.md - 折れ線グラフ
   • examples/charts/column.md - 縦棒グラフ
   • examples/charts/area.md - 面グラフ
   • examples/charts/pie.md - 円グラフ
   • examples/charts/ring.md - リンググラフ
   • examples/charts/radar.md - レーダーチャート
   • examples/charts/funnel.md - ファネルチャート
   • examples/charts/gauge.md - ゲージチャート
   • examples/charts/candle.md - ローソク足チャート
   • examples/charts/mix.md - 複合グラフ

   機能（功能特性）：

   • examples/features/data-format.md - データ形式
   • examples/features/chart-events.md - グラフのイベント
   • examples/features/chart-methods.md - グラフのメソッド
   • examples/features/chart-update.md - グラフの更新
   • examples/features/chart-customization.md - グラフのカスタマイズ

3. そのサンプルファイルに記載された構文、構造、ベストプラクティスに関する具体的な指示に従います。

   重要な注意事項：

   • uCharts は複数のプラットフォーム（uni-app、WeChat Mini Program、H5、APP）をサポートしています。
   • グラフの描画には canvas を使用します。
   • 設定は options オブジェクトを通じて行います。
   • 各サンプルファイルには、主要な概念、コード例、要点が含まれています。

4. 必要に応じて、api/ ディレクトリの API ドキュメントを参照します。

   • api/chart-api.md - グラフコンポーネントの API
   • api/options-api.md - Options API
   • api/data-api.md - データ API
   • api/events-api.md - イベント API
   • api/methods-api.md - メソッド API

5. templates/ ディレクトリのテンプレートを使用します。

   • templates/installation.md - インストール用テンプレート
   • templates/basic-chart.md - 基本的なグラフのテンプレート
   • templates/configuration.md - 設定用テンプレート

1. uCharts を理解する

uCharts は、uni-app、WeChat Mini Program、H5、APP などをサポートする、高性能なクロスプラットフォームのグラフライブラリです。

主な概念：

• グラフコンポーネント：メインのグラフコンポーネント
• オプション：グラフの設定オプション
• データ：グラフのデータ形式
• イベント：グラフのイベント
• メソッド：グラフのメソッド
• プラットフォームのサポート：マルチプラットフォーム互換性

2. インストール

npm を使用する場合：

npm install @qiun/ucharts

yarn を使用する場合：

yarn add @qiun/ucharts

pnpm を使用する場合：

pnpm add @qiun/ucharts

3. 基本的なセットアップ

<template>
  <qiun-data-chart type="line" :chartData="chartData" :opts="opts" />
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        series: [
          {
            name: 'Sales',
            data: [35, 36, 31, 33, 13]
          }
        ]
      },
      opts: {}
    }
  }
}
</script>

ドキュメントの対応関係（公式ドキュメントとの一対一対応）

• examples/guide/ または examples/getting-started/ → https://www.ucharts.cn/v2/#/guide/index
• examples/ → https://www.ucharts.cn/v2/#/document/index

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は examples/ ディレクトリにあります（上記の対応表を参照してください）。

例を使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応表から適切な例のファイルを読み込みます
• そのファイルの指示、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• よく使われるひな形については、templates/ ディレクトリのテンプレートを参照します
• テンプレートをニーズやコーディングスタイルに合わせて調整します

API リファレンス

詳細な API ドキュメントは api/ ディレクトリにあります。公式の uCharts API ドキュメントの構成に合わせて整理されています（https://www.ucharts.cn/v2/#/document/index）。

チャートコンポーネント API（api/chart-api.md）

• チャートコンポーネントのプロパティ
• チャートコンポーネントのイベント
• チャートコンポーネントのメソッド

Options API（api/options-api.md）

• チャートオプションの設定
• オプションのプロパティ
• オプションのメソッド

Data API（api/data-api.md）

• データ形式
• データ構造
• データ変換

Events API（api/events-api.md）

• チャートイベント
• イベントハンドラー
• イベントパラメーター

Methods API（api/methods-api.md）

• チャートメソッド
• メソッドのパラメーター
• メソッドの戻り値

API リファレンスを使用するには：

1. サポートが必要な API を特定します
2. api/ ディレクトリから対応する API ファイルを読み込みます
3. API のシグネチャ、パラメーター、戻り値の型、例を確認します
4. 詳細な使用パターンについては、リンク先の例のファイルを参照します
5. すべての API ファイルには、examples/ ディレクトリ内の関連する例のファイルへのリンクが含まれています

ベストプラクティス

1. オプションを適切に設定する：チャートのオプションを正しく設定します
2. データを正しくフォーマットする：適切なデータ形式を使用します
3. イベントを処理する：インタラクションにはチャートイベントを使用します
4. メソッドを使用する：チャートメソッドを活用して操作を行います
5. パフォーマンスを最適化する：チャートの描画パフォーマンスを最適化します
6. 外観をカスタマイズする：必要に応じてチャートの外観をカスタマイズします
7. プラットフォームのパターンに従う：プラットフォーム固有のベストプラクティスに従います

リソース

• 公式ドキュメント：https://www.ucharts.cn/v2/#/
• ガイド：https://www.ucharts.cn/v2/#/guide/index
• ドキュメント：https://www.ucharts.cn/v2/#/document/index

キーワード

uCharts, @qiun/ucharts, chart, グラフ, 折れ線グラフ, 棒グラフ, 円グラフ, ドーナツグラフ, レーダーチャート, ファンネルチャート, ゲージ, K 線チャート, 複合グラフ, line chart, column chart, area chart, pie chart, ring chart, radar chart, funnel chart, gauge chart, candle chart, mixed chart, uni-app, WeChat Mini Program, H5, APP, canvas, chart options, chart data, chart events, chart methods