ゲージウィジェット
ゲージウィジェットには、特定の範囲内の 1 つの値を視覚化する針のゲージが表示されます。以下の方法でウィジェットを設定できます。
• ゲージの断面または間隔の数を定義します。
• 値ラベルの表示とフォーマットを制御します。
• 角度と参照角度の値を設定して、データ範囲の表示方法を制御します。
• データを説明する凡例を表示します。
• 目盛、針、中心点、ゲージ境界のサイズを制御します。
ゲージウィジェットへのデータのバインド
ゲージウィジェットにデータを表示するには、数値プロパティをその Data プロパティにバインドする必要があります。
1. Mashup Builder で、サービスの数値プロパティをウィジェットの Data プロパティにバインドします。
2. 「プロパティ」パネルで、以下のプロパティを設定します。
◦ ゲージの範囲を設定するには、MinValue プロパティと MaxValue プロパティを使用します。
◦ ウィジェットの値とラベルをフォーマットするには、ValueDecimals プロパティと LabelDecimals プロパティを使用します。
◦ 値の範囲の角度を設定するには、Aperture プロパティを使用します。デフォルトでは、この角度は 255 に設定されています。
3. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
バインドされているデータサービスがランタイムで実行されると、ゲージ値が表示されます。
データソースを ValueDecimals および LabelDecimals プロパティにバインドして、小数点以下の桁数を動的に設定できます。データのタイプが異なると、値とラベルの小数に対して特定のフォーマットが必要になる場合があります。たとえば、ゲージに複数のソースからのデータが表示されている場合、値のフォーマットを現在のデータ型と一致させることができます。
ゲージ値のラベルの設定
デフォルトでは、ウィジェットにはゲージ針を使用して現在の値が表示されます。ウィジェットの ValueDisplayMode プロパティを使用して値を表示できます。次のオプションを使用できます。
• 「なし」 - 値ラベルを非表示にします (デフォルト)。
• 「内側」 - ゲージの内側。
• 「上」 - ゲージの上。
• 「下」 - ゲージの下。
ウィジェットのプロパティ
 | スタイルおよび共通のウィジェットプロパティは、次の表には含まれていません。 |
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か(Y/N) | ローカライズ可能か(Y/N) | ||
|---|---|---|---|---|---|---|---|
CustomClass | ウィジェットの最上位の div に適用するユーザー定義の CSS クラス。スペースで区切って、複数のクラスを入力できます。 | STRING | 該当なし | Y | N | ||
Data | ウィジェットのデータソース。1 つの数値をバインドする必要があります。
| NUMBER | 該当なし | Y | N | ||
MinValue | ゲージの最小値。 | NUMBER | 0 | Y | N | ||
MaxValue | ゲージの最大値。 | NUMBER | 100 | Y | N | ||
ValueFormatter | ゲージの針と値の表示のスタイル規則。 | STATEFORMATTING | 状態のフォーマット | N | N | ||
FormatNeedle | 針に状態のフォーマットを適用します。 | BOOLEAN | True | N | N | ||
Intervals | ゲージ間隔の数 (目盛、ラベル、インジケータリングに影響)。 | NUMBER | 10 | N | N | ||
IntervalsPerLabel | ラベルごとのゲージ間隔の数 (ラベルの量に影響)。 | NUMBER | 2 | N | N | ||
LabelDisplayMode | ラベルを表示する場所 (内側、外側、なし)。 | BOOLEAN | 内側 | N | N | ||
ShowDataLoading | ロード中のデータを表示します。 | BOOLEAN | True | N | N | ||
MinorTicks | 大目盛の間の小目盛の数。 | NUMBER | 4 | N | N | ||
TickLength | 大目盛の長さ。 | NUMBER | 8 | N | N | ||
MinorTickLength | 小目盛の長さ。 | NUMBER | 4 | N | Y | ||
ValueDisplayMode | 値を表示する場所 (上、下、内側、なし)。 | STRING | 下 | N | N | ||
LabelDigits | ラベルの値の表示に使用する桁数。 | NUMBER | 3 | N | N | ||
LabelDecimals | ラベルの値の表示に使用する小数点以下の桁数。 | NUMBER | 0 | Y | N | ||
ValueDigits | 値の表示に使用する桁数。 | NUMBER | 3 | N | N | ||
ValueDecimals | 値の表示に使用する小数点以下の桁数。 | NUMBER | 0 | Y | N | ||
LegendDisplayMode | 凡例を表示する場所 (上、下、なし)。 | STRING | 下 | N | N | ||
Legend | ゲージの凡例のテキスト。 | STRING | 該当なし | Y | Y | ||
ReferenceAngle | ゲージの方向を制御する角度。 | NUMBER | 225 | N | N | ||
Aperture | ゲージのサイズを制御する角度。 | NUMBER | 270 | N | N | ||
NeedleDiameter | ゲージの針の直径 (ピクセル)。 | NUMBER | 10 | N | N | ||
CenterDiameter | ゲージの中央の直径 (ピクセル)。 | NUMBER | 20 | N | N | ||
GaugeBorder | ゲージの境界の幅/厚み (ピクセル)。 | NUMBER | 20 | N | N | ||
RingWidth | ゲージリングの幅/厚み (ピクセル)。 | NUMBER | 10 | N | N | ||
ToolTipField | ランタイムでウィジェットにマウスポインタを合わせたときに表示されるオプションのツールヒント。 | STRING | 該当なし | Y | Y | ||
ShowDataLoading | ロード中のデータを表示します。 | BOOLEAN | True | N | N | ||
Visible | ランタイムでのウィジェットの表示/非表示を設定します。 | BOOLEAN | True | Y | N |