Blazor ラジアル ゲージの概要

Blazor Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。

Blazor ラジアル ゲージの例

Ignite UI for Blazor Radial Gauge コンポーネントは、ゲージを表示するデータ ビジュアライゼーション ツールです。スケール、目盛り、ラベル、針、および範囲などの複数の視覚要素を含むことができます。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、TransitionDuration プロパティの設定で簡単にカスタマイズできます。

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

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

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

@using IgniteUI.Blazor.Controls
@inject IIgniteUIBlazor IgniteUIBlazor

モジュールの要件

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

RadialGaugeModule.Register(IgniteUIBlazor);

使用方法

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

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

バッキング

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

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

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

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

スケール

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

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

ラベル

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

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

目盛

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

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

範囲

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

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

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

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

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

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

まとめ

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

<RadialGauge 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">  
    <RadialGaugeRange StartValue="20"
        EndValue="40"
        InnerStartExtent="0.50"
        InnerEndExtent="0.50"
        OuterStartExtent="0.57"
        OuterEndExtent="0.57">
    </RadialGaugeRange>
    <RadialGaugeRange StartValue="40"
        EndValue="60"
        InnerStartExtent="0.50"
        InnerEndExtent="0.50"
        OuterStartExtent="0.57"
        OuterEndExtent="0.57">
    </RadialGaugeRange>   
</RadialGauge>