Web Components ラジアル ゲージの概要
Web Components Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。IgcRadialGaugeComponent には、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、transitionDuration プロパティの設定で簡単にカスタマイズできます。
Web Components ラジアル ゲージの例
以下のサンプルは、同じ IgcRadialGaugeComponent でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
依存関係
gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。
npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-gauges
モジュールの要件
IgcRadialGaugeComponent を作成するには、以下のモジュールが必要です。
// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
// Radial Gauge Module
import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';
// register the modules
ModuleManager.register(
IgcRadialGaugeModule
);
使用方法
以下のコードは針およびスケールで 3 つの比較範囲を含むラジアル ゲージを作成する方法を紹介します。
<igc-radial-gauge
height="400px"
width="400px"
value="25"
interval="5"
minimum-value="0"
maximum-value="100">
<igc-radial-gauge-range
start-value="0"
end-value="30"
brush="red">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="30"
end-value="60"
brush="yellow">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="60"
end-value="100"
brush="green">
</igc-radial-gauge-range>
</igc-radial-gauge>
バッキング
ゲージには、スケールの後ろ側に描かれた背景図形があり、図形はゲージの背景として動作します。
バッキング要素はラジアル ゲージ コントロールの背景と境界線を表します。常に最初に描画される要素で針、ラベルやメモリなどの残りの要素はその上のオーバーレイです。
バッキングは、円形またはフィットにできます。円形の場合は 360 度の円形のゲージが作成されますが、一方フィット図形の場合は scaleStartAngle および scaleEndAngle プロパティで円弧部分が塗りつぶされます。これには、backingShape プロパティを設定します。
<igc-radial-gauge
height="300px" width="300px"
backing-shape="Fitted"
backing-brush="#fcfcfc"
backing-outline="DodgerBlue"
backing-oversweep="5"
backing-corner-radius="10"
backing-stroke-thickness="5"
backing-outer-extent="0.8"
backing-inner-extent="0.15"
scale-start-angle="135" scale-end-angle="45"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-radial-gauge>
スケール
スケールは視覚要素で、minimumValue と maximumValue 値を設定してゲージの値範囲全体をハイライト表示できます。バッキングとともにゲージの全体的な図形を定義します。scaleStartAngle と scaleEndAngle プロパティは、スケールの円弧の境界線を定義します。scaleSweepDirection プロパティが、スケールが時計回りまたは反時計回りのどちらの方向に動くかを指定します。scaleBrush、scaleStartExtent、scaleEndExtent プロパティを設定してスケールの外観をカスタマイズできます。
<igc-radial-gauge
height="300px" width="300px"
scale-start-angle="135"
scale-end-angle="45"
scale-brush="DodgerBlue"
scale-sweep-direction="Clockwise"
scale-oversweep="1"
scale-oversweep-shape="Fitted"
scale-start-extent="0.45"
scale-end-extent="0.575"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-radial-gauge>
ラベルとタイトル
ゲージ ラベルは minimumValue と maximumValue の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージ バッキングの外側範囲を表す labelExtent プロパティで小数を使用してラベルの配置を設定できます。fontBrush や font など、さまざまなスタイル プロパティを設定してラベルをカスタマイズできます。
これらの針のラベルにはそれぞれ、titleExtent、titleAngle、SubtitleFontSize、highlightLabelBrush など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。
<igc-radial-gauge
height="300px" width="300px"
label-extent="0.65"
label-interval="10"
font="11px Verdana"
font-brush="DodgerBlue"
minimum-value="0" value="50"
maximum-value="100" interval="10">
</igc-radial-gauge>
タイトルとサブタイトル
titleText プロパティと subtitleText プロパティが使用可能であり、どちらも針のカスタム テキストを表示するために使用できます。あるいは、titleDisplaysValue と subtitleDisplaysValue を true に設定すると、針の値が表示され、titleText と subtitleText がオーバーライドされます。したがって、タイトルにカスタム テキストを使用しながらサブタイトルで値を表示したり、その逆を行ったりすることができます。
以下に説明するように針のハイライトが表示されている場合は、highlightLabelText を介してカスタム テキストを表示できます。それ以外の場合は、highlightLabelDisplaysValue を有効にしてその値を表示できます。
<igc-radial-gauge
title-text="Global Sales"
subtitle-text="2024">
</igc-radial-gauge>
オプティカル スケーリング
ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず opticalScalingEnabled を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する opticalScalingSize を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。
目盛
目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは minimumValue と maximumValue の間の interval に表示されます。また minorTickCount プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、tickStartExtent、tickEndExtent、minorTickStartExtent、minorTickEndExtent に少数値 (0 から 1 の間) を設定して制御できます。
<igc-radial-gauge
height="300px" width="300px"
tick-start-extent="0.45"
tick-end-extent="0.575"
tick-stroke-thickness="2"
tick-brush="DodgerBlue"
minor-tick-count="4"
minor-tick-end-extent="0.5"
minor-tick-start-extent="0.575"
minor-tick-stroke-thickness="1"
minor-tick-brush="DarkViolet"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-radial-gauge>
範囲
範囲に minimumValue や maximumValue プロパティで指定した連続値の境界をハイライト表示します。開始値と終了値を指定してゲージに複数の範囲を追加でき、各範囲には、brush や outline などのカスタマイズ プロパティがあります。または、rangeBrushes や rangeOutlines プロパティを範囲の色リストに設定することもできます。
<igc-radial-gauge
height="300px" width="300px"
minimum-value="0" value="50"
maximum-value="80" interval="10"
range-brushes ="red, yellow, green"
range-outlines="red, yellow, green">
<igc-radial-gauge-range
start-value="5" end-value="15" brush="red">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="15" end-value="35" brush="yellow">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="35" end-value="45" brush="green">
</igc-radial-gauge-range>
</igc-radial-gauge>
針
ゲージ針は、ゲージの設定値を示す視覚要素です。針は、あらかじめ定義されたいくつかの図形の中から選択でき、ピボット図形をゲージの中心に配置できます。またピボット図形は、事前に定義された図形の 1 つを使用します。オーバーレイとアンダーレイを含むピボット図形には、図形に適用する別のピボット ブラシがあります。
サポートされている針の形とキャップは、needleShape と needlePivotShape プロパティで設定します。
ゲージのインタラクティブ モードを有効 (isNeedleDraggingEnabled プロパティを使用) にするとユーザーは minimumValue と maximumValue の値間で針をドラッグして値を変更できるようになります。
<igc-radial-gauge
height="300px" width="300px"
is-needle-dragging-enabled="true"
is-needle-dragging-constrained="true"
needle-shape="NeedleWithBulb"
needle-brush="DodgerBlue"
needle-outline="DodgerBlue"
needle-end-extent="0.475"
needle-stroke-thickness="1"
needle-pivot-shape="CircleOverlay"
needle-pivot-brush="#9f9fa0"
needle-pivot-outline="#9f9fa0"
needle-pivot-width-ratio="0.2"
needle-pivot-stroke-thickness="1"
minimum-value="0" value="50"
maximum-value="80" interval="10">
</igc-radial-gauge>
針のハイライト
ラジアル ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の value の不透明度が低く表示されます。これを有効にするには、まず highlightValueDisplayMode を Overlay に設定し、次に highlightValue を適用します。
<igc-radial-gauge
id="gauge"
highlight-value="50"
highlight-value-display-mode="Overlay"
highlight-label-displays-value="true"
highlight-label-snaps-to-needle-pivot="true"
is-highlight-needle-dragging-enabled="true"
label-interval="10"
label-extent="0.65"
height="100%"
width="100%"
minimum-value="0" value="30"
maximum-value="100" interval="10">
</igc-radial-gauge>
まとめ
上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。
<igc-radial-gauge
height="300px" width="300px"
minimum-value="0"
maximum-value="80"
scale-start-angle="135"
scale-end-angle="45"
scale-brush="#c6c6c6"
scale-sweep-direction="Clockwise"
scale-oversweep="1"
scale-oversweep-shape="Fitted"
scale-start-extent="0.45"
scale-end-extent="0.575"
value="70"
is-needle-dragging-enabled="true"
is-needle-dragging-constrained="true"
needle-shape="NeedleWithBulb"
needle-brush="DodgerBlue"
needle-outline="DodgerBlue"
needle-end-extent="0.475"
needle-stroke-thickness="1"
needle-pivot-shape="CircleOverlay"
needle-pivot-brush="#9f9fa0"
needle-pivot-outline="#9f9fa0"
needle-pivot-width-ratio="0.2"
needle-pivot-stroke-thickness="1"
interval="10"
tick-start-extent="0.45"
tick-end-extent="0.575"
tick-stroke-thickness="2"
tick-brush="Black"
minor-tick-count="4"
minor-tick-end-extent="0.5"
minor-tick-start-extent="0.575"
minor-tick-stroke-thickness="1"
minor-tick-brush="Black"
label-extent="0.65"
label-interval="10"
font="11px Verdana"
font-brush="Black"
backing-shape="Fitted"
backing-brush="#ededed"
backing-outline="Gray"
backing-oversweep="5"
backing-corner-radius="10"
backing-stroke-thickness="5"
backing-outer-extent="0.8"
backing-inner-extent="0.15"
range-brushes ="#a4bd29, #F86232"
range-outlines="#a4bd29, #F86232">
<igc-radial-gauge-range
start-value="20" end-value="40"
inner-start-extent="0.45" inner-end-extent="0.45"
outer-start-extent="0.57" outer-end-extent="0.57">
</igc-radial-gauge-range>
<igc-radial-gauge-range
start-value="40" end-value="60"
inner-start-extent="0.45" inner-end-extent="0.45"
outer-start-extent="0.57" outer-end-extent="0.57">
</igc-radial-gauge-range>
</igc-radial-gauge>
API リファレンス
以下は上記のセクションで説明した API メンバーのリストです。
その他のリソース
その他のゲージ タイプの詳細については、以下のトピックを参照してください。