Mashup Builder > ウィジェット > 標準ウィジェット > KPI ダイヤルウィジェット (テーマ指定可能)
KPI ダイヤルウィジェット (テーマ指定可能)
ダイヤル、横棒、縦棒などのいくつかのレイアウトのいずれかを使用して主要業績評価指標 (KPI) の値を表示します。状態のフォーマットを適用して、1 つまたは複数の KPI 値ターゲットをハイライトできます。
* 
このウィジェットは ThingWorx Web Component SDK ライブラリで Web コンポーネントとしても使用できます。
構造
1. ウィジェットラベル
2. 状態のフォーマットトラッカー
3. KPI 値
4. 測定単位ラベル
5. 値トラッカー
ウィジェットのレイアウト
ダイヤルのレイアウトに加え、以下のいずれかのレイアウトを使用して KPI 値を表示するようにウィジェットを設定できます。
横棒
縦棒
状態のフォーマットの適用
状態のフォーマットをウィジェットに適用して、ターゲット値の円弧を表示できます。円弧は、KPI 値の異なる状態または範囲を表す複数のセグメントに分割されています。状態のフォーマット規則を適用して、現在の KPI 値に基づいてウィジェットのスタイルを設定できます。状態のフォーマットを適用するには、次の手順を実行します。
1. Composer で、数値の範囲に基づいてスタイル定義を適用する状態定義エンティティを作成します。
2. Mashup Builder で、ウィジェットを選択し、「プロパティ」パネルを開きます。
3. 「状態のフォーマット」をクリックして TargetFormat プロパティを設定します。
4. 「状態のフォーマット」ダイアログで、「状態ベースのスタイル定義」を選択します。
5. 「依存フィールド」で、Value を選択します。
6. ステップ 1 で作成した状態定義を選択し、「完了」をクリックします。
7. 保存してから、マッシュアップを表示します。
ランタイムで、適用されているスタイル定義と現在の値に基づいて、状態のフォーマット規則がウィジェットに適用されます。次の例は、状態のフォーマットがウィジェットに適用されているダイヤルを示しています。状態のフォーマットの円弧は 3 つの KPI 値の範囲に分割されています。
必要に応じて、状態定義内で定義されている状態ごとにステータスアイコンを表示できます。デフォルトでは、このアイコンはウィジェットの右側に表示されます。IconPosition プロパティを使用して、アイコンの位置を左側に設定できます。アイコンの最大サイズを設定するには、MaxIconSize プロパティを使用します。
ウィジェットに状態のフォーマットを適用する方法の詳細については、ウィジェットへの状態フォーマットの適用を参照してください。
ダイヤルの開始角度と終了角度の設定
StartAngle および EndAngle プロパティを使用して、ダイヤルの円弧の開始角度と終了角度を設定できます。StartAngle プロパティは、トラッカーの円弧の開始点を指定します。これら 2 つのプロパティでは 0 度から 360 度までの値を使用できます。デフォルトでは、円弧は 6 時の位置から時計回りの方向に 45 度から 315 度までの間で計算されます。ウィジェットの Direction プロパティを使用して円弧の方向を変更できます。次の例は、開始角度が 90 度に設定され、終了角度が 270 度に設定されているダイヤルトラッカーを示しています。
KPI 値のフォーマット
複数のコンフィギュレーションプロパティを使用して KPI 値をフォーマットできます。UnitOfMeasure コンフィギュレーションを使用して KPI 値の測定単位を指定できます。この測定単位は、KPI 値にマウスポインタを合わせるとツールヒントに表示されます。ShowUOMLabel プロパティを true に設定すると、ウィジェットは KPI 値の横に測定単位 (UOM) を表示します。ValueFormat コンフィギュレーションでは、0.000 構文を使用して、KPI 数値の小数フォーマットを設定できます。
ウィジェットのプロパティ
プロパティ名
説明
ベースタイプ
デフォルト値
バインド
ローカリゼーション
Clicked
ウィジェットがクリックされたときにトリガーされるバインド可能なイベント。
イベント
Y
N
ValueFormat
状態定義エンティティを使用してウィジェットと KPI 値に状態のフォーマットを適用します。
状態定義
0000
Y
N
Label
ウィジェットラベルのテキストを指定します。
STRING
ラベル
Y
Y
Layout
ウィジェットでの KPI 値の表示に使用するレイアウトのタイプを制御します。オプション: 「ダイヤル」「横棒」「縦棒」
STRING
ダイヤル
N
N
StartAngle
ダイヤル上の値とターゲットトラッカーの開始角度を、6 時の位置から開始してゼロを基準に設定します。0 から 360 までの正の角度を入力できます。Direction プロパティを使用して角度方向を設定します。
NUMBER
45
N
N
EndAngle
ダイヤル上の値とターゲットトラッカーの終了角度を、6 時の位置から開始してゼロを基準に設定します。0 から 360 までの正の角度を入力できます。Direction プロパティを使用して角度方向を設定します。
NUMBER
315
N
N
Direction
ダイヤル、縦棒、または横棒で、値トラッカーの方向を指定します。
オプション
ダイヤル: 時計回り/反時計回り
水平: 左から右/右から左
垂直: 下から上/上から下
STRING
ダイヤル: 時計回り
水平: 左から右
垂直: 下から上
N
N
IconPosition
値ラベルを基準にした KPI ステータスアイコンの位置を指定します。状態のフォーマットを使用して表示するアイコンを指定できます。
STRING
Y
N
LabelAlignment
ウィジェットラベルの整列を制御します。オプション: 「左」「中央」「右」
STRING
Y
N
IconSize
KPI ステータスアイコンのサイズを設定します。オプション: 「小」「中」「大」「特大」
STRING
Y
N
LabelType
ラベルタイプを設定します。オプション: 「キャプション」「本文」「ラベル」「タイトル」「大きいタイトル」「サブヘッダー」「ヘッダー」「大きいヘッダー」
STRING
ラベル
N
N
MinimumValue
ウィジェットに表示する最小 KPI 値を設定します。
NUMBER
0
Y
N
MaximumValue
ウィジェットに表示する最大 KPI 値を設定します。
NUMBER
100
Y
N
UnitOfMeasure
KPI 値の測定単位を指定します。測定単位がツールヒントに表示されます。
STRING
Y
Y
ShowUOMLabel
KPI 値の横に測定単位が表示されます。
BOOLEAN
False
Y
N
Value
KPI 値を設定します。
NUMBER
Y
N
検証プロパティ
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能か (Y/N)
ローカライズ可能か (Y/N)
ValidationState
検証状態を設定するバインド可能なプロパティ。このプロパティは UndefinedUnvalidatedValid、または Invalid に設定できます。
STRING
Undefined
Y
N
ValidationOutput
ウィジェット検証の出力を取得します。戻り値は UndefinedUnvalidatedValid、または Invalid です。
STRING
Y
N
Validate
ウィジェットの値が変更されたときにトリガーされるバインド可能なイベント。このイベントをサービスまたは関数にバインドして、検証のパターンまたは定義式を適用します。
イベント
Y
N
CriteriaMessage
検証に失敗したときに表示されるメッセージ。
STRING
Y
CriteriaMessageDetails
検証失敗のメッセージに関する詳細情報を表示するセカンダリメッセージ。
STRING
Y
Y
ShowValidationSuccess
検証に成功したときに、成功のメッセージを表示します。
BOOLEAN
False
Y
N
SuccessMessage
検証に成功したときに表示されるメッセージ。
STRING
Y
Y
SuccessMessageDetails
検証成功のメッセージに関する詳細情報を表示するセカンダリメッセージ。
STRING
Y
Y
ValidationSuccessIcon
検証に成功したときに、ステータスメッセージ内に表示する SVG アイコンを選択します。
SVG アイコンのリスト
PTC Success
N
N
ShowValidationFailure
検証が失敗した場合に表示する失敗メッセージを設定します。
BOOLEAN
False
Y
N
ValidationFailureIcon
検証に失敗したときに、ステータスメッセージ内に表示する SVG アイコンを選択します。
SVG アイコンのリスト
PTC error
N
N
MinValueFailureMessage
KPI 値が MinimumValue プロパティで設定されている値より小さい場合に表示されるメッセージ。
テキストフィールド
<MinValue> is the minimum value.
Y
Y
MaxValueFailureMessage
KPI 値が MaximumValue プロパティで設定されている値より大きい場合に表示されるメッセージ。
テキストフィールド
<MaxValue> is the maximum value
Y
Y
これは役に立ちましたか?