バーゲージ

利用できる型とUI

利用できるパターンは次の通りです。

動作例

ダムの貯水量と貯水率の数値をバーゲージで表示した例です。

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

設定方法

上で説明した「ダム」モデルの項目は次のとおりです。

詳細画面

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

   

   注意

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

2. 同様に「貯水率（％）」も設定します。
   下図のように最大値が未入力の場合、100として扱われます。
   また、色が未入力の場合は緑色になります。

   

一覧画面

1. モデル項目詳細定義ダイアログを開きます。
   「出力制御 > 一覧画面 > 数値」にて、詳細画面と同様に設定します。

   

2. あわせて、バーゲージの幅を揃える設定をします。
   出力制御 > 一覧画面 > スタイルの「ラベルの幅」を％で指定します。

   ワンポイント

   • バーゲージ表示以外の一覧表示項目についても幅を指定する場合、幅の合計が90％程度になるよう設定してください。（列の合計を100％とすると、一覧表示行のボタンを含めると100％を超えてしまうためレイアウトが崩れます。）
   • 利用者が、ブラウザのウインドウサイズを変更した場合、バーゲージの表示はそのままとなります。利用者がブラウザの「読み込み」を行なうことで、新しいウィンドウサイズにあわせてバーゲージが再描画されます。
3. 同じように、貯水率の設定も行います。ラベル幅も指定します。