グラフ

グラフは、アクションの実行結果を折れ線グラフ・棒グラフで可視化するためのコンポーネントです。日次の売上や利用者数など、数値の推移や比較を表示する画面を作成するために利用できます。

グラフで表示可能なデータ形式は、テーブルと同じJavaScriptのオブジェクトの配列 (opens in a new tab)です。例えば、以下のようなデータが表示可能です。

[
  { date: "2026-01-01", uu: 120 },
  { date: "2026-01-02", uu: 180 },
];

アクション設定

グラフに表示するデータを取得するアクションの実行方法を設定します。

コンポーネントの表示時に実行: グラフの表示時に指定したアクションを実行し、その結果を表示します
フォームで実行: 同じビュー内のフォームコンポーネントで実行したアクションの結果を表示します。期間などの条件を指定してグラフを更新する画面を作成できます

グラフの設定

X軸のフィールド

X軸の値として使うフィールド名を指定します。全系列で共通です。

X軸の値が重複する行は、自動では集計されず、行ごとに目盛りが作られます（同じ値のラベルが繰り返されます）。日付ごとの合計のように集計した値を表示したい場合は、「結果の加工」で集計してからグラフに渡してください。

X軸の並べ替え

X軸の値で並べ替えるかどうかを、並べ替えない・昇順・降順から選択します。

既定は「並べ替えない」で、アクションが返した順にそのまま描画します。ランキングのように並び順自体に意味がある場合は、この既定のままにしてください。日付や数値の順に並べたい場合は、昇順または降順を選択します。

系列

グラフに表示する系列を設定します。「系列を追加」で複数の系列を同じグラフに重ねて表示できます。系列は最大9個まで追加できます。

系列の種類: 折れ線・棒から選択します
Y軸のフィールド: Y軸の値として使うフィールド名を指定します
ラベル: 凡例・ツールチップに表示する系列名です。未入力の場合はフィールド名が表示されます

系列の色は自動で割り当てられます。また、系列が2つ以上ある場合は、グラフの下部に凡例が自動で表示されます。

グラフの操作

表示されたグラフは、閲覧者がその場で表示を変えられます。ここでの変更は保存されず、画面を読み込み直すと設定した状態に戻ります。

グラフの右上のボタンで、次の操作ができます。

範囲を選択して拡大: グラフ上をドラッグして選択した範囲だけを表示します。「拡大を戻す」で1つ前の表示に戻ります
折れ線で表示: すべての系列を折れ線に切り替えます
棒で表示: すべての系列を棒に切り替えます
積み上げで表示: 系列を積み上げた表示に切り替えます
表示をリセット: 設定した状態に戻します
画像として保存: 表示中のグラフを画像ファイルとして保存します

このほか、凡例が表示されている場合は、凡例をクリックするとその系列の表示・非表示を切り替えられます。

結果の加工

集計やデータの整形が必要な場合は、「結果の加工」機能を使ってアクションの実行結果をグラフ用のデータに変換できます。詳細については「結果の加工」をご覧ください。

例えば、ユーザー一覧からステータスごとの件数を集計して棒グラフで表示する場合は、以下のようなスクリプトが利用できます。

export default (results, { vars }) => {
  const counts = {};
  for (const user of results[0].success) {
    counts[user.status] = (counts[user.status] ?? 0) + 1;
  }
  return Object.entries(counts).map(([status, count]) => ({ status, count }));
};

詳細テーブルタブグループ