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

本コンポーネントでは、純粋なJavaScript wijmo.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プロパティを使用して、ゲージの範囲を定義し、その値を編集できるようにします。 次に、valueプロパティとvalueChangedプロパティを設定して、ゲージの値の両方向のバインドを作成します。

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