Blazor ラジアル ゲージの概要

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

Blazor ラジアル ゲージの例

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

IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。

• 作業の開始
• NuGet パッケージの追加

以下の名前空間を追加してコントロールの実装を開始できます。

@using IgniteUI.Blazor.Controls

モジュールの要件

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));

使用方法

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

<IgbRadialGauge Height="100%" Width="100%"
      MinimumValue="0" Value="25"
      MaximumValue="100" Interval="5" >
    <IgbRadialGaugeRange
          StartValue="0"
          EndValue="30"
          Brush="red">
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange
          StartValue="30"
          EndValue="60"
          Brush="Yellow" >
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange
          StartValue="60"
          EndValue="100"
          Brush="Green">
    </IgbRadialGaugeRange>
</IgbRadialGauge>

バッキング

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

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

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

 <IgbRadialGauge Height="100%" Width="100%"
    BackingShape="RadialGaugeBackingShape.Fitted"
    BackingBrush="#FCFCFC"
    BackingOutline="DodgerBlue"
    BackingOversweep="5"
    BackingCornerRadius="10"
    BackingStrokeThickness="5"
    BackingOuterExtent="0.8"
    BackingInnerExtent="0.15"

    ScaleStartAngle="135"
    ScaleEndAngle="45"
    MinimumValue="0"
    MaximumValue="80"
    Value="50"
    Interval="10">
</IgbRadialGauge>

スケール

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

<IgbRadialGauge
  ScaleStartAngle="135"
  ScaleEndAngle="45"
  ScaleBrush="DodgerBlue"
  ScaleSweepDirection="SweepDirection.Clockwise"
  ScaleOversweep="1"
  ScaleOversweepShape="RadialGaugeScaleOversweepShape.Fitted"
  ScaleStartExtent="0.45"
  ScaleEndExtent="0.575"
  MinimumValue="0"
  MaximumValue="80"
  Value="50"
  Interval="10">
</IgbRadialGauge>

ラベル

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

<IgbRadialGauge
  Height="100%" Width="100%"
  LabelInterval="10"
  LabelInterval="10"
  Font="11px Verdana"
  FontBrush="DodgerBlue"
  MinimumValue="0"
  MaximumValue="80"
  Value="50"
  Interval="10">
</IgbRadialGauge>

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

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

目盛

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

 <IgbRadialGauge Height="100%" Width="100%"
    TickStartExtent="0.5"
    TickEndExtent="0.57"
    TickStrokeThickness="2"
    TickBrush="DodgerBlue"
    MinorTickCount="4"
    MinorTickEndExtent="0.520"
    MinorTickStartExtent="0.57"
    MinorTickStrokeThickness="1"
    MinorTickBrush="DarkViolet"
    MinimumValue="0"
    MaximumValue="80"
    Value="50"
    Interval="10">
</IgbRadialGauge>

範囲

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

<IgbRadialGauge Height="100%" Width="100%"
      MinimumValue="0" Value="50"
      MaximumValue="80" Interval="10"
      RangeBrushes="#A4BD29, #F86232"
      RangeOutlines="#A4BD29, #F86232">
    <IgbRadialGaugeRange StartValue="10"
          EndValue="25"
          InnerStartExtent="0.50"
          InnerEndExtent="0.50"
          OuterStartExtent="0.57"
          OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange StartValue="25"
          EndValue="40"
          InnerStartExtent="0.50"
          InnerEndExtent="0.50"
          OuterStartExtent="0.57"
          OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
</IgbRadialGauge>

針

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

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

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

<IgbRadialGauge Height="100%" Width="100%"
    IsNeedleDraggingEnabled="true"
    IsNeedleDraggingConstrained="true"
    NeedleShape="RadialGaugeNeedleShape.NeedleWithBulb"
    NeedleBrush="DodgerBlue"
    NeedleOutline="DodgerBlue"
    NeedleEndExtent="0.475"
    NeedleStrokeThickness="1"
    NeedlePivotShape="RadialGaugePivotShape.CircleOverlay"
    NeedlePivotBrush="#9F9FA0"
    NeedlePivotOutline="#9F9FA0"
    NeedlePivotWidthRatio="0.2"
    NeedlePivotStrokeThickness="1"
    Value="50"
    MinimumValue="0"
    MaximumValue="80"
    Interval="10">
</IgbRadialGauge>

針のハイライト

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

<IgbLinearGauge Height="80px" Width="100%"
    MinimumValue="0"
    MaximumValue="100"
    Value="30"
    Interval="10"
    LabelInterval="10"
    LabelExtent="0.65"
    HighlightValue="50"
    HighlightValueDisplayMode=HighlightedValueDisplayMode.Overlay
    HighlightLabelDisplaysValue=true
    HighlightLabelSnapsToNeedlePivot=true
    IsHighlightNeedleDraggingEnabled=true
</IgbLinearGauge>

まとめ

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

<IgbRadialGauge Height="100%" Width="100%"
             MinimumValue="0"
             MaximumValue="80"
             Value="50"
             Interval="10"

             ScaleStartAngle="135"
             ScaleEndAngle="45"
             ScaleBrush="DodgerBlue"
             ScaleSweepDirection="SweepDirection.Clockwise"
             ScaleOversweep="1"
             ScaleOversweepShape="RadialGaugeScaleOversweepShape.Fitted"
             ScaleStartExtent="0.45"
             ScaleEndExtent="0.575"

             IsNeedleDraggingEnabled="true"
             IsNeedleDraggingConstrained="true"
             NeedleShape="RadialGaugeNeedleShape.NeedleWithBulb"
             NeedleBrush="DodgerBlue"
             NeedleOutline="DodgerBlue"
             NeedleEndExtent="0.475"
             NeedleStrokeThickness="1"
             NeedlePivotShape="RadialGaugePivotShape.CircleOverlay"
             NeedlePivotBrush="#9F9FA0"
             NeedlePivotOutline="#9F9FA0"
             NeedlePivotWidthRatio="0.2"
             NeedlePivotStrokeThickness="1"
             TickStartExtent="0.5"
             TickEndExtent="0.57"
             TickStrokeThickness="2"
             TickBrush="DodgerBlue"

             MinorTickCount="4"
             MinorTickEndExtent="0.520"
             MinorTickStartExtent="0.57"
             MinorTickStrokeThickness="1"
             MinorTickBrush="DarkViolet"

             LabelExtent="0.65"
             LabelInterval="10"
             Font="11px Verdana"
             FontBrush="Black"
             BackingShape="RadialGaugeBackingShape.Fitted"
             BackingBrush="#FCFCFC"
             BackingOutline="DodgerBlue"
             BackingOversweep="5"
             BackingCornerRadius="10"
             BackingStrokeThickness="5"
             BackingOuterExtent="0.8"
             BackingInnerExtent="0.15"

             RangeBrushes="#A4BD29, #F86232"
             RangeOutlines="#A4BD29, #F86232">
    <IgbRadialGaugeRange StartValue="20"
        EndValue="40"
        InnerStartExtent="0.50"
        InnerEndExtent="0.50"
        OuterStartExtent="0.57"
        OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
    <IgbRadialGaugeRange StartValue="40"
        EndValue="60"
        InnerStartExtent="0.50"
        InnerEndExtent="0.50"
        OuterStartExtent="0.57"
        OuterEndExtent="0.57">
    </IgbRadialGaugeRange>
</IgbRadialGauge>

API リファレンス

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

• IgbRadialGauge
• IgbRadialGaugeRange

その他のリソース

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

• ブレット グラフ
• リニア ゲージ