Premium

Angular ラジアルゲージの概要

Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。RadialGauge には、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、TransitionDuration プロパティの設定で簡単にカスタマイズできます。

Angular ラジアルゲージの例

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

依存関係

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

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

モジュールの要件

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

// app.module.ts
import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';

@NgModule({
    imports: [
        // ...
        IgxRadialGaugeModule
        // ...
    ]
})
export class AppModule {}

使用方法

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

 <igx-radial-gauge height="400px" width="400px"
    value="25"
    interval="5"
    minimumValue="0"
    maximumValue="100">
    <igx-radial-gauge-range startValue="0"
                            endValue="30"
                            brush="red">
    </igx-radial-gauge-range>
    <igx-radial-gauge-range startValue="30"
                            endValue="60"
                            brush="yellow">
    </igx-radial-gauge-range>
    <igx-radial-gauge-range startValue="60"
                            endValue="100"
                            brush="green">
    </igx-radial-gauge-range>
</igx-radial-gauge>

バッキング

ゲージには、スケールの後ろ側に描かれた背景図形があり、図形はゲージの背景として動作します。

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

バッキングは、円形またはフィットにできます。円形の場合は 360 度の円形のゲージが作成されますが、一方フィット図形の場合は ScaleStartAngle および ScaleEndAngle プロパティで円弧部分が塗りつぶされます。これには、BackingShape プロパティを設定します。

<igx-radial-gauge
    backingShape="Fitted"
    backingBrush="#fcfcfc"
    backingOutline="DodgerBlue"
    backingOversweep=5
    backingCornerRadius=10
    backingStrokeThickness=5
    backingOuterExtent=0.8
    backingInnerExtent=0.15
    scaleStartAngle=135 scaleEndAngle=45
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10>
</igx-radial-gauge>

スケール

スケールは視覚要素で、MinimumValue と MaximumValue 値を設定してゲージの値範囲全体をハイライト表示できます。バッキングとともにゲージの全体的な図形を定義します。ScaleStartAngle と ScaleEndAngle プロパティは、スケールの円弧の境界線を定義します。ScaleSweepDirection プロパティが、スケールが時計回りまたは反時計回りのどちらの方向に動くかを指定します。ScaleBrush、ScaleStartExtent、ScaleEndExtent プロパティを設定してスケールの外観をカスタマイズできます。

<igx-radial-gauge
    scaleStartAngle=135
    scaleEndAngle=45
    scaleBrush="DodgerBlue"
    scaleSweepDirection="Clockwise"
    scaleOversweep=1
    scaleOversweepShape="Fitted"
    scaleStartExtent=0.45
    scaleEndExtent=0.575
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10>
</igx-radial-gauge>

ラベルとタイトル

ゲージラベルは MinimumValue と MaximumValue の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージバッキングの外側範囲を表す LabelExtent プロパティで小数を使用してラベルの配置を設定できます。FontBrush や Font など、さまざまなスタイルプロパティを設定してラベルをカスタマイズできます。

これらの針のラベルにはそれぞれ、TitleExtent、TitleAngle、SubtitleFontSize、HighlightLabelBrush など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。

<igx-radial-gauge
    labelExtent=0.65
    labelInterval=10
    font="11px Verdana"
    fontBrush="DodgerBlue"
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=100 interval=10>
</igx-radial-gauge>

タイトルとサブタイトル

TitleText プロパティと SubtitleText プロパティが使用可能であり、どちらも針のカスタムテキストを表示するために使用できます。あるいは、TitleDisplaysValue と SubtitleDisplaysValue を true に設定すると、針の値が表示され、TitleText と SubtitleText がオーバーライドされます。したがって、タイトルにカスタムテキストを使用しながらサブタイトルで値を表示したり、その逆を行ったりすることができます。

以下に説明するように針のハイライトが表示されている場合は、HighlightLabelText を介してカスタムテキストを表示できます。それ以外の場合は、HighlightLabelDisplaysValue を有効にしてその値を表示できます。

<igx-radial-gauge
    titleText="Global Sales"
    subtitleText="2024">
</igx-radial-gauge>

オプティカルスケーリング

ラジアルゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず OpticalScalingEnabled を true に設定します。次に、ラベルが 100% のオプティカルスケーリングを持つサイズを管理する OpticalScalingSize を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォントサイズは 200% 大きくなります。

目盛

目盛は、ラジアルゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは MinimumValue と MaximumValue の間の Interval に表示されます。また MinorTickCount プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、TickStartExtent、TickEndExtent、MinorTickStartExtent、MinorTickEndExtent に少数値 (0 から 1 の間) を設定して制御できます。

<igx-radial-gauge
    tickStartExtent=0.45
    tickEndExtent=0.575
    tickStrokeThickness=2
    tickBrush="DodgerBlue"
    minorTickCount=4
    minorTickEndExtent=0.5
    minorTickStartExtent=0.575
    minorTickStrokeThickness=1
    minorTickBrush="DarkViolet"
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10>
</igx-radial-gauge>

範囲

範囲に MinimumValue や MaximumValue プロパティで指定した連続値の境界をハイライト表示します。開始値と終了値を指定してゲージに複数の範囲を追加でき、各範囲には、Brush や Outline などのカスタマイズプロパティがあります。または、RangeBrushes や RangeOutlines プロパティを範囲の色リストに設定することもできます。

<igx-radial-gauge
    height="300px" width="300px"
    minimumValue=0 value=50
    maximumValue=80 interval=10
    rangeBrushes ="red, yellow, green"
    rangeOutlines="red, yellow, green">
   <igx-radial-gauge-range
       startValue=5  endValue=15 brush="red">
   </igx-radial-gauge-range>
   <igx-radial-gauge-range
       startValue=15  endValue=35 brush="yellow">
   </igx-radial-gauge-range>
   <igx-radial-gauge-range
       startValue=35  endValue=45 brush="green">
   </igx-radial-gauge-range>
</igx-radial-gauge>

針

ゲージ針は、ゲージの設定値を示す視覚要素です。針は、あらかじめ定義されたいくつかの図形の中から選択でき、ピボット図形をゲージの中心に配置できます。またピボット図形は、事前に定義された図形の 1 つを使用します。オーバーレイとアンダーレイを含むピボット図形には、図形に適用する別のピボットブラシがあります。

サポートされている針の形とキャップは、NeedleShape と NeedlePivotShape プロパティで設定します。

ゲージのインタラクティブモードを有効 (IsNeedleDraggingEnabled プロパティを使用) にするとユーザーは MinimumValue と MaximumValue の値間で針をドラッグして値を変更できるようになります。

<igx-radial-gauge
    value=50
    isNeedleDraggingEnabled=true
    isNeedleDraggingConstrained=true
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent=0.475
    needleStrokeThickness=1
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio=0.2
    needlePivotStrokeThickness=1
    height="300px" width="300px"
    minimumValue=0
    maximumValue=80 interval=10>
</igx-radial-gauge>

針のハイライト

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

<igx-radial-gauge #radialGauge
    labelExtent=0.65
    labelInterval=10
    highlightValueDisplayMode="Overlay"
    highlightValue=50
    highlightLabelDisplaysValue=true
    highlightLabelSnapsToNeedlePivot=true
    isHighlightNeedleDraggingEnabled=true
    height="100%" width="100%"
    minimumValue=0 value=30
    maximumValue=100 interval=10  >
</igx-radial-gauge>

まとめ

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

<igx-radial-gauge
    height="300px" width="300px"
    minimumValue=0
    maximumValue=80
    scaleStartAngle=135
    scaleEndAngle=45
    scaleBrush="#c6c6c6"
    scaleSweepDirection="Clockwise"
    scaleOversweep=1
    scaleOversweepShape="Fitted"
    scaleStartExtent=0.45
    scaleEndExtent=0.575

    value=70
    isNeedleDraggingEnabled=true
    isNeedleDraggingConstrained=true
    needleShape="NeedleWithBulb"
    needleBrush="DodgerBlue"
    needleOutline="DodgerBlue"
    needleEndExtent=0.475
    needleStrokeThickness=1
    needlePivotShape="CircleOverlay"
    needlePivotBrush="#9f9fa0"
    needlePivotOutline="#9f9fa0"
    needlePivotWidthRatio=0.2
    needlePivotStrokeThickness=1

    interval=10
    tickStartExtent=0.45
    tickEndExtent=0.575
    tickStrokeThickness=2
    tickBrush="Black"
    minorTickCount=4
    minorTickEndExtent=0.5
    minorTickStartExtent=0.575
    minorTickStrokeThickness=1
    minorTickBrush="Black"

    labelExtent=0.65
    labelInterval=10
    font="11px Verdana"
    fontBrush="Black"

    backingShape="Fitted"
    backingBrush="#ededed"
    backingOutline="Gray"
    backingOversweep=5
    backingCornerRadius=10
    backingStrokeThickness=5
    backingOuterExtent=0.8
    backingInnerExtent=0.15

    rangeBrushes ="#a4bd29, #F86232"
    rangeOutlines="#a4bd29, #F86232">
    <igx-radial-gauge-range
        startValue=20 endValue=40
        innerStartExtent=0.45 innerEndExtent=0.45
        outerStartExtent=0.57 outerEndExtent=0.57>
    </igx-radial-gauge-range>
    <igx-radial-gauge-range
        startValue=40 endValue=60
        innerStartExtent=0.45 innerEndExtent=0.45
        outerStartExtent=0.57 outerEndExtent=0.57>
    </igx-radial-gauge-range>
</igx-radial-gauge>

API リファレンス

RadialGauge
RadialGaugeRange

その他のリソース

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

Angular ラジアル ゲージの概要

Angular ラジアル ゲージの例