React ラジアル ゲージの概要

    React Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。IgrRadialGauge には、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、transitionDuration プロパティの設定で簡単にカスタマイズできます。

    React ラジアル ゲージの例

    以下のサンプルは、同じ IgrRadialGauge でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。

    EXAMPLE
    TSX
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    依存関係

    gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。

    npm install --save igniteui-react-core
npm install --save igniteui-react-gauges
cmd
    Ignite UI for React | CTA Banner

    モジュールの要件

    IgrRadialGauge を作成するには、以下のモジュールが必要です。

    import { IgrRadialGaugeModule } from 'igniteui-react-gauges';

IgrRadialGaugeModule.register();
ts

    使用方法

    以下のコードは針およびスケールで 3 つの比較範囲を含むラジアル ゲージを作成する方法を紹介します。

     <IgrRadialGauge height="400px" width="400px"
    value={25}
    interval={5}
    minimumValue={0}
    maximumValue={100}>
    <IgrRadialGaugeRange startValue={0}
                         endValue={30}
                         brush="red"/>
    <IgrRadialGaugeRange startValue={30}
                         endValue={60}
                         brush="yellow"/>
    <IgrRadialGaugeRange startValue={60}
                         endValue={100}
                         brush="green"/>
</IgrRadialGauge>
tsx

    バッキング

    ゲージには、スケールの後ろ側に描かれた背景図形があり、図形はゲージの背景として動作します。

    バッキング要素はラジアル ゲージ コントロールの背景と境界線を表します。常に最初に描画される要素で針、ラベルやメモリなどの残りの要素はその上のオーバーレイです。

    バッキングは、円形またはフィットにできます。円形の場合は 360 度の円形のゲージが作成されますが、一方フィット図形の場合は scaleStartAngle および scaleEndAngle プロパティで円弧部分が塗りつぶされます。これには、backingShape プロパティを設定します。

    <IgrRadialGauge
    backingShape="Fitted"
    backingBrush="#fcfcfc"
    backingOutline="DodgerBlue"
    backingOversweep={5}
    backingCornerRadius={10}
    backingStrokeThickness={5}
    backingOuterExtent={0.8}
    backingInnerExtent={0.15}
    scaleStartAngle={135} scaleEndAngle={45}
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10} />
tsx

    EXAMPLE
    TSX
    Edit in:

    スケール

    スケールは視覚要素で、minimumValue と maximumValue 値を設定してゲージの値範囲全体をハイライト表示できます。バッキングとともにゲージの全体的な図形を定義します。scaleStartAngle と scaleEndAngle プロパティは、スケールの円弧の境界線を定義します。scaleSweepDirection プロパティが、スケールが時計回りまたは反時計回りのどちらの方向に動くかを指定します。scaleBrush、scaleStartExtent、scaleEndExtent プロパティを設定してスケールの外観をカスタマイズできます。

    <IgrRadialGauge
    scaleStartAngle={135}
    scaleEndAngle={45}
    scaleBrush="DodgerBlue"
    scaleSweepDirection="Clockwise"
    scaleOversweep={1}
    scaleOversweepShape="Fitted"
    scaleStartExtent={0.45}
    scaleEndExtent={0.575}
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10} />
tsx

    EXAMPLE
    TSX
    Edit in:

    ラベルとタイトル

    ゲージ ラベルは minimumValue と maximumValue の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージ バッキングの外側範囲を表す labelExtent プロパティで小数を使用してラベルの配置を設定できます。fontBrush や font など、さまざまなスタイル プロパティを設定してラベルをカスタマイズできます。

    これらの針のラベルにはそれぞれ、titleExtent、titleAngle、SubtitleFontSize、highlightLabelBrush など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。

    <IgrRadialGauge
    labelExtent={0.65}
    labelInterval={10}
    font="11px Verdana"
    fontBrush="DodgerBlue"
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10} />
tsx

    EXAMPLE
    TSX
    Edit in:

    タイトルとサブタイトル

    titleText プロパティと subtitleText プロパティが使用可能であり、どちらも針のカスタム テキストを表示するために使用できます。あるいは、titleDisplaysValue と subtitleDisplaysValue を true に設定すると、針の値が表示され、titleText と subtitleText がオーバーライドされます。したがって、タイトルにカスタム テキストを使用しながらサブタイトルで値を表示したり、その逆を行ったりすることができます。

    以下に説明するように針のハイライトが表示されている場合は、highlightLabelText を介してカスタム テキストを表示できます。それ以外の場合は、highlightLabelDisplaysValue を有効にしてその値を表示できます。

    <IgrRadialGauge
    titleText="Global Sales"
    subtitleText="2024"
/>
tsx

    オプティカル スケーリング

    ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず opticalScalingEnabled を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する opticalScalingSize を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。

    EXAMPLE
    TSX
    Edit in:

    目盛

    目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは minimumValue と maximumValue の間の interval に表示されます。また minorTickCount プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、tickStartExtent、tickEndExtent、minorTickStartExtent、minorTickEndExtent に少数値 (0 から 1 の間) を設定して制御できます。

    <IgrRadialGauge
    tickStartExtent={0.45}
    tickEndExtent={0.575}
    tickStrokeThickness={2}
    tickBrush="DodgerBlue"
    minorTickCount={4}
    minorTickEndExtent={0.5}
    minorTickStartExtent={0.575}
    minorTickStrokeThickness={1}
    minorTickBrush="DarkViolet"
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10}/>
tsx

    EXAMPLE
    TSX
    Edit in:

    範囲

    範囲に minimumValue や maximumValue プロパティで指定した連続値の境界をハイライト表示します。開始値と終了値を指定してゲージに複数の範囲を追加でき、各範囲には、brush や outline などのカスタマイズ プロパティがあります。または、rangeBrushes や rangeOutlines プロパティを範囲の色リストに設定することもできます。

    <IgrRadialGauge
    height="300px" width="300px"
    minimumValue={0} value={50}
    maximumValue={80} interval={10}
    rangeBrushes ="red, yellow, green"
    rangeOutlines="red, yellow, green">
   <IgrRadialGaugeRange
       startValue={1}  endValue={10} brush="yellow" />
   <IgrRadialGaugeRange
       startValue={10}  endValue={25} brush="green" />
   <IgrRadialGaugeRange
       startValue={25}  endValue={40} brush="red" />
    <IgrRadialGaugeRange
       startValue={40}  endValue={80} brush="yellow" />
</IgrRadialGauge>
tsx

    EXAMPLE
    TSX
    Edit in:

    針

    ゲージ針は、ゲージの設定値を示す視覚要素です。針は、あらかじめ定義されたいくつかの図形の中から選択でき、ピボット図形をゲージの中心に配置できます。またピボット図形は、事前に定義された図形の 1 つを使用します。オーバーレイとアンダーレイを含むピボット図形には、図形に適用する別のピボット ブラシがあります。

    サポートされている針の形とキャップは、needleShape と needlePivotShape プロパティで設定します。

    ゲージのインタラクティブ モードを有効 (isNeedleDraggingEnabled プロパティを使用) にするとユーザーは minimumValue と maximumValue の値間で針をドラッグして値を変更できるようになります。

    <IgrRadialGauge
    value={50}
    isNeedleDraggingEnabled={true}
    isNeedleDraggingConstrained={true}
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent={0.475}
    needleStrokeThickness={1}
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio={0.2}
    needlePivotStrokeThickness={1}
    height="300px" width="300px"
    minimumValue={0}
    maximumValue={80} interval={10} />
tsx

    EXAMPLE
    TSX
    Edit in:

    針のハイライト

    ラジアル ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の value の不透明度が低く表示されます。これを有効にするには、まず highlightValueDisplayMode を Overlay に設定し、次に highlightValue を適用します。

    <IgrRadialGauge                    
    highlightValueDisplayMode="Overlay"
    highlightValue="25"
    isHighlightNeedleDraggingEnabled="true"
    isNeedleDraggingEnabled="true"
    titleDisplaysValue="true"
    label-interval="10"
    label-extent="0.65"        
    height="100%"
    width="100%"
    minimumValue={0} value={75}
    maximumValue={80} interval={10}  />
tsx

    EXAMPLE
    TSX
    Edit in:

    まとめ

    上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。

    <IgrRadialGauge
    height="300px" width="300px"
    minimumValue={0}
    maximumValue={80}
    scaleStartAngle={135}
    scaleEndAngle={45}
    scaleBrush="#c6c6c6"
    scaleSweepDirection="Clockwise"
    scaleOversweep={1}
    scaleOversweepShape="Fitted"
    scaleStartExtent={0.45}
    scaleEndExtent={0.575}

    value={70}
    isNeedleDraggingEnabled={true}
    isNeedleDraggingConstrained={true}
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent={0.475}
    needleStrokeThickness={1}
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio={0.2}
    needlePivotStrokeThickness={1}

    interval={10}
    tickStartExtent={0.45}
    tickEndExtent={0.575}
    tickStrokeThickness={2}
    tickBrush="Black"
    minorTickCount={4}
    minorTickEndExtent={0.5}
    minorTickStartExtent={0.575}
    minorTickStrokeThickness={1}
    minorTickBrush="Black"

    labelExtent={0.65}
    labelInterval={10}
    font="11px Verdana"
    fontBrush="Black"

    backingShape="Fitted"
    backingBrush="#ededed"
    backingOutline="Gray"
    backingOversweep={5}
    backingCornerRadius={10}
    backingStrokeThickness={5}
    backingOuterExtent={0.8}
    backingInnerExtent={0.15}

    rangeBrushes ="#a4bd29, #F86232"
    rangeOutlines="#a4bd29, #F86232">
    <IgrRadialGaugeRange
        startValue={20} endValue={40}
        innerStartExtent={0.45} innerEndExtent={0.45}
        outerStartExtent={0.57} outerEndExtent={0.57} />
    <IgrRadialGaugeRange
        startValue={40} endValue={60}
        innerStartExtent={0.45} innerEndExtent={0.45}
        outerStartExtent={0.57} outerEndExtent={0.57} />
</IgrRadialGauge>
tsx

    API リファレンス

    以下は上記のセクションで説明した API メンバーのリストです。

    その他のリソース

    その他のゲージ タイプの詳細については、以下のトピックを参照してください。