constructor(element: any, options?: any): RadialGauge
RadialGaugeクラスの新しいインスタンスを初期化します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
The JavaScript object containing initialization data for the control.
ゲージ値の表示に使用されるカスタマイズされた文字列を返すコールバックを取得または設定します。
このプロパティは、ゲージに表示される文字列をカスタマイズしたいが、 format プロパティでは十分でない場合に使用してください。
指定する場合、コールバック関数は、ゲージ、部分名、値、および書式設定された値をパラメータとして取る必要があります。また、ゲージに表示される文字列を返す必要があります。
例:
```typescript //値を文字列に変換するコールバック gauge.getText = (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プロパティの使用」トピックを参照してください。
ゲージの針として使用するSVGElementを取得または設定します。
指定されている場合、針要素はＸ方向に０から１００単位まで移動し、 Y軸に対して対称移動します。
このプロパティが設定されている場合、針要素がゲージDOMの一部になり、元のコンテナから削除されます。 1つの要素を複数のゲージで使用する場合には、cloneメソッドを利用して針要素のコピーを作成します。
Gets or sets a value that determines the length of the gauge's needleElement with respect to the pointer range.
このプロパティのデフォルト値は **NeedleLength.Middle**。
ゲージの針要素の形状を決定する値を取得または設定します。
このプロパティを使用して、定義済みの針形状を選択できます。 定義済みの形状は createNeedleElement メソッドを使用して作成されます。
また、 needleElement メソッドを使用して作成したカスタム要素、または任意のメソッドを使用して作成したカスタムSVGグループ要素にneedleElementプロパティを設定することで、カスタム針要素を作成することができます。
CSSを使用して針のスタイルを設定することができます。 以下に例を示します。
```css .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } ```
このプロパティのデフォルト値は **NeedleShape.None**。
範囲を描画するための始点を取得または設定します。
デフォルトでは、このプロパティはnullに設定されており、値の範囲はゲージの最小値から始まります。最小値がゼロ未満の場合はゼロから始まります。
ゲージにテキストとして表示する ShowText の値を取得または設定します。
このプロパティのデフォルト値については、RadialGaugeコントロールの場合は **ShowText.All** 、と LinearGaugeコントロールの場合は **ShowText.None** です。
ゲージで、各 step （またはtickSpacing）値に目盛りマークを表示するかどうかを決定するプロパティを 取得または設定します。
目盛りマークは、CSSで**wj-gauge**クラス名と**wj-ticks**クラス名を使用して書式設定できます。
```css .wj-gauge .wj-ticks { stroke-width: 2px; stroke: white; } ```
このプロパティのデフォルト値は **false**です。
ゲージで、各目盛りのテキスト値を表示するかどうかを決定するプロパティを取得または設定します。
目盛りのテキストをスタイルする場合はCSSを使用ことができます。
```css .wj-gauge .wj-tick-text text { opacity: 1; font-family: Courier; font-size: 8pt; fill: purple; } ```
showTicks および tickSpacing プロパティも参照してください。
このプロパティのデフォルト値は **false**です。
ranges コレクションに含まれる範囲をゲージ内に積み重ねる かどうかを決定する値を取得または設定します。
stackRanges のデフォルト値はfalseであり、ranges コレクションの範囲はゲージのフェイスと同じ太さで表示されます。
stackRanges をtrueに設定すると、範囲が狭くなり、並んで表示されます。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
ゲージの太さを0~1のスケールで取得または設定します。
thicknessを1に設定すると、ゲージは最大限に太くなります。 値が小さいほどゲージは細くなります。
目盛りマークの間隔を取得または設定します。
ゲージ上に目盛りを表示するようにするには、showTicks プロパティをtrueに設定します。 デフォルトでは、目盛りマークの間隔はstep プロパティによって定義されます。
tickSpacing プロパティを使用してデフォルトをオーバーライドし、 step プロパティの値と異なるスペーシングを設定できます。 デフォルトの動作に戻すには、tickSpacing プロパティをnullに 設定します。
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener メソッドを参照してください）。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
createNeedleElement(points: any[], capRadius?: number, innerCapRadius?: number): void
ゲージの針として使用するSVGElementを作成します。
Array of objects with "x" and "y" values that define the needle shape. The "x" values should range from 0 (gauge center) to 100 (gauge radius). The "y" values define the needle width, and typically range from 0 to 20. Each "y" value is used twice: from left to right to define the extent of the needle above the needle axis, and from right to left, with sign reversed, to define the extent of the needle below the axis.
Optional value that defines the radius of the cap element, a circle centered at the origin.
Optional value that defines the radius of a circle painted above the cap element.
The createNeedleElement method provides an easy and concise way to create custom needle shapes for use with the needleElement property.
For example, the code below shows how the createNeedleElement method is used internally by the RadialGauge to build some of the common needle shapes defined by the NeedleShape enumeration:
```typescript let needle = null; switch (value) { case NeedleShape.Triangle: needle = RadialGauge.createNeedleElement([ { x: -10, y: 10 }, { x: 100, y: 0 } ]); break; case NeedleShape.Diamond: needle = RadialGauge.createNeedleElement([ { x: -20, y: 0 }, { x: 0, y: 10 }, { x: 100, y: 0 } ]); break; case NeedleShape.Drop: needle = RadialGauge.createNeedleElement([ { x: 0, y: 20 }, { x: 100, y: 0 } ], 20, 10); break; case NeedleShape.Outer: needle = RadialGauge.createNeedleElement([ { x: 60, y: 20 }, { x: 100, y: 0 } ]); break; } ```
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
dispose(): void
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getTemplate(): string
hitTest(pt: any, y?: number): number
指定したポイントにあるゲージの値に対応する数値を取得します。
For example:
```typescript // ユーザーがゲージをクリックしたときにそのポイントのヒットテストを行います。 gauge.hostElement.addEventListener('click', e => { var ht = gauge.hitTest(e.pageX, e.pageY); if (ht != null) { console.log('you clicked the gauge at value ' + ht.toString()); } }); ```
The point to investigate, in window coordinates, or a MouseEvent object, or the x coordinate of the point.
The Y coordinate of the point (if the first parameter is a number).
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript grid.initialize({ itemsSource: myList, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'Code', width: 130 }, { binding: 'name', header: 'Name', width: 60 } ] });
// 以下と同等です。 grid.itemsSource = myList; grid.autoGenerateColumns = false; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onValueChanged(e?: EventArgs): void
valueChangedイベントを発生させます。
refresh(fullUpdate?: boolean): void
コントロールを更新します。
Indicates whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
RadialGauge は、1つの値を表すインジケータと、参照値を表す範囲（オプション）を使用して、円形目盛りを表示します。
ゲージのisReadOnly プロパティを falseに設定すると、ユーザーがゲージをクリックして値を編集できるようになります。
{@sample Gauge/RadialGauge デモ}