バーゲージ

最終更新日: 2021年6月11日
R8 | R9

実行例

図1はバーゲージを使っていない例です。数値はそのまま表示されています。

バーゲージを使っていない

図2はバーゲージで表示した例です。数値を視覚的に把握することができます。

一覧画面でのバーゲージ表示

詳細画面でもバーゲージ表示を利用することができます。

詳細画面でのバーゲージ表示

定義方法

モデル「県内ダム」の「利水容量(千㎥)」と「貯水率(%)」を例に説明します。

詳細画面

  1. モデル項目詳細定義ダイアログを開きます。
    「出力制御 > 詳細画面 > 数値」の設定を行います。
    表示時の単位、および最大値、バーゲージの色を指定できます。
    色はHTMLカラーコード(先頭がシャープ文字ではじまる16進数表記)です。
    「利水容量(千㎥)」の表示設定

    注意

    バーゲージ表示の場合、フォーマットの設定は無視されます。
    (例:小数のデータをフォーマットで%表示にしている場合、バーゲージでは小数が表示されます。)

    同様に「貯水率(%)」も設定します。

    下図のように最大値が未入力の場合、100として扱われます。
    また、色が未入力の場合は緑色になります。

    「貯水率(%)」の表示設定

一覧画面

  1. モデル項目詳細定義ダイアログを開きます。
    「出力制御 > 一覧画面 > 数値」にて、詳細画面と同様に設定します。
    一覧画面の設定
  2. 次に、バーゲージの幅を揃える設定をします。
    出力制御 > 一覧画面 > スタイルの「ラベルの幅」を%で指定します。

    ワンポイント

    • バーゲージ表示以外の一覧表示項目についても幅を指定する場合、幅の合計が90%程度になるよう設定してください。(列の合計を100%とすると、一覧表示行のボタンを含めると100%を超えてしまうためレイアウトが崩れます。詳細は「出力制御(スタイル) > ラベルの幅 > 比率で指定する場合の注意点」をお読みください。)
    • 利用者が、ブラウザのウインドウサイズを変更した場合、バーゲージの表示はそのままとなります。利用者がブラウザの「読み込み」を行なうことで、新しいウィンドウサイズにあわせてバーゲージが再描画されます。
    ラベルの幅設定
    ラベルの幅設定

[カスタマイズ] JavaScriptを使って色を変更する

JavaScriptカスタマイズファイル MyShowList<モデルID>.js を用意することができます。

次のようなスクリプトを作成することができます。関数 getBarGaugeColor の第一引数にバーゲージの値が引き渡されます。

function getBarGaugeColor(value, barGaugeColor) {
      var color = barGaugeColor;
      if (value < 20) {
        color = "#C7243A";
      } else if (value < 40) {
        color = "#FFE920";
      }
      return color;
    }