XYZチャート

概要

XYZチャート（template_type: 'XYZ_CHART_V2'）では、散布図・バブルチャート・ヒートマップを表示できます。X軸(x)とY軸(y)にディメンションを、Z軸(z)にメトリクスを指定して、X軸とY軸の組み合わせごとにZ軸の値を集計して描画します。

指定可能な描画タイプは次の通りです。

`render_type`	描画タイプ	備考
`SCATTER`	散布図	`x`,`y`を指定
`BUBBLE`	バブルチャート	`x`,`y`,`z`を指定（`z`はバブルサイズのメトリクス）
`HEATMAP`	ヒートマップ	`x`,`y`,`z`を指定（`z`は色の濃淡のメトリクス）

事前にチャート設定についても確認してください。

設定例

顧客の売上と利益の関係

散布図の設定例

顧客ごとの売上(sales_amount)と利益(profit_amount)の関係を、地域(region)別に色分けして散布図で表示する場合、次のように設定します。

:::sql-block
```sql
SELECT
  customer_id,
  region,
  sales_amount,
  profit_amount
FROM
  customer_sales
```

```yaml {.chart}
chartSettings:
  template_type: XYZ_CHART_V2
  component_settings:
    render_type: SCATTER
    x:
      - field: sales_amount
    y:
      - field: profit_amount
    group_by:
      - field: region
```
:::

データソースのSQLの実行結果として出力されるカラムを、チャート設定内で参照します
- 以降の設定例では、データソースの定義は省略し、chartSettings の中身のみを記述しますが、チャート設定からは必ずデータソースのカラムを参照する必要があります
render_type: SCATTER を指定
x / y にそれぞれ X軸・Y軸のディメンション（各1つのみ）を指定
- 散布図の場合、y は 数値を返すディメンション を指定する必要があります
group_by にディメンションを指定すると、その値ごとに系列が分割され色分けされます
- 散布図・バブルチャートでは任意指定
- ヒートマップでは指定不可
group_by を指定している場合、 group_sort や group_sort_custom により、系列・凡例の並び順を指定できます
- 詳細はグループのソートを参照してください

上記の例では、次のようなSQLが生成され、チャート用のデータ加工が行われます。

sql

SELECT
  region AS region___,
  sales_amount AS sales_amount___,
  profit_amount AS profit_amount___
FROM
  /* データソースのSQL */
GROUP BY
  sales_amount___,
  profit_amount___,
  region___
LIMIT
  1001

バブルチャートの設定例

顧客ごとの売上(sales_amount)・利益(profit_amount)に加えて、取引件数(transaction_count)をバブルのサイズとして表示する場合、次のように設定します。

yaml

template_type: XYZ_CHART_V2
component_settings:
  render_type: BUBBLE
  x:
    - field: sales_amount
  y:
    - field: profit_amount
  z:
    - field: transaction_count
      aggregator: SUM
  group_by:
    - field: region

render_type: BUBBLE を指定
z にバブルのサイズとなるメトリクス（1つのみ・必須）を指定
バブルのサイズ計算方法やサイズ範囲は display_settings.z_axis.bubble_size_calc_type / display_settings.z_axis.bubble_size_range でカスタマイズ可能です（後述）

曜日・時間帯別の注文件数

ヒートマップの設定例

曜日(order_day_of_week)と時間帯(order_hour)の組み合わせに対する注文件数(order_count)を、色の濃淡で表示する場合、次のように設定します。

yaml

template_type: XYZ_CHART_V2
component_settings:
  render_type: HEATMAP
  x:
    - field: order_day_of_week
  y:
    - field: order_hour
  z:
    - field: order_count
      aggregator: SUM

render_type: HEATMAP を指定
x / y にはディメンション（各1つのみ・必須）を指定（カテゴリ軸として描画されます）
z に色の濃淡で表現するメトリクス（1つのみ・必須）を指定
ヒートマップでは group_by は指定できません

上記の例では、次のようなSQLが生成され、チャート用のデータ加工が行われます。

sql

SELECT
  order_day_of_week AS order_day_of_week___,
  order_hour AS order_hour___,
  SUM(IFNULL(order_count, 0)) AS order_count___sum
FROM
  /* データソースのSQL */
GROUP BY
  order_day_of_week___,
  order_hour___
LIMIT
  1001

データ加工オプション

フレーム機能の利用

frame にディメンションを指定することで、その値ごとにチャートを分割して並べて表示できます。詳細はフレーム機能を参照してください。

表示のカスタマイズ

軸のカスタマイズ

X軸のカスタマイズは、display_settings.x_axis で設定できます
Y軸のカスタマイズは、display_settings.y_axis で設定できます
設定可能な項目は、軸の種類と設定を参照してください

なお、X軸・Y軸の種類は、X軸・Y軸のデータ型と描画タイプで決まります。

描画タイプ	X軸	Y軸
`SCATTER` / `BUBBLE`	日付・日時型: 日時軸数値型: 数値軸上記以外: カテゴリ軸	数値軸
`HEATMAP`	カテゴリ軸	カテゴリ軸

系列のカスタマイズ

display_settings.z_axis で系列の表示をカスタマイズできます。設定可能な項目は描画タイプによって異なります。

凡例の設定

display_settings.legend で凡例の表示をカスタマイズできます。

凡例は、render_type: BUBBLE の場合、または render_type: SCATTER で group_by が指定されている場合に表示されます
設定可能な項目はその他のチャート設定を参照してください

データズームの設定

display_settings.data_zoom_x / display_settings.data_zoom_y で、X軸・Y軸それぞれにズーム範囲をコントロールするスライダーを表示できます。

設定可能な項目はその他のチャート設定を参照してください

その他の設定

次のカスタマイズについてはその他のチャート設定を参照してください
- テキスト設定(display_settings.text)
フレーム表示時の設定(display_settings.frame)についてはフレーム機能を参照してください

型定義

render_type により、描画タイプを指定します
以下の型については、該当ドキュメントを参照してください

描画タイプ：散布図

type ChartSettings = {
  template_type: 'XYZ_CHART_V2';
  component_settings: ComponentSettingsCommon & {
    render_type: 'SCATTER';
    x: [DimensionField];
    y: [DimensionField];  // 数値型のディメンションを1つのみ指定
    group_by: DimensionField[] | [];
    group_sort?: GroupSortType;
    group_sort_custom?: [AttributeField];
    order_by?: AxisSortType;
    order_by_custom?: SqlOrderBy[];
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
  };
  display_settings?: {
    text?: TextSettings;
    frame?: FrameSettings;
    legend?: LegendSettings;
    data_zoom_x?: DataZoomSettings;
    data_zoom_y?: DataZoomSettings;
    x_axis?: AxisSettings;
    y_axis?: AxisSettings;
    z_axis?: {
      stats?: SeriesStats;
      trendline?: TrendlineSettings;
    } & PointSettings;
  };
};

描画タイプ：バブルチャート

type ChartSettings = {
  template_type: 'XYZ_CHART_V2';
  component_settings: ComponentSettingsCommon & {
    render_type: 'BUBBLE';
    x: [DimensionField];
    y: [DimensionField];  // 数値型のディメンションを1つのみ指定
    z: [MetricsField];  // バブルサイズのメトリクスを1つのみ指定
    group_by: DimensionField[] | [];
    group_sort?: GroupSortType;
    group_sort_custom?: [AttributeField];
    order_by?: AxisSortType;
    order_by_custom?: SqlOrderBy[];
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
  };
  display_settings?: {
    text?: TextSettings;
    frame?: FrameSettings;
    legend?: LegendSettings;
    data_zoom_x?: DataZoomSettings;
    data_zoom_y?: DataZoomSettings;
    x_axis?: AxisSettings;
    y_axis?: AxisSettings;
    z_axis?: {
      formatter?: FormatterSettings;
      value_label?: ValueLabelSettings;
      stats?: SeriesStats;
      trendline?: TrendlineSettings;
    } & BubbleSettings;
  };
};

描画タイプ：ヒートマップ

type ChartSettings = {
  template_type: 'XYZ_CHART_V2';
  component_settings: ComponentSettingsCommon & {
    render_type: 'HEATMAP';
    x: [DimensionField];
    y: [DimensionField];
    z: [MetricsField]; // 色の濃淡を表現するメトリクス
    order_by?: AxisSortType;
    order_by_custom?: SqlOrderBy[];
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
  };
  display_settings?: {
    text?: TextSettings;
    frame?: FrameSettings;
    visual_map?: {
      hide?: boolean;  // グラデーションのスライダーを非表示にする場合は true を指定
      position?: 'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT';
    };
    data_zoom_x?: DataZoomSettings;
    data_zoom_y?: DataZoomSettings;
    x_axis?: AxisSettings;
    y_axis?: AxisSettings;
    z_axis?: {
      formatter?: FormatterSettings;
      value_label?: ValueLabelSettings;
    };
  };
};

XYZチャート ​

概要 ​

設定例 ​

顧客の売上と利益の関係 ​

散布図の設定例 ​

バブルチャートの設定例 ​

曜日・時間帯別の注文件数 ​

ヒートマップの設定例 ​

データ加工オプション ​

フレーム機能の利用 ​

表示のカスタマイズ ​

軸のカスタマイズ ​

系列のカスタマイズ ​

凡例の設定 ​

データズームの設定 ​

その他の設定 ​

型定義 ​

描画タイプ：散布図 ​

描画タイプ：バブルチャート ​

描画タイプ：ヒートマップ ​