一覧表示画面にグラフを表示する

最終更新日: 2025年4月8日
R8 | R9

一覧表示項目の値を使ってグラフを表示することができます。

折れ線グラフ

一覧表示項目に含まれる「月度」と「気温」項目の値を使って、折れ線グラフを表示させてみます。グラフに出力させるため、気温項目は数値型となっています。

サンプルモデル

「気温」項目のモデル項目詳細定義ダイアログを開きます。出力制御 > 一覧画面 > チャートの設定を行います。

チャートの設定

設定項目	説明	設定例
タイトル	グラフのタイトルを指定します。	月別平均気温
種類	グラフの種類を指定します。縦棒、横棒、折線、円、ドーナツ、散布図、レーダーを指定できます。（散布図はカスタマイズが必要です。後述します。）	折線
サイズ	表示するグラフの幅と高さをピクセル値で指定します。	400,350
軸ラベル項目ID	軸となる項目IDを指定します。一覧表示に含まれる項目を指定してください。	month
色	HTMLで利用できる色を指定します。色名またはシャープ文字ではじめる16進数表記が利用できます。	orange
凡例	グラフ内に凡例の情報を含めることができます。	気温

検索画面と一覧表示画面を同時に表示する設定とします。この設定により、検索条件で絞り込んだ値に連動してグラフの表示も変わります。

検索画面と一覧表示画面を同時に表示する

グラフを表示させる場合、データ取得のために REST API を利用します。そのため、このモデルの REST API を有効にしてください。

RESTAPIを有効にする

実行例

一覧表示部の下部にグラフが表示されます。

折れ線グラフ(全体)

折れ線グラフ(拡大)

検索条件を指定すると、絞り込まれた結果でグラフが表示されます。

検索結果に連動してグラフ表示が変わる

棒グラフ

「消費電力」項目を加えてみます。

消費電力項目を加える

この項目は縦棒グラフとして出力する設定を行います。

縦棒の設定

実行例

グラフは一つのテーマごとに並べて表示されます。（並び順は項目の定義順となります。）

折れ線グラフと縦棒グラフの表示

[応用] JavaScript を使ってグラフをカスタマイズする

このグラフは Web ブラウザ上で動作する JavaScript によって描画されています。開発者は JavaScript を追加することでカスタマイズを行うことができます。詳細は "一覧表示部のグラフのカスタマイズ" をお読みください。

[応用] 一覧表示グリッドでグラフを表示する

一覧表示グリッド形式でのグラフ表示は JavaScript によるカスタマイズが必要です。詳細は "一覧表示部のグラフのカスタマイズ" をお読みください。

[応用] 散布図

散布図の表示は JavaScript によるカスタマイズが必要です。詳細は "一覧表示部のグラフのカスタマイズ" をお読みください。

仕様・制約

検索画面と一覧表示画面を同時に表示する設定としてください。この設定により、検索条件で絞り込んだ値に連動してグラフの表示も変わります。
グラフ表示のためのデータ取得で REST API を使います。グラフを表示するモデルでは、REST API を有効にしてください。
グラフを帳票（Excel帳票、PDF帳票）に含めることはできません。Webブラウザでの表示用となります。
一覧表示の対象項目を「隠し項目」とすることもできます。一覧表示には含まれませんが、グラフには利用できるようになります。