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 { IgcLinearGaugeModule } from 'igniteui-webcomponents-gauges';
    
    ModuleManager.register(
        IgcLinearGaugeModule
        );
    

    使用方法

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

    <igc-linear-gauge
        height="80px" width="400px"
        minimum-value=5 value=43
        maximum-value=55>
        <igc-linear-graph-range
            start-value=0
            end-value=15
            brush="red">
        </igc-linear-graph-range>
        <igc-linear-graph-range
            start-value=50
            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
        interval=10
        value=50
        is-needle-dragging-enabled=true
        needle-shape="Custom"
        needle-brush="DodgerBlue"
        needle-out-line="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 番目の針を表示できます。これにより、メイン針の value の不透明度が低く表示されます。これを有効にするには、まず highlightValueDisplayMode を Overlay に設定し、次に highlightValue を適用します。

    <igc-linear-gauge
        id="gauge"
        height="80px"
        width="100%"
        minimum-value="0" 
        maximum-value="100" 
        value="75"
        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 value=50
        maximum-value=100 interval=10
        range-brushes="#a4bd29, #F86232"
        range-outlines="#a4bd29, #F86232" >
        <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 value=50
        maximum-value=100
        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-end-extent=0.05
        minor-tick-start-extent=0.15
        minor-tick-stroke-thickness=1>
    </igc-linear-gauge>
    

    ラベル

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

    <igc-linear-gauge
        height="80px" width="400px"
        minimum-value=0 value=50
        maximum-value=100 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 value=20
        maximum-value=100 interval=10
        backing-brush="#bddcfc"
        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 value=50
        maximum-value=100 interval=10
        isScale-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 id="lineargauge"
        height="80px" width="400px"
        minimum-value=0
        maximum-value=100
    
        label-interval=10
        label-extent=0.025
        labels-pre-terminal=0
        labels-post-initial=0
        font-brush="Black"
        font="11px Verdana"
    
        interval=10
        tick-brush="Black"
        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="Black"
        minor-tick-end-extent=0.05
        minor-tick-start-extent=0.15
        minor-tick-stroke-thickness=1
    
        value=50
        is-needle-dragging-enabled=true
        needle-shape="Custom"
        needle-brush="Black"
        needle-outline="Black"
        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
    
        is-scale-inverted=false
        scale-brush="Gray"
        scale-outline="Gray"
        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="#cecece"
        backing-outline="#cecece"
        backing-stroke-thickness=4
        backing-inner-extent=0
        backing-outer-extent=1
    
        range-brushes ="#C62828, #F96232, #FF9800"
        range-outlines="#C62828, #F96232, #FF9800">
        <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 リファレンス

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

    その他のリソース

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