円形チャート

概要

円形チャート（template_type: 'RADIAL_CHART_V2'）では、円グラフ・ドーナツ・レーダーチャートを表示できます。ラベル(x)にディメンション、値(ys)にメトリクスを指定して、ラベルごとに値を集計して描画します。

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

render_type	描画タイプ	備考
PIE	円グラフ	-
DONUT	ドーナツ	円グラフの中央に穴を空けたもの
RADAR	レーダーチャート	group_by を指定すると複数系列を重ねて比較可能

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

設定例

カテゴリ別売上の構成比

円グラフの設定例

カテゴリ(sales_category)別の売上(sales_amount)を、構成比が大きい順に円グラフで表示する場合、次のように設定します。

:::sql-block
```sql
SELECT
  sales_category,
  sales_amount
FROM
  sales_data
```

```yaml {.chart}
chartSettings:
  template_type: RADIAL_CHART_V2
  component_settings:
    render_type: PIE
    x:
      - field: sales_category
    ys:
      - field: sales_amount
        aggregator: SUM
    order_by: VALUE_DESC
```
:::

• データソースのSQLの実行結果として出力されるカラムを、チャート設定内で参照します
  • 以降の設定例では、データソースの定義は省略し、chartSettings の中身のみを記述しますが、チャート設定からは必ずデータソースのカラムを参照する必要があります
• render_type: PIE を指定
• x にラベルとなるディメンション（1つのみ）を指定
• ys に値となるメトリクス（1つのみ）を指定
• order_by: VALUE_DESC を指定して、値が大きい順にソート
  • ソートの詳細はデータのソートを参照してください

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

SELECT
  sales_category AS sales_category___,
  SUM(IFNULL(sales_amount, 0)) AS sales_amount___sum
FROM
  /* データソースのSQL */
GROUP BY
  sales_category___
ORDER BY
  sales_amount___sum DESC
LIMIT
  1001

ドーナツの設定例

render_type: DONUT を指定するとドーナツチャートとして描画されます。中央の穴の大きさは display_settings.shape.inner_radius で調整可能です（デフォルトは 40%）。

template_type: RADIAL_CHART_V2
component_settings:
  render_type: DONUT
  x:
    - field: sales_category
  ys:
    - field: sales_amount
      aggregator: SUM
  order_by: VALUE_DESC
display_settings:
  shape:
    radius: 70
    inner_radius: 40

商品カテゴリ別のKPI比較

レーダーチャートの設定例

複数の指標(kpi_name)に対する値(kpi_score)を、商品カテゴリ(product_category)別に重ねて表示する場合、次のように設定します。

template_type: RADIAL_CHART_V2
component_settings:
  render_type: RADAR
  x:
    - field: kpi_name
  ys:
    - field: kpi_score
      aggregator: AVG
  group_by:
    - field: product_category
  order_by: LABEL_ASC

• render_type: RADAR を指定
• x にレーダーの各軸となるディメンション（1つのみ）を指定
• ys に軸上の値となるメトリクス（1つのみ）を指定
• group_by にディメンションを指定すると、その値ごとに系列が分割され、複数のレーダーが重ねて描画されます
  • group_by は省略可能で、省略時は単一系列として描画されます
• order_by: LABEL_ASC を指定して、KPI名の昇順でソート
  • ソートの詳細はデータのソートを参照してください

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

SELECT
  product_category AS product_category___,
  kpi_name AS kpi_name___,
  AVG(kpi_score) AS kpi_score___avg
FROM
  /* データソースのSQL */
GROUP BY
  kpi_name___,
  product_category___
ORDER BY
  kpi_name___ ASC
LIMIT
  1001

データ加工オプション

描画対象の件数制限

limit により、描画対象のデータの件数を制限できます。詳細はデータの件数制限を参照してください。

フレーム機能の利用

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

表示のカスタマイズ

形状のカスタマイズ

円・ドーナツ・レーダーいずれの場合も、display_settings.shape で半径を調整できます。

type ShapeSettings = {
  radius?: number;        // チャートの半径を 0〜100(%) で指定。デフォルトは 70
  inner_radius?: number;  // ドーナツの内側の半径を 0〜100(%) で指定。デフォルトは 40
                          // (render_type: DONUT の場合のみ有効)
};

ラベルの設定（円グラフ・ドーナツ）

render_type: PIE または render_type: DONUT の場合、display_settings.label で各セクションのラベル表示をカスタマイズできます。

type LabelSettings = {
  hide?: boolean;                   // ラベル全体を非表示にする場合は true を指定
  hide_item_name?: boolean;         // 項目名 (x の値) を非表示にする場合は true を指定
  show_value?: boolean;             // 値を表示する場合は true を指定
  value_label_formatter?: FormatterSettings;
  hide_percent?: boolean;           // 構成比(%)を非表示にする場合は true を指定
  min_show_label_percent?: number;  // ラベルを表示する最小構成比(0〜100%)。デフォルトは 5
  position?: 'inside' | 'outside';  // ラベルの表示位置。デフォルトは 'outside'
};

• value_label_formatter で値の書式を指定できます。詳細はフォーマッター設定を参照してください

値ラベルの設定（レーダーチャート）

render_type: RADAR の場合、display_settings.value_label で各軸上の値ラベル表示をカスタマイズできます。設定可能な項目は系列の表示設定を参照してください。

半径軸の設定（レーダーチャート）

render_type: RADAR の場合、display_settings.r_axis でレーダーの半径軸（中心からの軸）をカスタマイズできます。

type RAxisSettings = {
  hide_label?: boolean;  // 軸ラベルを非表示にする場合は true を指定
  max?: number;          // 軸の上限値。未指定の場合はデータの最大値
  min?: number;          // 軸の下限値。未指定の場合はデータの最小値
};

その他の設定

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

型定義

• render_type により、描画タイプを指定します
• 以下の型については、該当ドキュメントを参照してください
  • ComponentSettingsCommon
  • DimensionField, MetricsField
  • AxisSortType, SqlOrderBy
  • FrameLayout, FrameSettings
  • ValueLabelSettings
  • TextSettings, LegendSettings
• 以下の型定義は対応するセクションを参照してください
  • ShapeSettings: 形状のカスタマイズ
  • LabelSettings: ラベルの設定
  • RAxisSettings: 半径軸の設定

描画タイプ：円グラフ・ドーナツ

type ChartSettings = {
  template_type: 'RADIAL_CHART_V2';
  component_settings: ComponentSettingsCommon & {
    render_type: 'PIE' | 'DONUT';
    x: [DimensionField];
    ys: [MetricsField];
    order_by?: AxisSortType;
    order_by_custom?: SqlOrderBy[];
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
    limit?: number;
  };
  display_settings?: {
    text?: TextSettings;
    legend?: LegendSettings;
    frame?: FrameSettings;
    shape?: ShapeSettings;
    label?: LabelSettings;
  };
};

描画タイプ：レーダーチャート

type ChartSettings = {
  template_type: 'RADIAL_CHART_V2';
  component_settings: ComponentSettingsCommon & {
    render_type: 'RADAR';
    x: [DimensionField];
    ys: [MetricsField];
    group_by?: DimensionField[];
    order_by?: AxisSortType;
    order_by_custom?: SqlOrderBy[];
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
    limit?: number;
  };
  display_settings?: {
    text?: TextSettings;
    legend?: LegendSettings;
    frame?: FrameSettings;
    shape?: ShapeSettings;
    value_label?: ValueLabelSettings;
    r_axis?: RAxisSettings;
  };
};