#チャートオプション

チャートの表示方法を設定します。Basic（グラフィカルな設定）と Custom（JSによるカスタマイズ）の2つのモードに対応しています。Basicモードは素早いマッピングや一般的なプロパティ設定に適しており、Customモードは複雑なシナリオや高度なカスタマイズに最適です。

#パネル構造

ヒント: 現在のコンテンツをより簡単に設定するには、他のパネルを先に折りたたんでおくと便利です。

一番上には操作バーがあります。

モード選択:

• Basic: グラフィカルな設定です。タイプを選択し、フィールドマッピングを完了させ、一般的なプロパティはスイッチで直接調整します。
• Custom: エディターでJSを記述し、EChartsのoptionを返します。

#Basicモード

#チャートタイプの選択

• 折れ線グラフ、面グラフ、棒グラフ、横棒グラフ、円グラフ、ドーナツグラフ、ファネルグラフ、散布図などに対応しています。
• チャートタイプによって必要なフィールドが異なる場合があります。「データクエリ → データを表示」で列名とタイプを先に確認してください。

#フィールドマッピング

• 折れ線グラフ/面グラフ/棒グラフ/横棒グラフの場合：
  • xField: ディメンション（例: 日付、カテゴリ、地域）
  • yField: メジャー（集計された数値）
  • seriesField（オプション）: シリーズのグループ化（複数の線や棒のグループに使用）
• 円グラフ/ドーナツグラフの場合：
  • Category: カテゴリディメンション
  • Value: メジャー
• ファネルグラフの場合：
  • Category: ステージ/カテゴリ
  • Value: 値（通常は数量または割合）
• 散布図の場合：
  • xField、yField: 座標軸に使用する2つのメジャーまたはディメンション

より詳細なチャートオプションの設定については、EChartsのドキュメント 座標軸 および 例 を参照してください。

注意：

• ディメンションまたはメジャーを変更した後は、空のチャートや位置ずれを防ぐために、マッピングを再確認してください。
• 円グラフ/ドーナツグラフ、ファネルグラフでは、「カテゴリ + 値」の組み合わせを必ず指定してください。

#共通プロパティ

• スタック、スムージング（折れ線グラフ/面グラフ）
• ラベル表示、ツールチップ、凡例
• 座標軸ラベルの回転、分割線
• 円グラフ/ドーナツグラフの半径と内半径、ファネルグラフのソート順

推奨事項：

• 時系列データには折れ線グラフ/面グラフを使用し、適度にスムージングを有効にしてください。カテゴリ比較には棒グラフ/横棒グラフを使用してください。
• データが密集している場合は、重なりを防ぐため、すべてのラベルを有効にする必要はありません。

#Customモード

完全なECharts optionを返すために使用します。複数のシリーズの結合、複雑なツールチップ、動的なスタイルなどの高度なカスタマイズに適しています。 推奨される使用法: データをdataset.sourceに集約します。詳細な使用法については、EChartsのドキュメント Dataset を参照してください。

#データコンテキスト

• ctx.data.objects: オブジェクトの配列（各行がレコード、推奨）
• ctx.data.rows: 2次元配列（ヘッダーを含む）
• ctx.data.columns: 列ごとにグループ化された2次元配列

#例: 月別注文の折れ線グラフ

return {
  dataset: { source: ctx.data.objects || [] },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'line',
      smooth: true,
      showSymbol: false,
    },
  ],
}

#プレビューと保存

• Customモードで変更を完了したら、右側の「プレビュー」ボタンをクリックしてチャートのプレビューを更新できます。
• 下部の「保存」をクリックすると設定が適用され保存されます。「キャンセル」をクリックすると、今回のすべての設定変更が元に戻ります。