Resumen de Blazor Medidor lineal

El componente de medidor lineal Ignite UI for Blazor permite visualizar datos en forma de medidor lineal. Proporciona IgbLinearGauge una vista simple y concisa de un valor comparado con una escala y uno o más rangos. Admite una escala, un conjunto de marcas de verificación y un conjunto de etiquetas. El componente también tiene un soporte incorporado para transiciones animadas. Esta animación es fácilmente personalizable configurando la TransitionDuration propiedad. Las características del componente de calibre lineal incluyen orientación y dirección configurables, elementos visuales configurables como la aguja, y más.

Blazor Linear Gauge Example

El siguiente ejemplo demuestra cómo configurar varias propiedades en el mismo IgbLinearGauge puede transformarlo en un calibre lineal completamente diferente.

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

El IgbLinearGauge requiere los siguientes módulos:

// in Program.cs file

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

Usage

El siguiente código demuestra cómo crear un medidor lineal que contiene una aguja y tres rangos comparativos en la escala.

<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

Esta es la medida principal que muestra el componente de calibre lineal y se visualiza como una barra o puede personalizarla para que muestre casi cualquier forma, como se muestra a continuación.

<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

El calibre lineal se puede modificar para mostrar una segunda aguja. Esto hará que la aguja Value principal aparezca con una opacidad más baja. Para habilitar esto, primero establezca HighlightValueDisplayMode en Superposición y, a continuación, aplique 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

Los rangos son elementos visuales que resaltan un rango específico de valores en una escala. Su propósito es comunicar visualmente el estado cualitativo de la barra de medición de desempeño, ilustrando al mismo tiempo el grado en que se encuentra dentro de ese estado.

<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

Las marcas sirven como división visual de la escala en intervalos para aumentar la legibilidad del calibre lineal.

Marcas de graduación principales: las marcas de graduación principales se utilizan como delimitadores principales en la escala. La frecuencia con la que aparecen, su extensión y estilo se pueden controlar estableciendo sus propiedades correspondientes.

Marcas de graduación menores: las marcas de graduación menores representan marcas de graduación auxiliares, que pueden usarse para mejorar aún más la legibilidad de la escala y se pueden personalizar de manera similar a las principales.

 <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

Las etiquetas indican las medidas de la báscula.

<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

El elemento de respaldo representa el fondo y el borde del componente de calibre lineal. Siempre es el primer elemento representado y el resto de elementos, como etiquetas y marcas, se superponen encima.

<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

La escala es un elemento visual que resalta toda la gama de valores del calibre lineal. Puedes personalizar la apariencia y la forma de la escala. También se puede invertir (usando la propiedad IsScaleInverted) y todas las etiquetas se representarán de derecha a izquierda en lugar de de izquierda a derecha.

<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

Para su comodidad, todos los fragmentos de código anteriores se combinan en un bloque de código a continuación que puede copiar fácilmente a su proyecto y ver el medidor lineal con todas las funciones y elementos visuales habilitados.

<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

La siguiente es una lista de miembros de API mencionados en las secciones anteriores:

• IgbLinearGauge
• IgbLinearGraphRange

Additional Resources

Puede encontrar más información sobre otros tipos de medidores en estos temas:

• Gráfico de viñetas
• Medidor radial