Blazor ラジアル ゲージの概要
Blazor Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。IgbRadialGauge
には、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、TransitionDuration
プロパティの設定で簡単にカスタマイズできます。
Blazor ラジアル ゲージの例
以下のサンプルは、同じ IgbRadialGauge
でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。
以下の名前空間を追加してコントロールの実装を開始できます。
@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>
目盛
目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 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>
まとめ
上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。
<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 メンバーのリストです。
その他のリソース
その他のゲージ タイプの詳細については、以下のトピックを参照してください。