Blazor ラジアルゲージの概要

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

Blazor ラジアルゲージの例

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <button @onclick="onAnimateToGauge1">Gauge Animation #1</button>
        <button @onclick="onAnimateToGauge2">Gauge Animation #2</button>
        <button @onclick="onAnimateToGauge3">Gauge Animation #3</button>
        <button @onclick="onAnimateToGauge4">Gauge Animation #4</button>
    </div>
    <div class="container vertical">
        <IgbRadialGauge @ref="Gauge"
                     Height="100%" Width="100%"
                     TransitionDuration="@TransitionDuration"
                     Value=@Value
                     Interval=@Interval
                     MinimumValue=@MinimumValue
                     MaximumValue=@MaximumValue
                     Font=@Font
                     LabelInterval=@LabelInterval
                     LabelExtent=@LabelExtent
                     MinorTickCount=@MinorTickCount
                     MinorTickEndExtent=@MinorTickEndExtent
                     MinorTickStartExtent=@MinorTickStartExtent
                     MinorTickStrokeThickness=@MinorTickStrokeThickness
                     MinorTickBrush=@MinorTickBrush
                     TickStartExtent=@TickStartExtent
                     TickEndExtent=@TickEndExtent
                     TickStrokeThickness=@TickStrokeThickness
                     TickBrush="@TickBrush"
                     NeedleShape=@NeedleShape
                     NeedleEndExtent=@NeedleEndExtent
                     NeedleEndWidthRatio=@NeedleEndWidthRatio
                     NeedleStartWidthRatio=@NeedleStartWidthRatio
                     NeedlePivotShape=@NeedlePivotShape
                     NeedlePivotWidthRatio=@NeedlePivotWidthRatio
                     NeedleBaseFeatureWidthRatio=@NeedleBaseFeatureWidthRatio
                     NeedleBrush=@NeedleBrush
                     NeedleOutline=@NeedleOutline
                     NeedlePivotBrush=@NeedlePivotBrush
                     NeedlePivotOutline=@NeedlePivotOutline
                     NeedlePointFeatureExtent=@NeedlePointFeatureExtent
                     IsNeedleDraggingEnabled=@IsNeedleDraggingEnabled
                     BackingBrush=@BackingBrush
                     BackingOutline=@BackingOutline
                     BackingStrokeThickness=@BackingStrokeThickness
                     BackingShape=@BackingShape
                     BackingOversweep=@BackingOversweep
                     BackingCornerRadius=@BackingCornerRadius
                     BackingOuterExtent=@BackingOuterExtent
                     ScaleStartAngle=@ScaleStartAngle
                     ScaleEndAngle=@ScaleEndAngle
                     ScaleEndExtent=@ScaleEndExtent
                     ScaleStartExtent=@ScaleStartExtent
                     ScaleOversweepShape=@ScaleOversweepShape
                     ScaleBrush=@ScaleBrush
                     ScaleSweepDirection=@ScaleSweepDirection>
            @for (int i = 0; i < RangeInfo.Count; i++)
            {
                GaugeRangeInfo info = RangeInfo[i];
                <IgbRadialGaugeRange StartValue=@info.StartValue
                                  EndValue=@info.EndValue
                                  InnerStartExtent=@info.InnerStartExtent
                                  InnerEndExtent=@info.InnerEndExtent
                                  OuterStartExtent=@info.OuterStartExtent
                                  OuterEndExtent=@info.OuterEndExtent
                                  Brush="@info.Brush"
                                  Outline="@info.Outline">
                </IgbRadialGaugeRange>
            }
        </IgbRadialGauge>
    </div>
</div>

@code {

    private IgbRadialGauge Gauge;
    private double MinimumValue;
    private double MaximumValue;
    private double Value;
    private double Interval;
    private int TransitionDuration;

    private double LabelExtent;
    private double LabelInterval;
    private string Font;

    private double ScaleStartAngle;
    private double ScaleEndAngle;
    private string ScaleBrush;
    private SweepDirection ScaleSweepDirection;
    private double ScaleEndExtent;
    private double ScaleStartExtent;
    private RadialGaugeScaleOversweepShape ScaleOversweepShape;

    private string BackingOutline;
    private string BackingBrush;
    private RadialGaugeBackingShape BackingShape;
    private double BackingStrokeThickness;
    private double BackingOversweep;
    private double BackingCornerRadius;
    private double BackingOuterExtent;

    private bool IsNeedleDraggingEnabled;
    private double NeedlePointFeatureExtent;
    private double NeedleEndExtent;
    private RadialGaugeNeedleShape NeedleShape;
    private RadialGaugePivotShape NeedlePivotShape;
    private double NeedlePivotWidthRatio;
    private string NeedleBrush;
    private string NeedleOutline;
    private double NeedleStartWidthRatio;
    private double NeedleEndWidthRatio;
    private double NeedleBaseFeatureWidthRatio;
    private string NeedlePivotBrush;
    private string NeedlePivotOutline;

    private string TickBrush;
    private double TickEndExtent;
    private double TickStartExtent;
    private double TickStrokeThickness;
    private string MinorTickBrush;
    private double MinorTickEndExtent;
    private double MinorTickStartExtent;
    private double MinorTickCount;
    private double MinorTickStrokeThickness;

    private System.Collections.ObjectModel.ObservableCollection<GaugeRangeInfo> RangeInfo;

    protected override void OnInitialized()
    {

        this.MinimumValue = 0;
        this.MaximumValue = 50;
        this.Value = 25;
        this.Interval = 5;

        this.Font = null;
        this.LabelInterval = 5;
        this.LabelExtent = 0.71;

        this.ScaleStartAngle = 120;
        this.ScaleEndAngle = 60;
        this.ScaleEndExtent = 0;
        this.ScaleStartExtent = 0;
        this.ScaleBrush = "#D6D6D6";
        this.ScaleSweepDirection = SweepDirection.Clockwise;
        this.ScaleOversweepShape = RadialGaugeScaleOversweepShape.Auto;

        this.BackingOutline = "#D6D6D6";
        this.BackingBrush = "#FCFCFC";
        this.BackingShape = RadialGaugeBackingShape.Circular;
        this.BackingStrokeThickness = 5;
        this.BackingOversweep = 0;
        this.BackingCornerRadius = 0;
        this.BackingOuterExtent = 0;

        this.IsNeedleDraggingEnabled = true;
        this.NeedleEndExtent = 0.8;
        this.NeedleShape = RadialGaugeNeedleShape.Triangle;
        this.NeedlePivotShape = RadialGaugePivotShape.CircleOverlay;
        this.NeedlePivotWidthRatio = 0.15;
        this.NeedleBrush = "#79797A";
        this.NeedleOutline = "#79797A";
        this.NeedleStartWidthRatio = 0.05;
        this.NeedleEndWidthRatio = 0.03;
        this.NeedleBaseFeatureWidthRatio = 0.15;
        this.NeedlePivotBrush = "#79797A";
        this.NeedlePivotOutline = "#79797A";
        this.NeedlePointFeatureExtent = 0;

        this.MinorTickCount = 4;
        this.MinorTickEndExtent = 0.625;
        this.MinorTickStartExtent = 0.6;
        this.MinorTickStrokeThickness = 1;
        this.MinorTickBrush = "#79797A";
        this.TickStartExtent = 0.6;
        this.TickEndExtent = 0.65;
        this.TickStrokeThickness = 2;

        RangeInfo = new System.Collections.ObjectModel.ObservableCollection<GaugeRangeInfo>();
        //RangeInfo.Add(new GaugeRangeInfo()
        //{
        //    Brush = "red",
        //    Outline = "red",
        //    StartValue = 0,
        //    EndValue = 100,
        //    InnerStartExtent = 0.3,
        //    InnerEndExtent = 0.3,
        //    OuterStartExtent = 0.9,
        //    OuterEndExtent = 0.9
        //});
    }

    public void onAnimateToGauge1()
    {
        this.TransitionDuration = 1000;
        this.MinimumValue = 0;
        this.MaximumValue = 10;
        this.Value = 7.5;

        // Scale Settings
        this.ScaleStartAngle = 180;
        this.ScaleEndAngle = 270;
        this.ScaleBrush = "transparent";
        this.ScaleSweepDirection = SweepDirection.Clockwise;

        // Backing Settings
        this.BackingOutline = "white";
        this.BackingBrush = "white";
        this.BackingShape = RadialGaugeBackingShape.Fitted;

        // Needle Settings
        this.NeedleEndExtent = 0.8;
        this.NeedleShape = RadialGaugeNeedleShape.Triangle;
        this.NeedlePivotShape = RadialGaugePivotShape.Circle;
        this.NeedlePivotWidthRatio = 0.1;
        this.NeedleBrush = "#79797a";
        this.NeedleOutline = "#79797a";

        // TickMark Settings
        this.TickBrush = "transparent";
        this.MinorTickBrush = "transparent";

        // Label Settings
        this.LabelInterval = 5;
        this.LabelExtent = 0.915;
        this.Font = "15px Verdana,Arial";

        // setting custom gauge ranges
        GaugeRangeInfo range1 = new GaugeRangeInfo()
        {
            Brush = "#A4BD29",
            Outline = "#A4BD29",
            StartValue = 0,
            EndValue = 5,
            InnerStartExtent = 0.3,
            InnerEndExtent = 0.3,
            OuterStartExtent = 0.9,
            OuterEndExtent = 0.9
        };

        GaugeRangeInfo range2 = new GaugeRangeInfo()
        {
            Brush = "#F86232",
            Outline = "#F86232",
            StartValue = 5,
            EndValue = 10,
            InnerStartExtent = 0.3,
            InnerEndExtent = 0.3,
            OuterStartExtent = 0.9,
            OuterEndExtent = 0.9
        };

        RangeInfo.Clear();

        RangeInfo.Add(range1);
        RangeInfo.Add(range2);
    }

    public void onAnimateToGauge2()
    {
        this.TransitionDuration = 1000;
        this.MinimumValue = 100;
        this.MaximumValue = 200;
        this.Value = 125;

        // Scale Settings
        this.ScaleStartAngle = 180;
        this.ScaleEndAngle = 0;
        this.ScaleBrush = "transparent";
        this.ScaleSweepDirection = SweepDirection.Clockwise;

        // Backing Settings
        this.BackingOutline = "white";
        this.BackingBrush = "white";
        this.BackingShape = RadialGaugeBackingShape.Fitted;

        // Needle Settings
        this.NeedleEndExtent = 0.8;
        this.NeedleShape = RadialGaugeNeedleShape.Triangle;
        this.NeedlePivotShape = RadialGaugePivotShape.Circle;
        this.NeedlePivotWidthRatio = 0.1;
        this.NeedleBrush = "#79797a";
        this.NeedleOutline = "#79797a";

        // TickMark Settings
        this.TickBrush = "transparent";
        this.MinorTickBrush = "transparent";

        // Label Settings
        this.LabelInterval = 50;
        this.LabelExtent = 0.935;
        this.Font = "13px Verdana,Arial";

        GaugeRangeInfo range1 = new GaugeRangeInfo()
        {
            Brush = "#32F845",
            Outline = "#32F845",
            StartValue = 100,
            EndValue = 150,
            InnerStartExtent = 0.3,
            InnerEndExtent = 0.3,
            OuterStartExtent = 0.9,
            OuterEndExtent = 0.9
        };

        GaugeRangeInfo range2 = new GaugeRangeInfo()
        {
            Brush = "#BF32F8",
            Outline = "#BF32F8",
            StartValue = 150,
            EndValue = 200,
            InnerStartExtent = 0.3,
            InnerEndExtent = 0.3,
            OuterStartExtent = 0.9,
            OuterEndExtent = 0.9
        };

        RangeInfo.Clear();
        RangeInfo.Add(range1);
        RangeInfo.Add(range2);
    }

    public void onAnimateToGauge3()
    {
        this.TransitionDuration = 1000;
        this.MinimumValue = 0;
        this.MaximumValue = 80;
        this.Value = 10;
        this.Interval = 10;

        // Label Settings
        this.LabelExtent = 0.6;
        this.LabelInterval = 10;
        this.Font = "15px Verdana,Arial";

        // Scale Settings
        this.ScaleStartAngle = 135;
        this.ScaleEndAngle = 45;
        this.ScaleBrush = "#0b8fed";
        this.ScaleOversweepShape = RadialGaugeScaleOversweepShape.Auto;
        this.ScaleSweepDirection = SweepDirection.Clockwise;
        this.ScaleEndExtent = 0.825;
        this.ScaleStartExtent = 0.775;

        this.MinorTickStartExtent = 0.7;
        this.MinorTickEndExtent = 0.75;
        this.TickStartExtent = 0.675;
        this.TickEndExtent = 0.75;

        // Backing Settings
        this.BackingShape = RadialGaugeBackingShape.Fitted;
        this.BackingBrush = "#fcfcfc";
        this.BackingOutline = "#d6d6d6";
        this.BackingOversweep = 5;
        this.BackingCornerRadius = 10;
        this.BackingOuterExtent = 0.9;

        // Needle Settings
        this.NeedleShape = RadialGaugeNeedleShape.NeedleWithBulb;
        this.NeedlePivotShape = RadialGaugePivotShape.CircleOverlay;
        this.NeedleEndExtent = 0.5;
        this.NeedlePointFeatureExtent = 0.3;
        this.NeedlePivotWidthRatio = 0.2;
        this.NeedleBrush = "#9f9fa0";
        this.NeedleOutline = "#9f9fa0";
        this.NeedlePivotBrush = "#9f9fa0";
        this.NeedlePivotOutline = "#9f9fa0";

        // TickMark Settings
        this.TickBrush = "rgba(51, 51, 51, 1)";
        this.MinorTickBrush = "rgba(73, 73, 73, 1)";
        this.MinorTickCount = 6;

        RangeInfo.Clear();
    }

    public void onAnimateToGauge4()
    {
        this.TransitionDuration = 1000;
        this.MinimumValue = 0;
        this.MaximumValue = 50;
        this.Value = 25;
        this.Interval = 5;

        // setting appearance of labels
        this.LabelInterval = 5;
        this.LabelExtent = 0.71;
        this.Font = "15px Verdana,Arial";

        // setting custom needle
        this.IsNeedleDraggingEnabled = true;
        this.NeedleEndExtent = 0.5;
        this.NeedleShape = RadialGaugeNeedleShape.Triangle;
        this.NeedleEndWidthRatio = 0.03;
        this.NeedleStartWidthRatio = 0.05;
        this.NeedlePivotShape = RadialGaugePivotShape.CircleOverlay;
        this.NeedlePivotWidthRatio = 0.15;
        this.NeedleBaseFeatureWidthRatio = 0.15;
        this.NeedleBrush = "#79797a";
        this.NeedleOutline = "#79797a";
        this.NeedlePivotBrush = "#79797a";
        this.NeedlePivotOutline = "#79797a";

        // setting appearance of major/minor ticks
        this.MinorTickCount = 4;
        this.MinorTickEndExtent = 0.625;
        this.MinorTickStartExtent = 0.6;
        this.MinorTickStrokeThickness = 1;
        this.MinorTickBrush = "#79797a";
        this.TickStartExtent = 0.6;
        this.TickEndExtent = 0.65;
        this.TickStrokeThickness = 2;
        this.TickBrush = "#79797a";

        // setting extent of gauge scale
        this.ScaleStartAngle = 120;
        this.ScaleEndAngle = 60;
        this.ScaleBrush = "#d6d6d6";
        this.ScaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted;
        this.ScaleSweepDirection = SweepDirection.Clockwise;
        this.ScaleEndExtent = 0.57;
        this.ScaleStartExtent = 0.5;

        // setting appearance of backing dial
        this.BackingBrush = "#fcfcfc";
        this.BackingOutline = "#d6d6d6";
        this.BackingStrokeThickness = 5;
        this.BackingShape = RadialGaugeBackingShape.Circular;

        GaugeRangeInfo range1 = new GaugeRangeInfo()
        {
            Brush = "#F86232",
            Outline = "F86232",
            StartValue = 5,
            EndValue = 15,
            InnerStartExtent = 0.5,
            InnerEndExtent = 0.5,
            OuterStartExtent = 0.57,
            OuterEndExtent = 0.57
        };

        GaugeRangeInfo range2 = new GaugeRangeInfo()
        {
            Brush = "#DC3F76",
            Outline = "DC3F76",
            StartValue = 15,
            EndValue = 35,
            InnerStartExtent = 0.5,
            InnerEndExtent = 0.5,
            OuterStartExtent = 0.57,
            OuterEndExtent = 0.57
        };

        GaugeRangeInfo range3 = new GaugeRangeInfo()
        {
            Brush = "#7446B9",
            Outline = "7446B9",
            StartValue = 35,
            EndValue = 45,
            InnerStartExtent = 0.5,
            InnerEndExtent = 0.5,
            OuterStartExtent = 0.57,
            OuterEndExtent = 0.57
        };

        RangeInfo.Clear();
        RangeInfo.Add(range1);
        RangeInfo.Add(range2);
        RangeInfo.Add(range3);
    }

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

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

@using IgniteUI.Blazor.Controls
razor

モジュールの要件

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

// in Program.cs file

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

使用方法

以下のコードは針およびスケールで 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>
razor

バッキング

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

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

バッキングは、円形またはフィットにできます。円形の場合は 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>
razor

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

    <div class="container vertical">
        <div class="container vertical">
            <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"
                         ScaleBrush="#DDDDDD"

                         MinimumValue="0"
                         MaximumValue="80"
                         Value="50"
                         Interval="10">
            </IgbRadialGauge>
        </div>
    </div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

スケール

スケールは視覚要素で、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>
razor

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbRadialGauge Height="100%" Width="100%"
                     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>
    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

ラベルとタイトル

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

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

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbRadialGauge Height="100%" Width="100%"

                     ScaleStartAngle="135"
                     ScaleEndAngle="45"
                     ScaleBrush="#DDDDDD"
                     TitleDisplaysValue=true
                     SubtitleText="MPH"
                     MinimumValue="0"
                     MaximumValue="80"
                     Value="50"
                     Interval="10">
        </IgbRadialGauge>
    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

タイトルとサブタイトル

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

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

<IgbRadialGauge
  TitleText="Global Sales"
  SubTitleText="2024">
</IgbRadialGauge>
razor

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

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadialGaugeModule),
                typeof(IgbSwitchModule),
                typeof(IgbSliderModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container sample center">
    <div class="options horizontal">
        <label class="options-label">Optical Scaling: </label>
        <label class="options-label">
        <input type="checkbox" id="checkbox1" checked="true" @onchange="ToggleOpticalScaling" /> Resize Gauge: </label>
        <input class="options-slider" id="slider" type="range" min="20" max="100" step="10" value="100" @onchange="OnGaugeSizeChanged" />

    </div>
    <div class="container vertical">

        <IgbRadialGauge @ref=gauge1 Height="@gaugeHeight" Width="@gaugeWidth"
                        OpticalScalingEnabled=@OpticalScalingToggle
                        OpticalScalingSize="500"
                        SubtitleText="MPH"
                        TitleDisplaysValue=true
                        MinimumValue="0"
                        MaximumValue="80"
                        Value="50"
                        Interval="10">
        </IgbRadialGauge>
    </div>
</div>

@code {
    
    private IgbRadialGauge gauge1 { get; set; }
    private IgbSlider slider1 { get; set; }
    private bool OpticalScalingToggle { get; set; } = true;
    private string gaugeWidth { get; set; } = "100%";
    private string gaugeHeight { get; set; } = "100%";

    private void ToggleOpticalScaling(ChangeEventArgs e)
    {
        this.OpticalScalingToggle = (bool)e.Value;
    }

    private void OnGaugeSizeChanged(ChangeEventArgs e)
    {
        if (e != null)
        {
            gaugeWidth = e.Value.ToString() + "%";
            gaugeHeight = e.Value.ToString() + "%";
        }
    }
}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css

目盛

目盛は、ラジアルゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 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>
razor

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <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>
    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

範囲

範囲に 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>
razor

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbRadialGauge Height="100%" Width="100%"
                     MinimumValue="0" Value="80"
                     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>
    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

針

ゲージ針は、ゲージの設定値を示す視覚要素です。針は、あらかじめ定義されたいくつかの図形の中から選択でき、ピボット図形をゲージの中心に配置できます。またピボット図形は、事前に定義された図形の 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>
razor

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <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>
    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

針のハイライト

ラジアルゲージを変更して、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>
razor

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class GaugeRangeInfo
    {
        public string Name { get; set; }
        public string Brush { get; set; }
        public string Outline { get; set; }
        public double StartValue { get; set; }
        public double EndValue { get; set; }
        public double InnerStartExtent { get; set; }
        public double InnerEndExtent { get; set; }
        public double OuterStartExtent { get; set; }
        public double OuterEndExtent { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbRadialGauge Height="100%" 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>
        </IgbRadialGauge>

    </div>
</div>

@code {
    

}razor

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css

まとめ

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

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

API リファレンス

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

その他のリソース

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

Blazor ラジアル ゲージの概要

Blazor ラジアル ゲージの例