36 lines
3.1 KiB
Markdown
36 lines
3.1 KiB
Markdown
# ChartLine
|
||
|
||
**コントロール機能**：折れ線グラフを表示するためのコントロール。ECharts を拡張して実装されており、データソース、フィールドマッピング、グラフオプションの設定に基づいて、複数の折れ線を動的に生成するデータ可視化をサポートしています。
|
||
**タイプ**：通常コントロール
|
||
**親コントロール**：`bricks.EchartsExt`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|----------------|-------|----|
|
||
| `data_url` | 文字列 | （任意）グラフデータを取得するAPIのURL。指定した場合、自動的にデータをリクエストします。 |
|
||
| `data_params` | オブジェクト | （任意）リクエスト時に送信するパラメータ。`data_url`と併用します。 |
|
||
| `method` | 文字列 | （任意）データ取得時に使用するHTTPメソッド。デフォルトは 'GET'。 |
|
||
| `data` | 配列 | （任意）直接渡す静的データ配列。オブジェクトの配列形式。例：`[{ name: 'A', value1: 10, value2: 20 }]` |
|
||
| `line_options` | オブジェクト | （任意）追加のEChartsシリーズ設定項目。ラインスタイルやアニメーションなどのカスタマイズに使用します。 |
|
||
| `nameField` | 文字列 | X軸に表示するデータ内のフィールド名を指定します（例：時間やカテゴリーフィールド）。 |
|
||
| `valueFields` | 配列 | 1つ以上の数値フィールドを指定します。各フィールドに対して1本の折れ線が生成されます。例：`['sales', 'profit']` |
|
||
|
||
> 注：`data` と `data_url` のいずれか一方を指定できます。両方が存在する場合は、`data_url` を優先してデータを取得します。
|
||
|
||
## 主なイベント
|
||
|
||
- **`load`**
|
||
発火タイミング：コントロールの初期化後、データの読み込み・レンダリングが成功した後に発火します。
|
||
コールバックパラメータ：`{ chart: EChartsインスタンス, data: 現在レンダリングされたデータ }`
|
||
使用用途：チャート描画後にカスタム処理を実行するために使用できます（例：マークポイントの追加、外部とのインタラクション連携など）。
|
||
|
||
- **`click`**
|
||
発火タイミング：ユーザーがチャート内の特定の点をクリックしたときに発火します。
|
||
コールバックパラメータ：EChartsのネイティブclickイベントオブジェクト。`seriesName`、`name`、`value`、`data` などの情報を含みます。
|
||
使用用途：データポイントの詳細表示や、他のコンポーネントとの連動操作などを実装する際に使用します。
|
||
|
||
- **`datafetch`**
|
||
発火タイミング：`data_url` からデータを正常に取得した後、レンダリングする前に発火します。
|
||
コールバックパラメータ：`{ data: サーバーから返された生データ }`
|
||
使用用途：データの加工処理前にデータを捕捉・変更する際に使用します。 |