Angular ラジアル ゲージの概要

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

    Angular ラジアル ゲージの例

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

    依存関係

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

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

    モジュールの要件

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

    // 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>
    

    スケール

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

    <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>
    

    ラベルとタイトル

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

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

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

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

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

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

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

    目盛

    目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは minimumValuemaximumValue の間の interval に表示されます。また minorTickCount プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、tickStartExtenttickEndExtentminorTickStartExtentminorTickEndExtent に少数値 (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>
    

    範囲

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

    <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 つを使用します。オーバーレイとアンダーレイを含むピボット図形には、図形に適用する別のピボット ブラシがあります。

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

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

    <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 リファレンス

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

    その他のリソース

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