[]
        
(Showing Draft Content)

Wijmo_React_Gauge

wijmo.react.gauge モジュール

wijmo.gauge</bモジュールに対応するReact コンポーネント。

変数

Const BulletGraph

BulletGraph: React.ForwardRefExoticComponent<BulletGraphProps>

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' }
  ]} />

このコードは、minmaxstepおよびisReadOnly プロパティは、gaugeの範囲を定義して、ユーザーがその値を編集できるようにします。 次に、value と、valueChangedプロパティを設定して、ゲージの値の双方向バインディングを作成します。

また、formatthumbSizeshowRanges プロパティを設定して、gaugeの外観を定義します。最後に、マークアップはfacepointer 範囲の太さを設定し、ゲージの現在の値に応じてvalue範囲の色を設定する追加の範囲を設定します。

Const LinearGauge

LinearGauge: React.ForwardRefExoticComponent<LinearGaugeProps>

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, maxstepおよびisReadOnly プロパティは、gaugeの範囲を定義して、ユーザーがその値を編集できるようにします。 次に、value と、valueChangedプロパティを設定して、ゲージの値の双方向バインディングを作成します。

また、formatthumbSizeshowRanges プロパティを設定して、gaugeの外観を定義します。最後に、マークアップはfacepointer 範囲の太さを設定し、ゲージの現在の値に応じてvalue範囲の色を設定する追加の範囲を設定します。

Const RadialGauge

RadialGauge: React.ForwardRefExoticComponent<RadialGaugeProps>

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の外観を定義します。最後に、マークアップはfacepointer 範囲の太さを設定し、ゲージの現在の値に応じてvalue範囲の色を設定する追加の範囲を設定します。

Const Range

Range: React.ForwardRefExoticComponent<RangeProps>

wijmo.gauge.Range クラスに対応するReactコンポーネント。

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

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

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