[]
wijmo.gauge.BulletGraph コントロールに対応するReactコンポーネント。
bullet-graphコンポーネントには、 @link wijmo.react.gauge.Range} 子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScripwijmo.gauge.BulletGraph クラスのすべてのプロパティとイベントがサポートされます。
これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。 以下の例は、JSX でwijmo.gauge.BulletGraph コントロールをインスタンス化して初期化する方法を示しています。
<Wj.BulletGraph min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false } value={ this.state.view.currentItem.sales } valueChanged={ this.salesChanged } format="c0" thumbSize={ 20 } showRanges={ false } face={{ thickness:0.5 }} pointer={{ thickness:0.5 }} ranges={[ { min: 0, max: 333, color: 'red' }, { min: 333, max: 666, color: 'gold' }, { min: 666, max: 1000, color: 'green' } ]} />
このコードは、min、 max、 stepおよびisReadOnly プロパティは、gaugeの範囲を定義して、ユーザーがその値を編集できるようにします。 次に、value と、valueChangedプロパティを設定して、ゲージの値の双方向バインディングを作成します。
また、format、 thumbSizeとshowRanges プロパティを設定して、gaugeの外観を定義します。最後に、マークアップはface と pointer 範囲の太さを設定し、ゲージの現在の値に応じてvalue範囲の色を設定する追加の範囲を設定します。
wijmo.gauge.LinearGauge コントロールに対応するReactコンポーネント。
linear-gauge コンポーネントには、 @link wijmo.react.gauge.Range} 子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScriptwijmo.gauge.LinearGauge クラスのすべてのプロパティとイベントがサポートされます。
これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。 以下の例は、JSX で wijmo.gauge.LinearGauge コントロールをインスタンス化して初期化する方法を示しています。
<Wj.LinearGauge min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false } value={ this.state.view.currentItem.sales } valueChanged={ this.salesChanged } format="c0" thumbSize={ 20 } showRanges={ false } face={{ thickness:0.5 }} pointer={{ thickness:0.5 }} ranges={[ { min: 0, max: 333, color: 'red' }, { min: 333, max: 666, color: 'gold' }, { min: 666, max: 1000, color: 'green' } ]} />
このコードは、min, max、 stepおよびisReadOnly プロパティは、gaugeの範囲を定義して、ユーザーがその値を編集できるようにします。 次に、value と、valueChangedプロパティを設定して、ゲージの値の双方向バインディングを作成します。
また、format、 thumbSizeとshowRanges プロパティを設定して、gaugeの外観を定義します。最後に、マークアップはfaceとpointer 範囲の太さを設定し、ゲージの現在の値に応じてvalue範囲の色を設定する追加の範囲を設定します。
wijmo.gauge.RadialGauge コントロールに対応するReactコンポーネント。
radial-gaugeコンポーネントには、 wijmo.react.gauge.Range 子コンポーネントが含まれる場合があります。 本コンポーネントでは、純粋なJavaScripwijmo.gauge.RadialGauge クラスのすべてのプロパティとイベントがサポートされます。
これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。 以下の例は、JSX でwijmo.gauge.RadialGaugeコントロールをインスタンス化して初期化する方法を示しています。
<Wj.RadialGauge min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false } value={ this.state.view.currentItem.sales } valueChanged={ this.salesChanged } format="c0" thumbSize={ 20 } showRanges={ false } face={{ thickness:0.5 }} pointer={{ thickness:0.5 }} ranges={[ { min: 0, max: 333, color: 'red' }, { min: 333, max: 666, color: 'gold' }, { min: 666, max: 1000, color: 'green' } ]} />
このコードは、min, max, step,およびisReadOnly プロパティは、gaugeの範囲を定義して、ユーザーがその値を編集できるようにします。 次に、value と、valueChangedプロパティを設定して、ゲージの値の双方向バインディングを作成します。
また、format, thumbSize,とshowRanges プロパティを設定して、gaugeの外観を定義します。最後に、マークアップはface と pointer 範囲の太さを設定し、ゲージの現在の値に応じてvalue範囲の色を設定する追加の範囲を設定します。
wijmo.gauge.Range クラスに対応するReactコンポーネント。
rangeコンポーネントは、 wijmo.react.gauge.LinearGauge , wijmo.react.gauge.BulletGraph および wijmo.react.gauge.RadialGauge. コンポーネントのいずれかに含まれている必要があります。
本コンポーネントでは、純粋なJavaScriptwijmo.gauge.Range コントロールのすべてのプロパティとイベントがサポートされます。
これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。
wijmo.gauge</bモジュールに対応するReact コンポーネント。