Premium

React リニアゲージの概要

Ignite UI for React リニアゲージコンポーネントを使用すると、リニアゲージの形式でデータを視覚化できます。IgrLinearGauge は、スケールおよび 1 つ以上の範囲と比較した値のシンプルで簡潔なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれており、アニメーションでは、transitionDuration プロパティの設定で簡単にカスタマイズできます。また構成可能な向きや方向、視覚要素やツールチップなどがサポートされます。

React リニアゲージの例

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

依存関係

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

npm install --save igniteui-react-core
npm install --save igniteui-react-gauges

モジュールの要件

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

import { IgrLinearGaugeModule } from 'igniteui-react-gauges';
// ...
const mods: any[] = [
    IgrLinearGaugeModule
];
mods.forEach((m) => m.register());

使用方法

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

<IgrLinearGauge
    height="30px"
    width="700px"
    minimumValue={5}
    maximumValue={55}
    value={43}>
    <IgrLinearGraphRange
        startValue={0}
        endValue={15}
        brush="Red" />
    <IgrLinearGraphRange
        startValue={15}
        endValue={30}
        brush="Yellow" />
    <IgrLinearGraphRange
        startValue={30}
        endValue={55}
        brush="Green" />
</IgrLinearGauge>

針

これは、コンポーネントで表示されるプライマリメジャーでバーで可視化されます。あるいは以下で示す図形のほとんどすべてをカスタマイズすることもできます。

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    isNeedleDraggingEnabled={true}
    needleShape="Custom"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleStrokeThickness={1}
    needleBreadth={15}
    needleInnerExtent={0.35}
    needleOuterExtent={0.65}
    needleOuterPointExtent={0.8}
    needleInnerPointExtent={0.325}
    needleInnerPointWidth={0}
    needleOuterPointWidth={0.3}
    needleInnerBaseWidth={0}
    needleOuterBaseWidth={0.07} />

針のハイライト

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

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    needleBrush="Blue"
    highlightValueDisplayMode="Overlay"
    highlightValue={25}
    isHighlightNeedleDraggingEnabled={true} />

範囲

範囲はスケールで指定した値の範囲をハイライト表示する視覚的な要素です。その目的は、パフォーマンスバーメジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    rangeBrushes="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)"
    rangeOutlines="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)">
    <IgrLinearGraphRange
        startValue={0}
        endValue={50}
        innerStartExtent={0.075}
        innerEndExtent={0.075}
        outerStartExtent={0.25}
        outerEndExtent={0.4} />
    <IgrLinearGraphRange
        startValue={50}
        endValue={100}
        innerStartExtent={0.075}
        innerEndExtent={0.075}
        outerStartExtent={0.4}
        outerEndExtent={0.55} />
</IgrLinearGauge>

目盛

目盛は、リニアゲージを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。

主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。

補助目盛 - 補助目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    tickBrush="DodgerBlue"
    ticksPreTerminal={0}
    ticksPostInitial={0}
    tickStrokeThickness={2}
    tickStartExtent={0.25}
    tickEndExtent={0.05}
    minorTickCount={4}
    minorTickBrush="DarkViolet"
    minorTickStartExtent={0.15}
    minorTickEndExtent={0.05}
    minorTickStrokeThickness={1} />

ラベル

ラベルはスケールのメジャーを示します。

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    fontBrush="DodgerBlue"
    font="11px Verdana" />

バッキング

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

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    backingBrush="rgba(189, 220, 252, 1)"
    backingOutline="DodgerBlue"
    backingStrokeThickness={4}
    backingInnerExtent={0}
    backingOuterExtent={1} />

スケール

スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (isScaleInverted プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    isScaleInverted={false}
    scaleBrush="DodgerBlue"
    scaleOutline="DarkViolet"
    scaleStrokeThickness={1}
    scaleInnerExtent={0.05}
    scaleOuterExtent={0.65}
    scaleStartExtent={0.05}
    scaleEndExtent={0.95} />

まとめ

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

<IgrLinearGauge
    height="80px"
    width="400px"
    minimumValue={0}
    maximumValue={100}
    value={50}
    interval={10}
    isScaleInverted={false}
    scaleBrush="DodgerBlue"
    scaleOutline="DarkViolet"
    scaleStrokeThickness={1}
    scaleInnerExtent={0.05}
    scaleOuterExtent={0.65}
    scaleStartExtent={0.05}
    scaleEndExtent={0.95}
    backingBrush="rgba(189, 220, 252, 1)"
    backingOutline="DodgerBlue"
    backingStrokeThickness={4}
    backingInnerExtent={0}
    backingOuterExtent={1}
    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    fontBrush="DodgerBlue"
    font="11px Verdana"
    tickBrush="DodgerBlue"
    ticksPreTerminal={0}
    ticksPostInitial={0}
    tickStrokeThickness={2}
    tickStartExtent={0.25}
    tickEndExtent={0.05}
    minorTickCount={4}
    minorTickBrush="DarkViolet"
    minorTickStartExtent={0.15}
    minorTickEndExtent={0.05}
    minorTickStrokeThickness={1}
    isNeedleDraggingEnabled={true}
    needleShape="Custom"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleStrokeThickness={1}
    needleBreadth={15}
    needleInnerExtent={0.35}
    needleOuterExtent={0.65}
    needleOuterPointExtent={0.8}
    needleInnerPointExtent={0.325}
    needleInnerPointWidth={0}
    needleOuterPointWidth={0.3}
    needleInnerBaseWidth={0}
    needleOuterBaseWidth={0.07}
    highlightValueDisplayMode="Overlay"
    highlightValue={25}
    isHighlightNeedleDraggingEnabled={true}
    rangeBrushes="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)"
    rangeOutlines="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)">
    <IgrLinearGraphRange
        startValue={0}
        endValue={50}
        innerStartExtent={0.075}
        innerEndExtent={0.075}
        outerStartExtent={0.25}
        outerEndExtent={0.4} />
    <IgrLinearGraphRange
        startValue={50}
        endValue={100}
        innerStartExtent={0.075}
        innerEndExtent={0.075}
        outerStartExtent={0.4}
        outerEndExtent={0.55} />
</IgrLinearGauge>

API リファレンス

IgrLinearGauge
IgrLinearGraphRange

その他のリソース

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

React リニア ゲージの概要

React リニア ゲージの例