チャート共通

チャート間で共通のコンセプトとTips

チャート内でのデータ加工

ディメンションとメトリクス

チャートのデータ集計では、ディメンションメトリクスという概念があります。

  • ディメンション: データをグループ化するための値。カテゴリや日付など、「何で分けるか」を決める

  • メトリクス: 集計される数値。合計、平均、件数など、「何を測るか」を決める

SQLで表現すると、ディメンションは GROUP BY の対象となるカラム、メトリクスは SUM()COUNT() などの集計関数で計算されるカラムに相当します。

日付フィールドの変換(切り捨て・抽出)

ディメンション(X軸、グループ化など)で日付型カラムを選択する際、日付を変換して使用できます。

  • 設定方法

    • チャート編集画面「基本設定」において日付型カラムを選択し、「編集」を押下。変換モードと変換部分を選択する。

  • 変換モード

    • 切り捨て:指定した単位で日付を切り捨てます

      • 例:2025-01-15 を MONTH で切り捨て → 2025-01-01

      • 用途:月別、週別、年別の集計

    • 抽出:日付から特定の部分のみを取り出します

      • 例:2025-01-15 から DAY を抽出 → 15

      • 用途:月内の日ごとパターン分析、時間帯分析(異なる月の同じ日は集約されます)

インメモリ処理

チャート用のデータ加工では、データソースのクエリの実行結果が1,000行以内で、カスタムSQLが指定されていない場合、新しいクエリを実行せずに同等の処理をユーザーのブラウザ上で行います。

この処理を「インメモリ処理」と呼び、チャートの「基本設定」>「インメモリ処理を無効化」から無効化することができます。

Tips

値フォーマット

チャート内に表示される値やラベルのフォーマットは、デフォルトではアカウントの言語設定に応じて、最適化されます。また、チャートの「詳細設定」からフォーマッタを変更することもできます。フォーマッタを変更している場合、言語設定に関わらず、フォーマッタの設定が優先されます。

指定例

例えば、XYチャートの場合、以下のようにフォーマッタを指定することができます。

  • X軸、Y軸のラベルフォーマット

    • 「詳細設定」>「X軸/Y軸」>「値フォーマット」から指定

  • ツールチップ上のフォーマット

    • 「詳細設定」>「系列」>「(系列名)」>「値フォーマット」から指定

  • 値ラベルのフォーマット(「値ラベル」を表示している場合)

    • 「詳細設定」>「系列」>「(系列名)」>「値ラベル」>「値ラベルフォーマット」から指定

数値フォーマッタ

数値のフォーマッタは、d3-formatarrow-up-rightの書式を利用してフォーマットします。

例えば、以下のように指定することができます。

設定値
数値
フォーマット結果

.0f

12345.6789

12346

,.1r

12345.6789

10,000

-.1%

0.5

50%

また、d3-formatの書式を {} で囲んで、前後にプレフィックスやサフィックスを指定することもできます。 (これはd3-formatの書式ではなく、独自拡張の書式です。詳細は以下の設定例を確認ください)

設定値
数値
フォーマット結果

{,d}円

12345.6

12,346円

約{,d}%

50

約50%

日付フォーマッタ

日付のフォーマッタは、Day.jsarrow-up-rightの書式を利用してフォーマットします。 (数値フォーマッタと日付フォーマッタは、入力欄の左端にあるボタンで切り替え式になっている場合があります)

例えば、以下のように指定することができます。

設定値
日付
フォーマット結果

YYYY-MM-DD

2025-01-01

2025-01-01

YY/M/D

2025-01-01

25/1/1

YYYY年M月

2025-01-01

2025年1月

軸ラベルの表示幅を調整する

軸ラベルの最大幅(px) を設定することで、各軸のラベルの表示幅を制限できます。 チャート設定画面「詳細設定」>「軸ラベルの最大幅(px)」に数値(例: 100200)を入力します。長いラベルテキストを省略表示したい場合に活用できます。

最終更新

役に立ちましたか?