[]
wijmo.gauge.BulletGraph コントロールをカプセル化するReactコンポーネント。
次の例は、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 の各プロパティを設定して、 ゲージの範囲を定義し、ユーザーがゲージの値を編集できるようにします。 次に、 value プロパティと valueChanged プロパティを設定して、ゲージの値に対して双方向連結を構築します。
次に、 format、 thumbSize、 showRanges の各プロパティを設定して、ゲージの外観を定義します。 最後に、このマークアップは、 face 範囲と pointer 範囲の太さを設定し、 ゲージの現在の値に応じて value 範囲の色を制御するために、いくつかの範囲を設定します。
wijmo.gauge.BulletGraph コントロールをカプセル化するReactコンポーネント。
次の例は、JSXで wijmo.gauge.BulletGraph コントロールをインスタンス化して初期化する方法を示します。
このコードは、 min, max、 step、isReadOnly の各プロパティを設定して、 ゲージの範囲を定義し、ユーザーがゲージの値を編集できるようにします。 次に、 value プロパティと valueChanged プロパティを設定して、ゲージの値に対して双方向連結を構築します。
次に、 format、 thumbSize、 showRanges の各プロパティを設定して、ゲージの外観を定義します。 最後に、このマークアップは、 face 範囲と pointer 範囲の太さを設定し、 ゲージの現在の値に応じて value 範囲の色を制御するために、いくつかの範囲を設定します。