bullet-graphコンポーネントには、 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 プロパティを設定して、ゲージの外観を定義します。最後に、マークアップはface< と << 範囲の太さを設定し、ゲージの現在の値に応じて<範囲の色を設定する追加の範囲を設定します。

linear-gauge コンポーネントには、 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範囲の色を設定する追加の範囲を設定します。

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範囲の色を設定する追加の範囲を設定します。

rangeコンポーネントは、 wijmo.react.gauge.LinearGauge , wijmo.react.gauge.BulletGraph および wijmo.react.gauge.RadialGauge. コンポーネントのいずれかに含まれている必要があります。

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

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