Appearance
チャートの共通設定
Tips
フレーム機能
いくつかのチャートでは、特定のカラムをフレームとして設定することで、そのカラムの値ごとにチャートを分割して表示できます。フレームの表示方法は「フレームレイアウト」から「タイムライン」か「グリッド」を選択できます。
フレーム機能を使うことで、時系列の変化やカテゴリ間を比較しやすくなります。また、フレーム間で比較しやすいよう、Y軸の表示範囲・バブルサイズのスケール・ヒートマップの色スケールなどがデフォルトで全フレーム共通になっています。この動作は 詳細設定 > フレーム > スケールを独立 から変更できます。
タイムラインレイアウト
タイムラインレイアウトでは、チャート下部にフレームコントロールが表示され、フレームの手動切替やアニメーション再生が可能になります。
グリッドレイアウト
グリッドレイアウトでは、全フレームをグリッド形式で表示します（最大16件まで）。
列数はデフォルトで自動調整され、なるべく正方形に近い形で配置されます（例: 3件 → 2列×2行、5件 → 3列×2行）。列数は 詳細設定 > フレーム > 列数 から指定できます。チャート数が少ない場合は自動的に縮小されます。
フレーム機能に対応しているチャート
| チャート | 対応状況 |
|---|---|
| XYチャート | 対応 |
| 円形チャート | 対応 |
| XYZチャート | 対応 |
| 階層チャート | 一部対応（「棒グラフ（ドリルダウン）」は非対応） |
| グラフチャート | 対応 |
| ファンネルチャート | 対応 |
| ウォーターフォールチャート | 対応 |
| ワードクラウド | 対応 |
値フォーマット
チャート内に表示される値やラベルのフォーマットは、デフォルトではアカウントの言語設定に応じて、最適化されます。また、チャートの 詳細設定 からフォーマッタを変更できます。フォーマッタを変更している場合、言語設定に関わらず、フォーマッタの設定が優先されます。
指定例
例えば、XYチャートの場合、以下のようにフォーマッタを指定できます。
- X軸、Y軸のラベルフォーマット
- 詳細設定 > X軸/Y軸 > 値フォーマット から指定
- ツールチップ上のフォーマット
- 詳細設定 > 系列 > (系列名) > 値フォーマット から指定
- 値ラベルのフォーマット（値ラベル を表示している場合）
- 詳細設定 > 系列 > (系列名) > 値ラベル > 値ラベルフォーマット から指定
数値フォーマッタ
数値のフォーマッタは、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の書式を利用してフォーマットします。 （数値フォーマッタと日付フォーマッタは、入力欄の左端にあるボタンで切り替え式になっている場合があります）
例えば、以下のように指定できます。
| 設定値 | 日付 | フォーマット結果 |
|---|---|---|
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）を入力します。長いラベルテキストを省略表示したい場合に活用できます。