[]
        
(Showing Draft Content)

Wijmo_Gauge.Bulletgraph

BulletGraph クラス

BulletGraph は、ダッシュボード専用に設計された線形ゲージの一種です。 単一の主要指標を比較指標や定性的範囲とともに表示するため、指標が良好、 不良、またはその他の状態のいずれにあるかがすぐにわかります。

ブレットグラフは、ダッシュボード設計の専門家であるStephen Few氏が開発し、普及させました。詳細と具体例については、 Wikipedia

Example

階層

コンストラクタ

constructor

  • new BulletGraph(element: any, options?: any): BulletGraph
  • BulletGraph クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 BulletGraph

プロパティ

bad

bad: number

指標が不良と見なされる基準値を取得または設定します。

direction

direction: GaugeDirection

ゲージの値が増加する方向を取得または設定します。

このプロパティのデフォルト値はGaugeDirection.Rightです。

face

face: Range

ゲージの全体的な形状と外観を表すために使用される Range を取得または設定します。

faceBounds

faceBounds: Rect

ゲージのフェイス要素の境界を取得します。

このプロパティは、ゲージ上にカスタムのSVG要素を配置するために使用されます。

format

format: string

ゲージ値をテキストとして表示するために使用される書式文字列を取得または設定します。

getText

getText: Function

ゲージ値の表示に使用されるカスタマイズされた文字列を返す コールバックを取得または設定します。

このプロパティは、ゲージに表示される文字列をカスタマイズしたいが、 format プロパティでは十分でない場合に使用してください。

指定する場合、コールバック関数は、ゲージ、部分名、値、および 書式設定された値をパラメータとして取る必要があります。また、ゲージに表示される文字列を返す必要があります。

次に例を示します。

// 値を文字列に変換するコールバック
gauge.getText = function (gauge, part, value, text) {
  switch (part) {
    case 'value':
      if (value <= 10) return 'Empty!';
      if (value <= 25) return 'Low...';
      if (value <= 95) return 'Good';
      return 'Full';
    case 'min':
      return 'EMPTY';
    case 'max':
      return 'FULL';
  }
  return text;
}

good

good: number

指標が良好と見なされる基準値を取得または設定します。

hasShadow

hasShadow: boolean

ゲージに影の効果を表示するかどうかを示す値を取得または 設定します。

このプロパティのデフォルト値はtrueです。

isAnimated

isAnimated: boolean

Gauge が値の変更を示すためにアニメーションを使用するか どうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

isReadOnly

isReadOnly: boolean

ユーザーがマウスとキーボードを使用して値を編集できるかどうかを示す値を 取得または設定します。

このプロパティのデフォルト値はtrueです。

max

max: number

ゲージに表示できる最大値を取得または設定します。

min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用」トピックを参照してください。

min

min: number

ゲージに表示できる最小値を取得または設定します。

min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用」トピックを参照してください。

origin

origin: number

範囲を描画するための始点を取得または設定します。

デフォルトでは、このプロパティはnullに設定されており、値の範囲はゲージの最小値から始まります。最小値がゼロ未満の場合はゼロから始まります。

pointer

pointer: Range

ゲージの現在の値を表すために使用される Range を取得または設定します。

ranges

このゲージの範囲のコレクションを取得します。

showRanges

showRanges: boolean

ranges プロパティに含まれる範囲をゲージに表示するかどうか を示す値を取得または設定します。

このプロパティがfalseに設定されている場合、ranges プロパティに含まれる範囲はゲージに表示されません。 代わりに、これらは、値の変化のアニメーション中に、pointer 範囲の色を補間するために使用されます。 このプロパティのデフォルト値は true です。

showText

showText: ShowText

ゲージにテキストとして表示する ShowText の値を取得または設定します。

このプロパティのデフォルト値については、RadialGaugeコントロールの場合は ShowText.All 、とLinearGauge コントロールの場合は ShowText.None です。

showTicks

showTicks: boolean

ゲージで、各 step 値に目盛りマークを表示するかどうかを決定するプロパティを 取得または設定します。

目盛りマークは、CSSでwj-gaugeクラス名とwj-ticksクラス名を 使用して書式設定できます。次に例を示します。

.wj-gauge .wj-ticks {
    stroke-width: 2px;
    stroke: white;
}

このプロパティのデフォルト値は false です。

stackRanges

stackRanges: boolean

ranges コレクションに含まれる範囲をゲージ内に積み重ねる かどうかを決定する値を取得または設定します。

stackRanges のデフォルト値はfalseであり、ranges コレクションの範囲はゲージのフェイスと同じ太さで表示されます。

stackRanges をtrueに設定すると、範囲が狭くなり、 並んで表示されます。

step

step: number

ユーザーが方向キーを押すかマウスホイールを回したときに value プロパティを増減する量を取得または設定します。

target

target: number

指標の目標値を取得または設定します。

thickness

thickness: number

ゲージの太さを0~1のスケールで取得または設定します。

thicknessを1に設定すると、ゲージは最大限に太くなります。

値が小さいほどゲージは細くなります。

thumbSize

thumbSize: number

ゲージの現在の値を示す要素のサイズ(ピクセル単位)を取得または設定します。

tickSpacing

tickSpacing: number

目盛りマークの間隔を取得または設定します。

目盛りマークの間隔を取得または設定します。

ゲージ上に目盛りを表示するようにするには、showTicks プロパティをtrueに設定します。 デフォルトでは、目盛りマークの間隔はstep プロパティによって定義されます。

tickSpacing プロパティを使用してデフォルトをオーバーライドし、 step プロパティの値と異なるスペーシングを設定できます。 デフォルトの動作に戻すには、tickSpacing プロパティをnullに 設定します。

value

value: number

ゲージに表示される値を取得または設定します。

静的 controlTemplate

controlTemplate: string

Gauge コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

メソッド

hitTest

  • hitTest(pt: any, y?: number): number
  • 指定したポイントにあるゲージの値に対応する数値を取得します。

    例:

    // ユーザーがゲージをクリックしたときにそのポイントのヒットテストを行います。
    gauge.hostElement.addEventListener('click', function (e) {
      var ht = gauge.hitTest(e.pageX, e.pageY);
      if (ht != null) {
        console.log('you clicked the gauge at value ' + ht.toString());
      }
    });
    

    引数

    • pt: any

      調べるポイント(ウィンドウ座標単位)、MouseEventオブジェクト、またはポイントのX座標。

    • オプション y: number

      ポイントのY座標(最初のパラメーターが数値の場合)。

    戻り値 number

    Value of the gauge at the point, or null if the point is not on the gauge's face.

onValueChanged

refresh

  • refresh(fullUpdate?: boolean): void
  • コントロールを更新します。

    引数

    • オプション fullUpdate: boolean

      内容だけでなくコントロールのレイアウトも更新するかどうかを示します。

    戻り値 void

イベント

valueChanged

valueChanged: Event

value プロパティの値が変更されたときに発生します。