[]
【重要】2024年1月公開のアップデート「未適用」のお客様へ デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Wijmo_Gauge.Radialgauge

RadialGauge クラス

RadialGauge は、1つの値を表すインジケータと、参照値を表す範囲 （オプション）を使用して、円形目盛りを表示します。

ゲージのRadialGauge.isReadOnly プロパティを falseに設定すると、 ユーザーがゲージをクリックして値を編集できるようになります。

デモ

階層

コンストラクタ

プロパティ

メソッド

イベント

コンストラクタ

constructor

  • new RadialGauge(element: any, options?: any): RadialGauge

  • RadialGauge クラスの新しいインスタンスを初期化します。

    引数

    • element: any

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

    • オプション options: any

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

    戻り値 RadialGauge

プロパティ

autoScale

autoScale: boolean

ゲージがホスト要素に収まるように自動的に拡大縮小されるかどうか を示す値を取得または設定します

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

face

face: Range

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

faceBounds

faceBounds: Rect

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

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

format

format: string

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

getText

getText: IGetGaugeText

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

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

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

次に例を示します。

// 値を文字列に変換するコールバック
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;
}

handleWheel

handleWheel: boolean

ユーザーがマウスホイールでゲージの値を編集できるかどうかを決定する値を取得または設定します。

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

hasShadow

hasShadow: boolean

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

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

hostElement

hostElement: HTMLElement

コントロールをホストしているDOM要素を取得します。

isAnimated

isAnimated: boolean

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

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

isDisabled

isDisabled: boolean

コントロールが無効かどうかを判定する値を取得または設定します。

無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。

isReadOnly

isReadOnly: boolean

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

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

isTouching

isTouching: boolean

現在、コントロールがタッチイベントを処理しているかどうかを示す値を取得します。

isUpdating

isUpdating: boolean

コントロールが現在更新中かどうかを示す値を取得します。

max

max: number

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

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

min

min: number

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

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

needleElement

needleElement: SVGElement

ゲージの針として使用するSVGElementを取得または設定します。

指定されている場合、針要素はＸ方向に０から１００単位まで移動し、 Y軸に対して対称移動します。 このプロパティが設定されている場合、針要素がゲージDOMの一部になり、元のコンテナから削除されます。 1つの要素を複数のゲージで使用する場合には、cloneメソッドを利用して針要素のコピーを作成します。

needleLength

needleLength: NeedleLength

ポインター範囲に対するゲージの needleElement の長さを決定する値を取得または設定します。

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

needleShape

needleShape: NeedleShape

ゲージの針要素の形状を決定する値を取得または設定します。

このプロパティを使用して、定義済みの針形状を選択できます。 定義済みの形状は createNeedleElement メソッドを使用して作成されます。

また、 createNeedleElement メソッドを使用して作成したカスタム要素、または任意のメソッドを使用して作成したカスタムSVGグループ要素にneedleElementプロパティを設定することで、カスタム針要素を作成することができます。

CSSを使用して針のスタイルを設定することができます。 以下に例を示します。

.wj-gauge .wj-needle {
    fill: orangered;
    stroke: orangered;
}
.wj-gauge .wj-needle .wj-inner-needle-cap {
    fill: white;
}

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

origin

origin: number

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

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

pointer

pointer: Range

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

ranges

ranges: ObservableArray

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

rightToLeft

rightToLeft: boolean

要素内のコントロールを右から左のレイアウトでホストするかどうかを示す値を取得します。

showRanges

showRanges: boolean

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

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

showText

showText: ShowText

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

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

showTickText

showTickText: boolean

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

目盛りのテキストをスタイルする場合はCSSを使用ことができます。

.wj-gauge .wj-tick-text text {
    opacity: 1;
    font-family: Courier;
    font-size: 8pt;
    fill: purple;
}

showTicks および tickSpacing プロパティも参照してください。

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

showTicks

showTicks: boolean

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

目盛りは、CSSでwj-gaugeおよびwj-ticksクラス名を使用して書式設定できます。以下に例を示します。

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

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

stackRanges

stackRanges: boolean

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

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

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

startAngle

startAngle: number

ゲージの開始角度を取得または設定します。

ゲージの掃引角度（度単位）を取得または設定します。 角度は9時の位置から時計回りに度単位で測定されます。

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

step

step: number

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

sweepAngle

sweepAngle: number

ゲージの掃引角度を取得または設定します。

ゲージの掃引角度（度単位）を取得または設定します。 角度は9時の位置から時計回りに度単位で測定されます。

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

tabOrder

tabOrder: number

コントロールに関連付けられたtabindex属性の値を取得または設定します。

tabindex属性値は、コントロールのホストHTML要素で指定することで、 Wijmoコントロールに対して静的に定義できます。 ただし、Wijmoコントロールは複雑な構造であり、コントロールが正しく機能できるように、属性値を内部要素に伝達する必要があるため、 この値をアプリケーションのライフサイクルの後半で変更することはできません。

そのため、コントロールのtabindexを動的に読み取ったり変更したりするには、このプロパティを使用して行う必要があります。

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 コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

メソッド

addEventListener

  • addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void

  • このControl が所有する要素にイベントリスナーを追加します。

    コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、 コントロール が破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener ) メソッドを参照してください）。

    イベントリスナーを削除しないと、メモリリークが発生する可能があります。

    デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。 タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。

    passive　イベントリスナーの詳細については、「Improving scrolling performance with passive listeners」を参考してください。

    引数

    • target: EventTarget

      イベントのターゲット要素。

    • type: string

      イベントを指定する文字列。

    • fn: any

      イベントが発生したときに実行する関数。

    • オプション capture: boolean

      リスナーがターゲット要素によって処理される前にコントロールによって処理される必要があるかどうかを示します。

    • オプション passive: boolean

      ハンドラーが preventDefault() を呼び出さないことを示します。

    戻り値 void

applyTemplate

  • applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement

  • コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。

    このメソッドは、テンプレート化されたコントロールのコンストラクターによって呼び出される必要があるため、 このメソッドを使用することができません。 また、テンプレートのパーツを対応するコントロールのメンバに連結します。

    以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。

    this.applyTemplate('wj-control wj-inputnumber', templateString, {
  _tbx: 'input',
  _btnUp: 'btn-inc',
  _btnDn: 'btn-dec'
}, 'input');

    @param classNames コントロールのホスト要素に追加するクラスの名前。 @param template コントロールのテンプレートを定義するHTML文字列。 @param parts パーツ変数とその名前のディクショナリー。 @param namePart ホスト要素にちなんで名付けられたパーツの名前。 これにより、コントロールがフォームで使用されたときにデータをどのように送信するかが決まります。

    引数

    • classNames: string
    • template: string
    • parts: Object
    • オプション namePart: string

    戻り値 HTMLElement

beginUpdate

  • beginUpdate(): void

containsFocus

  • containsFocus(): boolean

  • このコントロールにフォーカスのある要素が含まれているかどうかをチェックします。

    戻り値 boolean

deferUpdate

  • deferUpdate(fn: Function): void

  • beginUpdate/endUpdate ブロック内で関数を実行します。

    この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でも endUpdate が呼び出されるようにします。

    引数

    • fn: Function

      実行する関数。

    戻り値 void

dispose

  • dispose(): void

  • ホスト要素との関連付けを解除することによってコントロールを破棄します。

    dispose メソッドは、addEventListener メソッドによって 追加されたイベントリスナーを自動的に削除します。

    コントロールを動的に作成および削除するアプリケーションでは、 dispose メソッドを呼び出すことが重要です。 コントロールを破棄しないと、 メモリリークが発生する可能があります。

    戻り値 void

endUpdate

  • endUpdate(): void

focus

  • focus(): void

  • このコントロールにフォーカスを設定します。

    戻り値 void

getTemplate

  • getTemplate(): string

  • コントロールのインスタンスの作成に使用されたHTMLテンプレートを取得します。

    このメソッドは、クラス階層をさかのぼってコントロールのテンプレートを指定する最も近い祖先を探します。 たとえば、ComboBox コントロールのプロトタイプを指定した場合、 そのプロトタイプによってDropDown 基本クラスで定義されたテンプレートがオーバーライドされます。

    戻り値 string

hasOwnProperty

  • hasOwnProperty(v: PropertyKey): boolean

  • オブジェクトが指定されたプロパティを持つかどうかを判定します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

hitTest

  • hitTest(pt: any, y?: number): number

  • 指定したポイントにあるゲージの値に対応する数値を取得します。

    例: 

    // ユーザーがゲージをクリックしたときにそのポイントのヒットテストを行います。
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());
    }
});

    引数

    • pt: any

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

    • オプション y: number

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

    戻り値 number

    ポイントでのゲージの値、またはポイントがゲージの面上にない場合はnull。

initialize

  • initialize(options: any): void

  • 指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。

    このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。

    例: 

    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;
// など

    初期化データは適用時に型チェックされます。 初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外を発生します。

    引数

    • options: any

      初期化データを含むオブジェクト。

    戻り値 void

invalidate

  • invalidate(fullUpdate?: boolean): void

  • 非同期更新を発生させるため、コントロールを無効にします。

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

isPrototypeOf

  • isPrototypeOf(v: Object): boolean

  • オブジェクトが別のオブジェクトのプロトタイプチェーンに存在するかどうかを判定します。

    引数

    • v: Object

      プロトタイプチェーンが判定される別のオブジェクト。

    戻り値 boolean

onGotFocus

onInvalidInput

  • invalidInput イベントを発生させます。

    イベントハンドラーがイベントをキャンセルした場合、コントロールは無効な入力内容とフォーカスを保持します。

    引数

    戻り値 boolean

onLostFocus

onRefreshed

onRefreshing

onValueChanged

propertyIsEnumerable

  • propertyIsEnumerable(v: PropertyKey): boolean

  • 指定されたプロパティが列挙可能かどうかを判断します。

    引数

    • v: PropertyKey

      プロパティの名前。

    戻り値 boolean

refresh

  • refresh(fullUpdate?: boolean): void

  • コントロールを更新します。

    引数

    • オプション fullUpdate: boolean

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

    戻り値 void

removeEventListener

  • removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number

  • このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。

    引数

    • オプション target: EventTarget

      イベントのターゲット要素。 nullの場合、すべてのターゲットにアタッチされているリスナーが解除されます

    • オプション type: string

      イベントを指定する文字列。 nullの場合、すべてのイベントにアタッチされているリスナーが解除されます。

    • オプション fn: any

      削除するハンドラ。 nullの場合は、すべてのハンドラが削除されます。

    • オプション capture: boolean

      リスナーがキャプチャリスナーかどうか。 nullの場合、キャプチャリスナーと非キャプチャリスナーの両方が解除されます。

    戻り値 number

    削除されたリスナーの数。

toLocaleString

  • toLocaleString(): string

  • 現在のロケールを使用して文字列に変換された日付を返します。

    戻り値 string

toString

  • toString(): string

  • オブジェクトの文字列表現を返します。

    戻り値 string

valueOf

  • valueOf(): Object

  • 指定されたオブジェクトのプリミティブ値を返します。

    戻り値 Object

静的 createNeedleElement

  • createNeedleElement(points: any[], capRadius?: number, innerCapRadius?: number): Element

  • ゲージの針として使用するSVGElementを作成します。

    引数

    • points: any[]

      針の形状を定義する 「x」と 「y」の値を持つオブジェクトの配列。 「x」値は0（ゲージの中心）から100（ゲージの半径）までの範囲に指定する必要があります。 「y」値は針の幅を定義し、範囲が0から20までです。 各 「y」値は2回使用されます。これを左から右に使用すると、 針の軸より上の針の範囲を定義します。 符号を逆にして右から左に使用すると、軸の下の針の範囲を定義します。

    • オプション capRadius: number

      原点を中心とした円であるcap要素の半径を定義するオプションの値。

    • オプション innerCapRadius: number

      cap要素の上に描かれた円の半径を定義するオプションの値。

      createNeedleElementメソッドは、 needleElementプロパティで使用できるカスタムの針形状を作成する簡単な方法を提供します。

      たとえば、次のコードでは、 NeedleShape 列挙で定義される一般的な針形状を作成するために、 RadialGauge によって createNeedleElement メソッドが内部的に使用される方法を示しています。

      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;
}

    戻り値 Element

静的 disposeAll

  • disposeAll(e?: HTMLElement): void

  • HTML要素に含まれるすべてのWijmoコントロールを破棄します。

    引数

    • オプション e: HTMLElement

      コンテナー要素。

    戻り値 void

静的 getControl

  • getControl(element: any): Control

  • 指定したDOM要素でホストされているコントロールを取得します。

    引数

    • element: any

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

    戻り値 Control

静的 invalidateAll

  • invalidateAll(e?: HTMLElement): void

  • 指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。

    このメソッドは、コントロールの表示状態やサイズを変更する 動的なパネルをアプリケーションで使用している場合に使用します。 たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、 その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、 それらのコントロールが適切に機能しなくなる可能性があります。 これが起こる場合は、動的コンテナーで適切なイベントを処理し、 Control.invalidateAll メソッドを呼び出してコンテナー内のWijmoコントロールの レイアウト情報が適切に更新されるようにする必要があります。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

静的 refreshAll

  • refreshAll(e?: HTMLElement): void

  • HTML要素で存在するすべてのWijmoコントロールを更新します。

    コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。

    引数

    • オプション e: HTMLElement

      コンテナー要素。nullに設定すると、ページ上に存在するすべてのWijmoコントロールが無効化されます。

    戻り値 void

イベント

gotFocus

gotFocus: Event<Control, EventArgs>

コントロールがフォーカスを取得したときに発生します。

invalidInput

invalidInput: Event<Control, CancelEventArgs>

無効な文字が入力されたときに発生します。

ユーザーが入力した値が適切な種類に変換できない値、または有効な範囲外の値を貼り付ける場合、 無効な入力エラーが発生する場合があります。

イベントハンドラーがイベントをキャンセルする場合、 ユーザーがエラーを修正できるように、 コントロールは無効なコンテンツとフォーカスを保持します。

イベントがキャンセルされない場合、コントロールは無効な入力エラーを無視し、 元のコンテンツを保持します。

lostFocus

lostFocus: Event<Control, EventArgs>

コントロールがフォーカスを失ったときに発生します。

refreshed

refreshed: Event<Control, EventArgs>

コントロールが内容を更新した後で発生します。

refreshing

refreshing: Event<Control, EventArgs>

コントロールが内容を更新する直前に発生します。

valueChanged

valueChanged: Event<Gauge, EventArgs>

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