# チャート共通 ## チャート内でのデータ加工 ### ディメンションとメトリクスチャートのデータ集計では、**ディメンション**と**メトリクス**という概念があります。 * **ディメンション**: データをグループ化するための値。カテゴリや日付など、「何で分けるか」を決める * **メトリクス**: 集計される数値。合計、平均、件数など、「何を測るか」を決める SQLで表現すると、ディメンションは `GROUP BY` の対象となるカラム、メトリクスは `SUM()` や `COUNT()` などの集計関数で計算されるカラムに相当します。 ### 日付フィールドの変換（切り捨て・抽出）ディメンション（X軸、グループ化など）で日付型カラムを選択する際、日付を変換して使用できます。 * 設定方法 * チャート編集画面「基本設定」において日付型カラムを選択し、「編集」を押下。変換モードと変換部分を選択する。 * 変換モード * 切り捨て：指定した単位で日付を切り捨てます * 例：2025-01-15 を MONTH で切り捨て → 2025-01-01 * 用途：月別、週別、年別の集計 * 抽出：日付から特定の部分のみを取り出します * 例：2025-01-15 から DAY を抽出 → 15 * 用途：月内の日ごとパターン分析、時間帯分析（異なる月の同じ日は集約されます） ### インメモリ処理チャート用のデータ加工では、データソースのクエリの実行結果が1,000行以内で、カスタムSQLが指定されていない場合、新しいクエリを実行せずに同等の処理をユーザーのブラウザ上で行います。この処理を「インメモリ処理」と呼び、チャートの「基本設定」>「インメモリ処理を無効化」から無効化することができます。 ## Tips ### フレーム機能いくつかのチャートでは、特定のカラムをフレームとして設定することで、**そのカラムの値ごとにチャートを分割して表示**できます。フレームの表示方法は「フレームレイアウト」から「タイムライン」か「グリッド」を選択できます。フレーム機能を使うことで、時系列の変化やカテゴリ間の比較を行いやすくなります。また、フレーム間で比較しやすいよう、Y軸の表示範囲・バブルサイズのスケール・ヒートマップの色スケールなどがデフォルトで全フレーム共通になっています。この動作は「詳細設定」>「フレーム」>「スケールを独立」から変更できます。 #### タイムラインレイアウトタイムラインレイアウトでは、チャート下部にフレームコントロールが表示され、フレームの手動切替やアニメーション再生が可能になります。 |

| | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | #### フレーム機能に対応しているチャート | チャート | 対応状況 | | ------------------------------------------------------------------------------- | ------------------------ | | [XYチャート](https://docs.codatum.jp/data-exploration/chart/xy-chart) | 対応 | | [円形チャート](https://docs.codatum.jp/data-exploration/chart/radial-chart) | 対応 | | [XYZチャート](https://docs.codatum.jp/data-exploration/chart/xyz-chart) | 対応 | | [階層チャート](https://docs.codatum.jp/data-exploration/chart/hierarchy-chart) | 対応 | | [グラフチャート](https://docs.codatum.jp/data-exploration/chart/graph-chart) | 一部対応（「棒グラフ（ドリルダウン）」は非対応） | | [ファンネルチャート](https://docs.codatum.jp/data-exploration/chart/funnel-chart) | 対応 | | [ウォーターフォールチャート](https://docs.codatum.jp/data-exploration/chart/waterfall-chart) | 対応 | | [ワードクラウド](https://docs.codatum.jp/data-exploration/chart/word-cloud) | 対応 | ### 値フォーマットチャート内に表示される値やラベルのフォーマットは、デフォルトでは**アカウントの言語設定に応じて、最適化されます**。また、チャートの「詳細設定」からフォーマッタを変更することもできます。フォーマッタを変更している場合、言語設定に関わらず、フォーマッタの設定が優先されます。 #### 指定例例えば、XYチャートの場合、以下のようにフォーマッタを指定することができます。 * X軸、Y軸のラベルフォーマット * 「詳細設定」>「X軸/Y軸」>「値フォーマット」から指定 * ツールチップ上のフォーマット * 「詳細設定」>「系列」>「(系列名)」>「値フォーマット」から指定 * 値ラベルのフォーマット（「値ラベル」を表示している場合） * 「詳細設定」>「系列」>「(系列名)」>「値ラベル」>「値ラベルフォーマット」から指定 #### 数値フォーマッタ数値のフォーマッタは、[d3-format](https://d3js.org/d3-format)の書式を利用してフォーマットします。例えば、以下のように指定することができます。 | 設定値 | 数値 | フォーマット結果 | | ------ | ------------ | -------- | | `.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.js](https://day.js.org/docs/en/display/format)の書式を利用してフォーマットします。\ （数値フォーマッタと日付フォーマッタは、入力欄の左端にあるボタンで切り替え式になっている場合があります）例えば、以下のように指定することができます。 | 設定値 | 日付 | フォーマット結果 | | ------------ | ------------ | ------------ | | `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)」に数値(例: `100`、`200`)を入力します。長いラベルテキストを省略表示したい場合に活用できます。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.codatum.jp/data-exploration/chart/chart-common.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.