Blazor 선형 계기 개요

Ignite UI for Blazor 하면 선형 게이지 형태로 데이터를 시각화할 수 있습니다. IgbLinearGauge는 값과 스케일 및 하나 이상의 범위를 비교한 간단하고 간결한 뷰를 제공합니다. 하나의 스케일, 하나의 눈금 표시 세트 및 하나의 레이블 세트를 지원합니다. 이 구성 요소에는 애니메이션 전환에 대한 기본 제공 지원도 있습니다. 이 애니메이션은 TransitionDuration 속성을 설정하여 쉽게 사용자 정의할 수 있습니다. 선형 게이지 구성 요소의 기능에는 구성 가능한 방향 및 방향, 바늘과 같은 구성 가능한 시각적 요소 등이 있습니다.

Blazor Linear Gauge Example

다음 샘플은 동일한 IgbLinearGauge에 여러 속성을 설정하여 이를 완전히 다른 선형 게이지로 변환하는 방법을 보여줍니다.

EXAMPLE

MODULES

DATA

RAZOR

CSS

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(IgbLinearGaugeModule));
            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>
    </div>
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
                     TransitionDuration="@TransitionDuration"
                     MinimumValue=@MinimumValue
                     MaximumValue=@MaximumValue
                     Value=@Value
                     Interval=@Interval
                     LabelInterval=@LabelInterval
                     LabelExtent=@LabelExtent
                     IsNeedleDraggingEnabled=@IsNeedleDraggingEnabled
                     NeedleShape=@NeedleShape
                     NeedleBrush=@NeedleBrush
                     NeedleOutline=@NeedleOutline
                     NeedleStrokeThickness=@NeedleStrokeThickness
                     NeedleOuterExtent=@NeedleOuterExtent
                     NeedleInnerExtent=@NeedleInnerExtent
                     MinorTickCount=@MinorTickCount
                     MinorTickEndExtent=@MinorTickEndExtent
                     MinorTickStartExtent=@MinorTickStartExtent
                     MinorTickStrokeThickness=@MinorTickStrokeThickness
                     TickStartExtent=@TickStartExtent
                     TickEndExtent=@TickEndExtent
                     TickStrokeThickness=@TickStrokeThickness
                     ScaleStrokeThickness=@ScaleStrokeThickness
                     ScaleBrush=@ScaleBrush
                     ScaleOutline=@ScaleOutline
                     ScaleInnerExtent=@ScaleInnerExtent
                     ScaleOuterExtent=@ScaleOuterExtent
                     ScaleStartExtent=@ScaleStartExtent
                     ScaleEndExtent=@ScaleEndExtent
                     BackingBrush=@BackingBrush
                     BackingOutline=@BackingOutline
                     BackingStrokeThickness=@BackingStrokeThickness>
            @for (int i = 0; i < RangeInfo.Count; i++)
            {
                GaugeRangeInfo info = RangeInfo[i];
                <IgbLinearGraphRange StartValue=info.StartValue
                                  EndValue=info.EndValue
                                  InnerStartExtent=info.InnerStartExtent
                                  InnerEndExtent=info.InnerEndExtent
                                  OuterStartExtent=info.OuterStartExtent
                                  OuterEndExtent=info.OuterEndExtent
                                  Brush="@info.Brush"
                                  Outline="@info.Outline">
                </IgbLinearGraphRange>
            }
        </IgbLinearGauge>
    </div>
</div>

@code {

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

    private double LabelInterval;
    private double LabelExtent;

    private bool IsNeedleDraggingEnabled;
    private LinearGraphNeedleShape NeedleShape;
    private string NeedleBrush;
    private string NeedleOutline;
    private double NeedleStrokeThickness;
    private double NeedleOuterExtent;
    private double NeedleInnerExtent;

    private double MinorTickCount;
    private double MinorTickEndExtent;
    private double MinorTickStartExtent;
    private double MinorTickStrokeThickness;
    private double TickStartExtent;
    private double TickEndExtent;
    private double TickStrokeThickness;

    private double ScaleStrokeThickness;
    private string ScaleBrush;
    private string ScaleOutline;
    private double ScaleInnerExtent;
    private double ScaleOuterExtent;
    private double ScaleStartExtent;
    private double ScaleEndExtent;

    private string BackingBrush;
    private string BackingOutline;
    private double BackingStrokeThickness;

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

    private bool ShouldAnimate = false;

    protected override void OnInitialized()
    {

        this.MinimumValue = 0;
        this.MaximumValue = 100;
        this.Value = 50;
        this.Interval = 10;
        this.LabelInterval = 10;
        this.LabelExtent = 0.0;
        this.MinorTickEndExtent = 0.10;
        this.MinorTickStartExtent = 0.20;
        this.TickStartExtent = 0.25;
        this.TickEndExtent = 0.05;
        this.TickStrokeThickness = 2;
        this.NeedleShape = LinearGraphNeedleShape.Needle;
        this.NeedleBrush = "#79797A";
        this.NeedleOutline = "#79797A";
        this.ScaleStrokeThickness = 0;
        this.ScaleBrush = "#FFFFFF";
        this.ScaleOutline = "#D3D3D3";
        this.BackingBrush = "#FFFFFF";
        this.BackingOutline = "#D1D1D1";
        this.BackingStrokeThickness = 0;

        this.RangeInfo = new System.Collections.ObjectModel.ObservableCollection<GaugeRangeInfo>();

        this.onAnimateToGauge3();
    }

    private void onAnimateToGauge1()
    {
        if (ShouldAnimate)
        {
            this.TransitionDuration = 1000;
        }
        // linear gauge requires settings for these properties:
        this.MinimumValue = 0;
        this.MaximumValue = 80;
        this.Value = 60;
        this.Interval = 20;

        // setting custom appearance of labels
        this.LabelInterval = 20;
        this.LabelExtent = 0.0;

        // setting custom appearance of needle
        this.IsNeedleDraggingEnabled = true;
        this.NeedleShape = LinearGraphNeedleShape.Trapezoid;
        this.NeedleBrush = "#79797a";
        this.NeedleOutline = "#ffffffff";
        this.NeedleStrokeThickness = 1;
        this.NeedleOuterExtent = 0.9;
        this.NeedleInnerExtent = 0.3;

        // setting custom appearance of major/minor ticks
        this.MinorTickCount = 5;
        this.MinorTickEndExtent = 0.10;
        this.MinorTickStartExtent = 0.20;
        this.MinorTickStrokeThickness = 1;
        this.TickStartExtent = 0.25;
        this.TickEndExtent = 0.05;
        this.TickStrokeThickness = 2;

        // setting extent of gauge scale
        this.ScaleStrokeThickness = 0;
        this.ScaleBrush = "#ffffff";
        this.ScaleOutline = "#dbdbdb";
        this.ScaleInnerExtent = 0.075;
        this.ScaleOuterExtent = 0.85;
        this.ScaleStartExtent = 0.05;
        this.ScaleEndExtent = 0.95;

        // setting appearance of backing fill and outline
        this.BackingBrush = "#ffffff";
        this.BackingOutline = "#d1d1d1";
        this.BackingStrokeThickness = 0;

        this.RangeInfo.Clear();

        List<string> colors = new List<string>() { "#A4BD29", "#F86232" };
        double[] startValues = { 0, 40 };
        double[] endValues = { 40, 80 };

        for (int i = 0; i < colors.Count; i++)
        {
            GaugeRangeInfo info = new GaugeRangeInfo()
            {
                StartValue = startValues[i],
                EndValue = endValues[i],
                Brush = colors[i],
                Outline = colors[i],
                InnerStartExtent = 0.075,
                InnerEndExtent = 0.075,
                OuterStartExtent = 0.65,
                OuterEndExtent = 0.65
            };

            this.RangeInfo.Add(info);
        }

        this.ShouldAnimate = true;
    }

    private void onAnimateToGauge2()
    {
        if (ShouldAnimate)
        {
            this.TransitionDuration = 1000;
        }
        // linear gauge requires settings for these properties:
        this.MinimumValue = 100;
        this.MaximumValue = 200;
        this.Value = 150;
        this.Interval = 20;

        // setting custom appearance of labels
        this.LabelInterval = 20;
        this.LabelExtent = 0.0;

        // setting custom appearance of needle
        this.IsNeedleDraggingEnabled = true;
        this.NeedleShape = LinearGraphNeedleShape.Triangle;
        this.NeedleBrush = "#79797a";
        this.NeedleOutline = "#ffffffff";
        this.NeedleStrokeThickness = 1;
        this.NeedleOuterExtent = 0.9;
        this.NeedleInnerExtent = 0.3;

        // setting custom appearance of major/minor ticks
        this.MinorTickCount = 4;
        this.MinorTickEndExtent = 0.10;
        this.MinorTickStartExtent = 0.20;
        this.MinorTickStrokeThickness = 1;
        this.TickStartExtent = 0.25;
        this.TickEndExtent = 0.05;
        this.TickStrokeThickness = 2;

        // setting extent of gauge scale
        this.ScaleStrokeThickness = 0;
        this.ScaleBrush = "#ffffff";
        this.ScaleOutline = "#dbdbdb";
        this.ScaleInnerExtent = 0.075;
        this.ScaleOuterExtent = 0.85;
        this.ScaleStartExtent = 0.05;
        this.ScaleEndExtent = 0.95;

        // setting appearance of backing fill and outline
        this.BackingBrush = "#ffffff";
        this.BackingOutline = "#d1d1d1";
        this.BackingStrokeThickness = 0;

        this.RangeInfo.Clear();

        List<string> colors = new List<string>() { "#0078C8","#0099FF","#21A7FF","#45B9FF" };
        double[] startValues = { 100, 125, 150, 175 };
        double[] endValues = { 125, 150, 175, 200 };

        for (int i = 0; i < colors.Count; i++)
        {
            GaugeRangeInfo info = new GaugeRangeInfo()
            {
                StartValue = startValues[i],
                EndValue = endValues[i],
                Brush = colors[i],
                Outline = colors[i],
                InnerStartExtent = 0.075,
                InnerEndExtent = 0.075,
                OuterStartExtent = 0.65,
                OuterEndExtent = 0.65
            };

            this.RangeInfo.Add(info);
        }

        this.ShouldAnimate = true;
    }

    private void onAnimateToGauge3()
    {
        if (ShouldAnimate)
        {
            this.TransitionDuration = 1000;
        }
        // linear gauge requires settings for these properties:
        this.MinimumValue = 0;
        this.MaximumValue = 100;
        this.Value = 50;
        this.Interval = 10;

        // setting custom appearance of labels
        this.LabelInterval = 10;
        this.LabelExtent = 0.0;

        // setting custom appearance of needle
        this.IsNeedleDraggingEnabled = true;
        this.NeedleShape = LinearGraphNeedleShape.Needle;
        this.NeedleBrush = "#79797a";
        this.NeedleOutline = "#ffffffff";
        this.NeedleStrokeThickness = 1;
        this.NeedleOuterExtent = 0.9;
        this.NeedleInnerExtent = 0.3;

        // setting custom appearance of major/minor ticks
        this.MinorTickCount = 5;
        this.MinorTickEndExtent = 0.10;
        this.MinorTickStartExtent = 0.20;
        this.MinorTickStrokeThickness = 1;
        this.TickStartExtent = 0.25;
        this.TickEndExtent = 0.05;
        this.TickStrokeThickness = 2;

        // setting extent of gauge scale
        this.ScaleStrokeThickness = 0;
        this.ScaleBrush = "#ffffff";
        this.ScaleOutline = "#dbdbdb";
        this.ScaleInnerExtent = 0.075;
        this.ScaleOuterExtent = 0.85;
        this.ScaleStartExtent = 0.05;
        this.ScaleEndExtent = 0.95;

        // setting appearance of backing fill and outline
        this.BackingBrush = "#ffffff";
        this.BackingOutline = "#d1d1d1";
        this.BackingStrokeThickness = 0;

        this.RangeInfo.Clear();

        List<string> colors = new List<string>() { "#9FB328", "#438C47", "#3F51B5" };
        double[] startValues = { 0, 30, 70 };
        double[] endValues = { 30, 70, 100 };

        for (int i = 0; i < colors.Count; i++)
        {
            GaugeRangeInfo info = new GaugeRangeInfo()
            {
                StartValue = startValues[i],
                EndValue = endValues[i],
                Brush = colors[i],
                Outline = colors[i],
                InnerStartExtent = 0.075,
                InnerEndExtent = 0.075,
                OuterStartExtent = 0.95,
                OuterEndExtent = 0.95
            };

            this.RangeInfo.Add(info);
        }

        this.ShouldAnimate = true;
    }
}razorコピー

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

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Component Modules

​IgbLinearGauge 에는 다음 모듈이 필요합니다.

// in Program.cs file

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

Usage

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

<IgbLinearGauge Height="80px" Width="100%"
        MinimumValue="5"
        MaximumValue="55"
        Value="43" >
    <IgbLinearGraphRange StartValue="0"
            EndValue="15"
            Brush="red" >
    </IgbLinearGraphRange>
     <IgbLinearGraphRange StartValue="15"
            EndValue="30"
            Brush="yellow">
    <IgbLinearGraphRange StartValue="30"
            EndValue="55"
            Brush="green">
    </IgbLinearGraphRange>
</IgbLinearGauge>
razor

Needle

이는 선형 게이지 구성 요소에 의해 표시되는 기본 측정값이며 막대로 시각화되거나 아래에 설명된 대로 거의 모든 모양을 표시하도록 사용자 정의할 수 있습니다.

<IgbLinearGauge Height="80px" Width="100%"
    MinimumValue="0" Value="50"
    MaximumValue="100" Interval="10"
    IsNeedleDraggingEnabled="true"
    NeedleShape="LinearGraphNeedleShape.Custom"
    NeedleBrush="DodgerBlue"
    NeedleOutline="DodgerBlue"
    NeedleStrokeThickness="1"
    NeedleBreadth="15"
    NeedleInnerExtent="0.35"
    NeedleOuterExtent="0.65"
    NeedleOuterPointExtent="0.8"
    NeedleInnerPointExtent="0.325"
    NeedleInnerPointWidth="0"
    NeedleOuterPointWidth="0.3"
    NeedleInnerBaseWidth="0"
    NeedleOuterBaseWidth="0.07">
</IgbLinearGauge>
razor

EXAMPLE

MODULES

RAZOR

CSS

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(IgbLinearGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
                     MinimumValue="0" Value="50"
                     MaximumValue="100" Interval="10"
                     IsNeedleDraggingEnabled="true"
                     NeedleShape="LinearGraphNeedleShape.Custom"
                     NeedleBrush="DodgerBlue"
                     NeedleOutline="DodgerBlue"
                     NeedleStrokeThickness="1"
                     NeedleBreadth="15"
                     NeedleInnerExtent="0.35"
                     NeedleOuterExtent="0.65"
                     NeedleOuterPointExtent="0.8"
                     NeedleInnerPointExtent="0.325"
                     NeedleInnerPointWidth="0"
                     NeedleOuterPointWidth="0.3"
                     NeedleInnerBaseWidth="0"
                     NeedleOuterBaseWidth="0.07">
        </IgbLinearGauge>
    </div>
</div>

@code {
    

}razorコピー

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

Highlight Needle

선형 게이지는 두 번째 바늘을 표시하도록 수정할 수 있습니다. 이렇게 하면 주 바늘이 Value 더 낮은 불투명도로 나타납니다. 이 기능을 사용하려면 먼저 오버레이로 설정한 HighlightValueDisplayMode 다음 a HighlightValue를 적용합니다.

<IgbLinearGauge Height="80px" Width="100%"
    MinimumValue="0" 
    MaximumValue="100" 
    Value="75"
    Interval="10"
    LabelInterval="10"
    LabelExtent="0.025"
    LabelsPreTerminal="0"
    LabelsPostInitial="0"
    NeedleBrush="Blue"
    HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
    HighlightValue=25
    IsHighlightNeedleDraggingEnabled=true>
</IgbLinearGauge>
razor

EXAMPLE

MODULES

RAZOR

CSS

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(IgbLinearGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
            MinimumValue="0"
            MaximumValue="100"
            Value="75"
            Interval="10"
            LabelInterval="10"
            LabelExtent="0.025"
            LabelsPreTerminal="0"
            LabelsPostInitial="0"
            NeedleBrush="Blue"
            HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
            HighlightValue=25
            IsHighlightNeedleDraggingEnabled=true>
        </IgbLinearGauge>
    </div>
</div>

@code {
    

}razorコピー

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

Ranges

범위는 눈금에서 지정된 값 범위를 강조 표시하는 시각적 요소입니다. 그 목적은 성능 막대 측정값의 질적 상태를 시각적으로 전달하는 동시에 해당 상태 내에 있는 정도를 보여주는 것입니다.

<IgbLinearGauge Height="80px" Width="100%"
        MinimumValue="0" Value="50"
        MaximumValue="100" Interval="10"
        RangeBrushes="#A4BD29, #F86232"
        RangeOutlines="#A4BD29, #F86232">
    <IgbLinearGraphRange StartValue="0"
            EndValue="50"
            InnerStartExtent="0.075"
            InnerEndExtent="0.075"
            OuterStartExtent="0.25"
            OuterEndExtent="0.4">
    </IgbLinearGraphRange>
    <IgbLinearGraphRange StartValue="50"
            EndValue="100"
            InnerStartExtent="0.075"
            InnerEndExtent="0.075"
            OuterStartExtent="0.4"
            OuterEndExtent="0.55">
    </IgbLinearGraphRange>
</IgbLinearGauge>
razor

EXAMPLE

MODULES

RAZOR

CSS

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(IgbLinearGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
                     MinimumValue="0" Value="50"
                     MaximumValue="100" Interval="10"
                     RangeBrushes="#A4BD29, #F86232"
                     RangeOutlines="#A4BD29, #F86232">
            <IgbLinearGraphRange StartValue="0"
                              EndValue="50"
                              InnerStartExtent="0.075"
                              InnerEndExtent="0.075"
                              OuterStartExtent="0.25"
                              OuterEndExtent="0.4">
            </IgbLinearGraphRange>
            <IgbLinearGraphRange StartValue="50"
                              EndValue="100"
                              InnerStartExtent="0.075"
                              InnerEndExtent="0.075"
                              OuterStartExtent="0.4"
                              OuterEndExtent="0.55">
            </IgbLinearGraphRange>
        </IgbLinearGauge>
    </div>
</div>

@code {
    

}razorコピー

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

Tick Marks

눈금 표시는 선형 게이지의 가독성을 높이기 위해 눈금을 간격으로 시각적으로 나누는 역할을 합니다.

주요 눈금 표시 – 주요 눈금 표시는 눈금의 기본 구분 기호로 사용됩니다. 나타나는 빈도, 범위 및 스타일은 해당 속성을 설정하여 제어할 수 있습니다.

보조 눈금 표시 – 보조 눈금 표시는 눈금의 가독성을 추가로 향상시키는 데 사용될 수 있고 주요 눈금과 유사한 방식으로 사용자 정의할 수 있는 보조 눈금 표시를 나타냅니다.

 <IgbLinearGauge Height="80px" Width="100%"
    MinimumValue="0" Value="50"
    MaximumValue="100" Interval="10"
    TickBrush="DodgerBlue"
    TicksPreTerminal="0"
    TicksPostInitial="0"
    TickStrokeThickness="2"
    TickStartExtent="0.25"
    TickEndExtent="0.05"
    MinorTickCount="4"
    MinorTickBrush="DarkViolet"
    MinorTickEndExtent="0.05"
    MinorTickStartExtent="0.15"
    MinorTickStrokeThickness="1">
</IgbLinearGauge>
razor

EXAMPLE

MODULES

RAZOR

CSS

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(IgbLinearGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
                     MinimumValue="0" Value="50"
                     MaximumValue="100" Interval="10"

                     TickBrush="DodgerBlue"
                     TicksPreTerminal="0"
                     TicksPostInitial="0"
                     TickStrokeThickness="2"
                     TickStartExtent="0.25"
                     TickEndExtent="0.05"

                     MinorTickCount="4"
                     MinorTickBrush="DarkViolet"
                     MinorTickEndExtent="0.05"
                     MinorTickStartExtent="0.15"
                     MinorTickStrokeThickness="1">
        </IgbLinearGauge>
    </div>
</div>

@code {
    

}razorコピー

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

Labels

레이블은 척도의 측정값을 나타냅니다.

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

EXAMPLE

MODULES

RAZOR

CSS

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(IgbLinearGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
                     MinimumValue="0" Value="50"
                     MaximumValue="100" Interval="10"
                     LabelInterval="10"
                     LabelExtent="0.025"
                     LabelsPreTerminal="0"
                     LabelsPostInitial="0"
                     FontBrush="DodgerBlue"
                     Font="11px Verdana">
        </IgbLinearGauge>
    </div>
</div>

@code {
    

}razorコピー

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

Backing

뒷면 요소는 선형 게이지 구성 요소의 배경과 테두리를 나타냅니다. 이는 항상 렌더링되는 첫 번째 요소이며 레이블 및 눈금 표시와 같은 나머지 모든 요소는 그 위에 오버레이됩니다.

<IgbLinearGauge Height="80px" Width="100%"
    MinimumValue="0"
    MaximumValue="100"
    Value="50"
    Interval="10"
    BackingBrush="#BDDCFC"
    BackingOutline="DodgerBlue"
    BackingStrokeThickness="4"
    BackingInnerExtent="0"
    BackingOuterExtent="1">
</IgbLinearGauge>
razor

EXAMPLE

MODULES

RAZOR

CSS

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(IgbLinearGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
                     MinimumValue="0"
                     MaximumValue="100"
                     Value="50"
                     Interval="10"
                     BackingBrush="#BDDCFC"
                     BackingOutline="DodgerBlue"
                     BackingStrokeThickness="4"
                     BackingInnerExtent="0"
                     BackingOuterExtent="1">
        </IgbLinearGauge>
    </div>
</div>

@code {
    

}razorコピー

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

Scale

눈금은 선형 게이지의 전체 값 범위를 강조하는 시각적 요소입니다. 눈금의 모양과 모양을 사용자 정의할 수 있습니다. IsScaleInverted 속성을 사용하여 반전할 수도 있으며 모든 레이블은 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 렌더링됩니다.

<IgbLinearGauge Height="80px" Width="100%"
    MinimumValue="0" Value="50"
    MaximumValue="100" Interval="10"
    IsScaleInverted="false"
    ScaleBrush="DodgerBlue"
    ScaleOutline="Red"
    ScaleStrokeThickness="2"
    ScaleInnerExtent="0.05"
    ScaleOuterExtent="0.65"
    ScaleStartExtent="0.05"
    ScaleEndExtent="0.95">
</IgbLinearGauge>
razor

EXAMPLE

MODULES

RAZOR

CSS

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(IgbLinearGaugeModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        <IgbLinearGauge Height="80px" Width="100%"
                     MinimumValue="0" Value="50"
                     MaximumValue="100" Interval="10"
                     IsScaleInverted="false"
                     ScaleBrush="DodgerBlue"
                     ScaleOutline="Red"
                     ScaleStrokeThickness="2"
                     ScaleInnerExtent="0.05"
                     ScaleOuterExtent="0.65"
                     ScaleStartExtent="0.05"
                     ScaleEndExtent="0.95">
        </IgbLinearGauge>
    </div>
</div>

@code {
    

}razorコピー

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

Summary

편의를 위해 위의 모든 코드 조각은 아래의 하나의 코드 블록으로 결합되어 프로젝트에 쉽게 복사하고 모든 기능과 시각적 개체가 활성화된 선형 게이지를 볼 수 있습니다.

<IgbLinearGauge Height="80px" Width="100%"
        MinimumValue="0"
        MaximumValue="100"

        LabelInterval="10"
        LabelExtent="0.025"
        LabelsPreTerminal="0"
        LabelsPostInitial="0"
        FontBrush="DodgerBlue"
        Font="11px Verdana"

        Interval="10"
        TickBrush="DodgerBlue"
        TicksPreTerminal="0"
        TicksPostInitial="0"
        TickStrokeThickness="2"
        TickStartExtent="0.25"
        TickEndExtent="0.05"

        MinorTickCount="4"
        MinorTickBrush="DarkViolet"
        MinorTickEndExtent="0.05"
        MinorTickStartExtent="0.15"
        MinorTickStrokeThickness="1"
        Value="50"
        MaximumValue="100" Interval="10"
        IsNeedleDraggingEnabled="true"
        NeedleShape="LinearGraphNeedleShape.Custom"
        NeedleBrush="DodgerBlue"
        NeedleOutline="DodgerBlue"
        NeedleStrokeThickness="1"
        NeedleBreadth="15"
        NeedleInnerExtent="0.35"
        NeedleOuterExtent="0.65"
        NeedleOuterPointExtent="0.8"
        NeedleInnerPointExtent="0.325"
        NeedleInnerPointWidth="0"
        NeedleOuterPointWidth="0.3"
        NeedleInnerBaseWidth="0"
        NeedleOuterBaseWidth="0.07"

        IsScaleInverted="false"
        ScaleBrush="DodgerBlue"
        ScaleOutline="Red"
        ScaleStrokeThickness="2"
        ScaleInnerExtent="0.05"
        ScaleOuterExtent="0.65"
        ScaleStartExtent="0.05"
        ScaleEndExtent="0.95"

        BackingBrush="#BDDCFC"
        BackingOutline="DodgerBlue"
        BackingStrokeThickness="4"
        BackingInnerExtent="0"
        BackingOuterExtent="1"

        RangeBrushes="#A4BD29, #F86232"
        RangeOutlines="#A4BD29, #F86232">
    <IgbLinearGraphRange StartValue="0"
                EndValue="50"
                InnerStartExtent="0.075"
                InnerEndExtent="0.075"
                OuterStartExtent="0.25"
                OuterEndExtent="0.4">
    </IgbLinearGraphRange>
    <IgbLinearGraphRange StartValue="50"
                EndValue="100"
                InnerStartExtent="0.075"
                InnerEndExtent="0.075"
                OuterStartExtent="0.4"
                OuterEndExtent="0.55">
    </IgbLinearGraphRange>
</IgbLinearGauge>
razor

API References

다음은 위 섹션에서 언급된 API 멤버 목록입니다.

• IgbLinearGauge
• IgbLinearGraphRange

Additional Resources

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

• 불릿 그래프
• 방사형 게이지