34 lines
2.5 KiB
Markdown
34 lines
2.5 KiB
Markdown
# ChartBar
|
||
|
||
**コントロール機能**：棒グラフ（Bar Chart）を表示するためのもので、ECharts を拡張して実装されています。指定されたデータソースからデータを取得し、複数系列の棒グラフを動的に描画できます。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`bricks.EchartsExt`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|---------------|-------|----|
|
||
| `data_url` | 文字列 | 任意。チャートデータを非同期で読み込むためのリクエストURL。 |
|
||
| `data_params` | オブジェクト | データリクエスト時に送信する追加パラメータ。`data_url`と併用します。 |
|
||
| `method` | 文字列 | データリクエストの方法。例：`'GET'`または`'POST'`。デフォルトは`'GET'`。 |
|
||
| `data` | 配列 | 任意。直接ローカルのデータ配列を渡す場合に使用。オブジェクトの配列形式で、各オブジェクトが1レコードを表します。 |
|
||
| `nameField` | 文字列 | X軸のカテゴリ名（例：分類、時間など）として使用するフィールドを指定します。 |
|
||
| `valueFields` | 配列 | 文字列の配列。Y軸の数値として使用する1つ以上のフィールドを指定し、複数のデータシリーズ（series）を生成します。 |
|
||
|
||
> データ構造の例：
|
||
> ```json
|
||
> [
|
||
> { "category": "A", "value1": 10, "value2": 20 },
|
||
> { "category": "B", "value1": 15, "value2": 25 }
|
||
> ]
|
||
> ```
|
||
> `nameField = "category"`、`valueFields = ["value1", "value2"]`の場合、2つの棒グラフシリーズが生成されます。
|
||
|
||
## 主なイベント
|
||
|
||
| イベント名 | 発生タイミング | コールバックパラメータの説明 |
|
||
|------------------|------------|------------------------|
|
||
| `chart:loaded` | チャートデータの読み込みが完了し、正しく描画された後に発生 | `event.detail`には、元のデータと最終的に生成されたEChartsの設定オプション（options）が含まれます。 |
|
||
| `chart:error` | データの読み込み失敗または解析エラーが発生した際に発生 | `event.detail`には、`message`、`url`、`status`などのエラー情報が含まれます。 |
|
||
|
||
> 注：イベントはカスタムイベント機構を通じて発行されます。`addEventListener('chart:loaded', handler)`のようにしてイベントを監視できます。 |