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

最終更新日: 2021年12月14日
R8 | R9

折れ線グラフ

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

図1 サンプルモデル

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

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

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

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

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

図4 RESTAPIを有効にする

実行例

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

図5 折れ線グラフ(全体)
図6 折れ線グラフ(拡大)

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

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

棒グラフ

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

図8 消費電力項目を加える

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

図9 縦棒の設定

実行例

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

図10 折れ線グラフと縦棒グラフの表示(全体)
図11 折れ線グラフと縦棒グラフの表示(拡大)

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

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

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

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

[応用] 散布図

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

仕様・制約

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