ファネルチャート

概要

ファネルチャート（template_type: 'FUNNEL_CHART'）では、ステップごとに値が逓減していく様子を漏斗状に可視化します。ラベル(x)をディメンション、値(y)をメトリクスとして、ラベルごとに値を集計して描画します。

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

設定例

購入ファネルの可視化

ECサイトでの各ステップ(stage_name)ごとのユーザ数(user_count)を、ファネルチャートで表示する場合、次のように設定します。

:::sql-block
```sql
SELECT
  stage_name,
  user_count
FROM
  conversion_funnel
```

```yaml {.chart}
chartSettings:
  template_type: FUNNEL_CHART
  component_settings:
    x:
      - field: stage_name
    y:
      - field: user_count
        aggregator: SUM
    order_by: VALUE_DESC
```
:::

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

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

sql

SELECT
  stage_name AS stage_name___,
  SUM(IFNULL(user_count, 0)) AS user_count___sum
FROM
  /* データソースのSQL */
GROUP BY
  stage_name___
ORDER BY
  user_count___sum DESC
LIMIT
  1001

データ加工オプション

描画対象の件数制限

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

フレーム機能の利用

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

ファネルチャートでは、フレームごとに最大値を計算する必要があるため、display_settings.frame.independent_scale は指定できません

表示のカスタマイズ

形状のカスタマイズ

display_settings.shape で、ファネルの向き・配置・サイズをカスタマイズできます。

type ShapeSettings = {
  orient?: 'vertical' | 'horizontal';      // ファネルの向き。デフォルトは 'vertical'
  align?: 'center' | 'left' | 'right';     // 縦向きの配置。デフォルトは 'center'
                                           // (orient: 'vertical' の場合のみ有効)
  max_size?: number;  // 最大サイズ(%) 0〜100 で指定。デフォルトは 75
  min_size?: number;  // 最小サイズ(%) 0〜100 で指定。デフォルトは 0
  gap?: number;       // 各ステップ間の間隔(px) 0〜20 で指定。デフォルトは 0
};

ラベルの設定

display_settings.label で各ステップのラベル表示をカスタマイズできます。

type FunnelLabelSettings = {
  hide?: boolean;          // ラベル全体を非表示にする場合は true を指定
  show_value?: boolean;    // 値を表示する場合は true を指定
  value_label_formatter?: FormatterSettings;
  hide_percent?: boolean;  // 構成比(%)を非表示にする場合は true を指定
  position?: 'outside' | 'inside';  // ラベルの表示位置。デフォルトは 'outside'
};

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

その他の設定

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

型定義

以下の型については、該当ドキュメントを参照してください
以下の型定義は対応するセクションを参照してください
- ShapeSettings: 形状のカスタマイズ
- FunnelLabelSettings: ラベルの設定

type ChartSettings = {
  template_type: 'FUNNEL_CHART';
  component_settings: ComponentSettingsCommon & {
    x: [DimensionField];
    y: [MetricsField];
    order_by?: AxisSortType;
    order_by_custom?: SqlOrderBy[];
    limit?: number;
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
    limit?: number;
  };
  display_settings?: {
    text?: TextSettings;
    legend?: LegendSettings;
    frame?: Omit<FrameSettings, 'independent_scale'>;
    shape?: ShapeSettings;
    label?: FunnelLabelSettings;
  };
};

ファネルチャート ​

概要 ​

設定例 ​

購入ファネルの可視化 ​

データ加工オプション ​

描画対象の件数制限 ​

フレーム機能の利用 ​

表示のカスタマイズ ​

形状のカスタマイズ ​

ラベルの設定 ​

その他の設定 ​

型定義 ​