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>
範囲
範囲はスケールで指定した値の範囲を強調表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。
<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 メンバーのリストです。
その他のリソース
その他のゲージ タイプの詳細については、以下のトピックを参照してください。