Premium

Angular リニアゲージの概要

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

Angular リニアゲージの例

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

依存関係

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

npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges

モジュールの要件

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

import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
// ...
// app.module.ts
@NgModule({
    imports: [
    IgxLinearGaugeModule
    ]
})
export class AppModule { }

使用方法

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

<igx-linear-gauge
    height="30px"
    width="700px"
    minimumValue=5
    maximumValue=55
    value=43>
    <igx-linear-graph-range
        startValue=0
        endValue=15
        brush="Red">
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=15
        endValue=30
        brush="Yellow">
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=30
        endValue=55
        brush="Green">
    </igx-linear-graph-range>
</igx-linear-gauge>

針

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

<igx-linear-gauge
    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>
</igx-linear-gauge>

針のハイライト

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

<igx-linear-gauge
    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">
</igx-linear-gauge>

範囲

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

<igx-linear-gauge
    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)">
    <igx-linear-graph-range
        startValue=0
        endValue=50
        innerStartExtent=0.075
        innerEndExtent=0.075
        outerStartExtent=0.25
        outerEndExtent=0.4>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=50
        endValue=100
        innerStartExtent=0.075
        innerEndExtent=0.075
        outerStartExtent=0.4
        outerEndExtent=0.55>
    </igx-linear-graph-range>
</igx-linear-gauge>

目盛

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

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

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

<igx-linear-gauge
    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>
</igx-linear-gauge>

ラベル

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

<igx-linear-gauge
    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">
</igx-linear-gauge>

バッキング

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

<igx-linear-gauge
    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>
</igx-linear-gauge>

スケール

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

<igx-linear-gauge
    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>
</igx-linear-gauge>

まとめ

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

<igx-linear-gauge
    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)">
    <igx-linear-graph-range
        startValue=0
        endValue=50
        innerStartExtent=0.075
        innerEndExtent=0.075
        outerStartExtent=0.25
        outerEndExtent=0.4>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=50
        endValue=100
        innerStartExtent=0.075
        innerEndExtent=0.075
        outerStartExtent=0.4
        outerEndExtent=0.55>
    </igx-linear-graph-range>
</igx-linear-gauge>

API リファレンス

IgxLinearGaugeComponent
IgxLinearGraphRangeComponent

その他のリソース

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

Angular リニア ゲージの概要

Angular リニア ゲージの例