Blazor 방사형 게이지 개요

Blazor 방사형 게이지 구성 요소는 미리 정의된 모양과 크기를 만들기 위해 바늘, 눈금, 범위 및 레이블과 같은 여러 시각적 요소를 제공합니다. 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

용법

다음 코드는 바늘과 눈금의 세 가지 비교 범위를 포함하는 방사형 게이지를 만드는 방법을 보여줍니다.

<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 속성 값 사이의 지정된 간격으로 숫자 값을 표시하는 시각적 요소입니다. LabelExtent 속성을 분수로 설정하여 레이블 위치를 지정할 수 있습니다. 여기서 0은 게이지 중심을 나타내고 1은 게이지 뒷면의 외부 범위를 나타냅니다. 또한 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 사용할 수 있으며 둘 다 바늘에 대한 사용자 정의 텍스트를 표시하는 데 사용할 수 있습니다. 또는 and SubtitleDisplaysValue를 TitleDisplaysValue true로 설정하면 바늘의 값을 표시하고 and SubtitleText를 재정의 TitleText 합니다. 따라서 제목에 대한 사용자 정의 텍스트를 사용할 수 있지만 자막을 통해 값을 표시하거나 그 반대의 경우도 마찬가지입니다.

아래 설명과 같이 강조 표시 바늘이 표시되면 다음을 통해 HighlightLabelText 사용자 정의 텍스트를 표시할 수 있으며, 그렇지 않으면 HighlightLabelDisplaysValue 활성화하고 해당 값을 표시할 수 있습니다.

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

옵티컬 스케일링

방사형 게이지의 레이블과 제목은 배율을 변경할 수 있습니다. 이 기능을 사용하려면 먼저 true로 설정합니다 OpticalScalingEnabled. 그런 다음 레이블이 100% 광학 배율을 갖는 크기를 관리하는 항목을 설정할 OpticalScalingSize 수 있습니다. 레이블은 게이지의 크기가 더 클 때 더 큰 글꼴을 갖습니다. 예를 들어, 이 속성이 500으로 설정되고 게이지 px 크기가 예를 들어 두 배가 되면 레이블의 글꼴 크기가 200% 더 커집니다. 1000.

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

눈금 표시

눈금 표시는 방사형 게이지의 중심에서 방사되는 가는 선입니다. 눈금 표시에는 메이저와 마이너의 두 가지 유형이 있습니다. 주요 눈금 표시는 MinimumValue과 MaximumValue 속성 사이의 Interval에 표시됩니다. MinorTickCount 속성을 사용하여 각 주요 눈금 사이에 표시되는 보조 눈금 수를 지정합니다. 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

바늘

방사형 게이지 바늘은 게이지 설정 값을 나타내는 데 사용되는 시각적 요소입니다. 바늘은 미리 정의된 여러 모양 중 하나로 제공됩니다. 바늘은 게이지 중앙에 위치하는 피벗 모양을 가질 수 있습니다. 또한 피벗 모양은 미리 정의된 모양 중 하나를 사용합니다. 오버레이 또는 언더레이를 포함하는 피벗 모양에는 모양에 적용되는 별도의 피벗 브러시가 있을 수 있습니다.

지원되는 바늘 모양과 캡은 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

하이라이트 바늘

방사형 게이지를 수정하여 두 번째 바늘을 표시할 수 있습니다. 이렇게 하면 주 바늘이 Value 더 낮은 불투명도로 나타납니다. 이 기능을 사용하려면 먼저 오버레이로 설정한 HighlightValueDisplayMode 다음 a 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 멤버 목록입니다.

추가 리소스

다음 주제에서 다른 유형의 게이지에 대한 자세한 정보를 찾을 수 있습니다.