[]
LinearGauge クラスの新しいインスタンスを初期化します。
コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。
コントロールの初期化データを含むJavaScriptオブジェクト。
ゲージの値が増加する方向を取得または設定します。
このプロパティのデフォルト値はGaugeDirection.Rightです。
ゲージの全体的な形状と外観を表すために使用される Range を取得または設定します。
ゲージのフェイス要素の境界を取得します。
このプロパティは、ゲージ上にカスタムのSVG要素を配置するために使用されます。
ゲージ値をテキストとして表示するために使用される書式文字列を取得または設定します。
ゲージ値の表示に使用されるカスタマイズされた文字列を返す コールバックを取得または設定します。
このプロパティは、ゲージに表示される文字列をカスタマイズしたいが、 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; }
ゲージに影の効果を表示するかどうかを示す値を取得または 設定します。
このプロパティのデフォルト値はtrueです。
Gauge が値の変更を示すためにアニメーションを使用するか どうかを決定する値を取得または設定します。
このプロパティのデフォルト値はtrueです。
ユーザーがマウスとキーボードを使用して値を編集できるかどうかを示す値を 取得または設定します。
このプロパティのデフォルト値はtrueです。
ゲージに表示できる最大値を取得または設定します。
min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用」トピックを参照してください。
ゲージに表示できる最小値を取得または設定します。
min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用」トピックを参照してください。
範囲を描画するための始点を取得または設定します。
デフォルトでは、このプロパティはnullに設定されており、値の範囲はゲージの最小値から始まります。最小値がゼロ未満の場合はゼロから始まります。
ゲージの現在の値を表すために使用される Range を取得または設定します。
このゲージの範囲のコレクションを取得します。
ゲージにテキストとして表示する ShowText の値を取得または設定します。
このプロパティのデフォルト値については、RadialGaugeコントロールの場合は ShowText.All 、とLinearGauge コントロールの場合は ShowText.None です。
ゲージで、各 step 値に目盛りマークを表示するかどうかを決定するプロパティを 取得または設定します。
目盛りマークは、CSSでwj-gaugeクラス名とwj-ticksクラス名を 使用して書式設定できます。次に例を示します。
.wj-gauge .wj-ticks { stroke-width: 2px; stroke: white; }
このプロパティのデフォルト値は false です。
ranges コレクションに含まれる範囲をゲージ内に積み重ねる かどうかを決定する値を取得または設定します。
stackRanges のデフォルト値はfalseであり、ranges コレクションの範囲はゲージのフェイスと同じ太さで表示されます。
stackRanges をtrueに設定すると、範囲が狭くなり、 並んで表示されます。
ユーザーが方向キーを押すかマウスホイールを回したときに value プロパティを増減する量を取得または設定します。
ゲージの太さを0~1のスケールで取得または設定します。
thicknessを1に設定すると、ゲージは最大限に太くなります。
値が小さいほどゲージは細くなります。
ゲージの現在の値を示す要素のサイズ(ピクセル単位)を取得または設定します。
目盛りマークの間隔を取得または設定します。
目盛りマークの間隔を取得または設定します。
ゲージ上に目盛りを表示するようにするには、showTicks プロパティをtrueに設定します。 デフォルトでは、目盛りマークの間隔はstep プロパティによって定義されます。
tickSpacing プロパティを使用してデフォルトをオーバーライドし、 step プロパティの値と異なるスペーシングを設定できます。 デフォルトの動作に戻すには、tickSpacing プロパティをnullに 設定します。
ゲージに表示される値を取得または設定します。
Gauge コントロールのインスタンス化に使用されるテンプレートを取得または設定します。
指定したポイントにあるゲージの値に対応する数値を取得します。
例:
// ユーザーがゲージをクリックしたときにそのポイントのヒットテストを行います。 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()); } });
調べるポイント(ウィンドウ座標単位)、MouseEventオブジェクト、またはポイントのX座標。
ポイントのY座標(最初のパラメーターが数値の場合)。
Value of the gauge at the point, or null if the point is not on the gauge's face.
valueChanged イベントを発生させます。
コントロールを更新します。
内容だけでなくコントロールのレイアウトも更新するかどうかを示します。
value プロパティの値が変更されたときに発生します。
LinearGauge は、1つの値を表すインジケータと、参照値を表す範囲 (オプション)を使用して、線形目盛りを表示します。
ゲージのLinearGauge.isReadOnly プロパティを falseに設定すると、 ユーザーがゲージをクリックして値を編集できるようになります。
Example