wijmo.vue2.gauge モジュール

wj-bullet-graphコンポーネントには、子コンポーネントのwijmo.vue2.gauge.WjRange が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.gauge.BulletGraph コントロールのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、マークアップでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

wj-linear-gauge コンポーネントには、 wijmo.vue2.gauge.WjRange が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.gauge.LinearGauge クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

以下の例では、Vueマークアップでwijmo.gauge.LinearGaugeコントロールをインスタンス化して初期化する方法を示しています。

<wj-linear-gauge
    :min="0" :max="1000" :step="50" :is-read-only="false"
    format="c0" :thumb-size="20"
    :show-ranges="false"
    :value="sales"
    :value-changed="salesChanged">
    <wj-range wj-property="face" :thickness="0.5">
    </wj-range>
    <wj-range wj-property="pointer" :thickness="0.5">
    </wj-range>
    <wj-range :min="0" :max="333" color="red">
    </wj-range>
    <wj-range :min="333" :max="666" color="gold">
    </wj-range>
    <wj-range :min="666" :max="1000" color="green">
    </wj-range>
</wj-linear-gauge>

このコードは、min、max、step、およびisReadOnlyプロパティを使用して、ゲージの範囲を定義し、その値を編集できるようにします。 次に、ゲージのvalueプロパティをコントローラーのsales変数に連結します。

また、format、thumbSize、およびshowRangesプロパティを設定して、 ゲージの外観を定義します。 最後に、マークアップは、faceおよびpointer範囲の太さ、 およびゲージの現在の値に応じてvalue範囲の色を制御する追加の範囲を設定します。

wj-radial-gauge コンポーネントには、 wijmo.vue2.gauge.WjRange が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.gauge.RadialGauge クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

以下の例では、Vueマークアップでwijmo.gauge.RadialGaugeコントロールをインスタンス化して初期化する方法を示しています。

<wj-radial-gauge
    :min="0" :max="1000" :step="50" :is-read-only="false"
    format="c0" :thumb-size="12" :show-text="Value"
    :show-ranges="false"
    :value="sales"
    :value-changed="salesChanged">
    <wj-range wj-property="face" :thickness="0.5">
    </wj-range>
    <wj-range wj-property="pointer" :thickness="0.5">
    </wj-range>
    <wj-range :min="0" :max="333" color="red">
    </wj-range>
    <wj-range :min="333" :max="666" color="gold">
    </wj-range>
    <wj-range :min="666" :max="1000" color="green">
    </wj-range>
</wj-radial-gauge>

このコードは、min、max、step、およびisReadOnlyプロパティを使用して、ゲージの範囲を定義し、その値を編集できるようにします。 次に、ゲージのvalueプロパティをコントローラーのsales変数に連結します。

また、format、thumbSize、およびshowRangesプロパティを設定して、 ゲージの外観を定義します。 最後に、マークアップは、faceおよびpointer範囲の太さ、 およびゲージの現在の値に応じてvalue範囲の色を制御する追加の範囲を設定します。

wj-range コンポーネントは、

wijmo.vue2.gauge.WjLinearGauge 、 wijmo.vue2.gauge.WjBulletGraph または wijmo.vue2.gauge.WjRadialGauge コンポーネントのいずれかに含まれている必要があります。

本コンポーネントでは、純粋なJavaScript wijmo.gauge.Range コントロールのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、マークアップでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。