Premium

Web Components リニアゲージの概要

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

Web Components リニアゲージの例

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

依存関係

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

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges

モジュールの要件

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

import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcLinearGaugeModule } from 'igniteui-webcomponents-gauges';
// ...
ModuleManager.register(
    IgcLinearGaugeModule
);

使用方法

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

<igc-linear-gauge
    height="30px"
    width="700px"
    minimum-value="5"
    maximum-value="55"
    value="43">
    <igc-linear-graph-range
        start-value="0"
        end-value="15"
        brush="Red">
    </igc-linear-graph-range>
    <igc-linear-graph-range
        start-value="15"
        end-value="30"
        brush="Yellow">
    </igc-linear-graph-range>
    <igc-linear-graph-range
        start-value="30"
        end-value="55"
        brush="Green">
    </igc-linear-graph-range>
</igc-linear-gauge>

針

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    is-needle-dragging-enabled="true"
    needle-shape="Custom"
    needle-brush="DodgerBlue"
    needle-outline="DodgerBlue"
    needle-stroke-thickness="1"
    needle-breadth="15"
    needle-inner-extent="0.35"
    needle-outer-extent="0.65"
    needle-outer-point-extent="0.8"
    needle-inner-point-extent="0.325"
    needle-inner-point-width="0"
    needle-outer-point-width="0.3"
    needle-inner-base-width="0"
    needle-outer-base-width="0.07">
</igc-linear-gauge>

針のハイライト

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    label-interval="10"
    label-extent="0.025"
    labels-pre-terminal="0"
    labels-post-initial="0"
    needle-brush="Blue"
    highlight-value-display-mode="Overlay"
    highlight-value="25"
    is-highlight-needle-dragging-enabled="true">
</igc-linear-gauge>

範囲

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    range-brushes="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)"
    range-outlines="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)">
    <igc-linear-graph-range
        start-value="0"
        end-value="50"
        inner-start-extent="0.075"
        inner-end-extent="0.075"
        outer-start-extent="0.25"
        outer-end-extent="0.4">
    </igc-linear-graph-range>
    <igc-linear-graph-range
        start-value="50"
        end-value="100"
        inner-start-extent="0.075"
        inner-end-extent="0.075"
        outer-start-extent="0.4"
        outer-end-extent="0.55">
    </igc-linear-graph-range>
</igc-linear-gauge>

目盛

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

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

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    tick-brush="DodgerBlue"
    ticks-pre-terminal="0"
    ticks-post-initial="0"
    tick-stroke-thickness="2"
    tick-start-extent="0.25"
    tick-end-extent="0.05"
    minor-tick-count="4"
    minor-tick-brush="DarkViolet"
    minor-tick-start-extent="0.15"
    minor-tick-end-extent="0.05"
    minor-tick-stroke-thickness="1">
</igc-linear-gauge>

ラベル

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    label-interval="10"
    label-extent="0.025"
    labels-pre-terminal="0"
    labels-post-initial="0"
    font-brush="DodgerBlue"
    font="11px Verdana">
</igc-linear-gauge>

バッキング

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    backing-brush="rgba(189, 220, 252, 1)"
    backing-outline="DodgerBlue"
    backing-stroke-thickness="4"
    backing-inner-extent="0"
    backing-outer-extent="1">
</igc-linear-gauge>

スケール

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    is-scale-inverted="false"
    scale-brush="DodgerBlue"
    scale-outline="DarkViolet"
    scale-stroke-thickness="1"
    scale-inner-extent="0.05"
    scale-outer-extent="0.65"
    scale-start-extent="0.05"
    scale-end-extent="0.95">
</igc-linear-gauge>

まとめ

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

<igc-linear-gauge
    height="80px"
    width="400px"
    minimum-value="0"
    maximum-value="100"
    value="50"
    interval="10"
    is-scale-inverted="false"
    scale-brush="DodgerBlue"
    scale-outline="DarkViolet"
    scale-stroke-thickness="1"
    scale-inner-extent="0.05"
    scale-outer-extent="0.65"
    scale-start-extent="0.05"
    scale-end-extent="0.95"
    backing-brush="rgba(189, 220, 252, 1)"
    backing-outline="DodgerBlue"
    backing-stroke-thickness="4"
    backing-inner-extent="0"
    backing-outer-extent="1"
    label-interval="10"
    label-extent="0.025"
    labels-pre-terminal="0"
    labels-post-initial="0"
    font-brush="DodgerBlue"
    font="11px Verdana"
    tick-brush="DodgerBlue"
    ticks-pre-terminal="0"
    ticks-post-initial="0"
    tick-stroke-thickness="2"
    tick-start-extent="0.25"
    tick-end-extent="0.05"
    minor-tick-count="4"
    minor-tick-brush="DarkViolet"
    minor-tick-start-extent="0.15"
    minor-tick-end-extent="0.05"
    minor-tick-stroke-thickness="1"
    is-needle-dragging-enabled="true"
    needle-shape="Custom"
    needle-brush="DodgerBlue"
    needle-outline="DodgerBlue"
    needle-stroke-thickness="1"
    needle-breadth="15"
    needle-inner-extent="0.35"
    needle-outer-extent="0.65"
    needle-outer-point-extent="0.8"
    needle-inner-point-extent="0.325"
    needle-inner-point-width="0"
    needle-outer-point-width="0.3"
    needle-inner-base-width="0"
    needle-outer-base-width="0.07"
    highlight-value-display-mode="Overlay"
    highlight-value="25"
    is-highlight-needle-dragging-enabled="true"
    range-brushes="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)"
    range-outlines="rgba(164, 189, 41, 1) rgba(248, 98, 50, 1)">
    <igc-linear-graph-range
        start-value="0"
        end-value="50"
        inner-start-extent="0.075"
        inner-end-extent="0.075"
        outer-start-extent="0.25"
        outer-end-extent="0.4">
    </igc-linear-graph-range>
    <igc-linear-graph-range
        start-value="50"
        end-value="100"
        inner-start-extent="0.075"
        inner-end-extent="0.075"
        outer-start-extent="0.4"
        outer-end-extent="0.55">
    </igc-linear-graph-range>
</igc-linear-gauge>

API リファレンス

IgcLinearGaugeComponent
IgcLinearGraphRangeComponent

その他のリソース

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

Web Components リニア ゲージの概要

Web Components リニア ゲージの例