Resumen de Blazor Medidor radial

    El componente de calibre radial Blazor proporciona una serie de elementos visuales, como una aguja, marcas de graduación, rangos y etiquetas, para crear una forma y una escala predefinidas. También IgbRadialGauge tiene soporte incorporado para transiciones animadas. Esta animación es fácilmente personalizable configurando la TransitionDuration propiedad.

    Ejemplo Medidor radial Blazor

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Consulte estos temas sobre cómo agregar el paquete IgniteUI.Blazor.

    Luego puede comenzar a implementar el control agregando los siguientes espacios de nombres:

    @using IgniteUI.Blazor.Controls
    razor

    Módulos de componentes

    El IgbRadialGauge requiere los siguientes módulos:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbRadialGaugeModule));
    razor

    Uso

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

    <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

    Apoyo

    El componente de calibre radial viene con una forma de respaldo dibujada detrás de la escala que actúa como fondo para el calibre radial.

    El elemento de respaldo representa el fondo y el borde del componente de calibre radial. Siempre es el primer elemento renderizado y el resto de elementos, como la aguja, las etiquetas y las marcas, se superponen encima.

    El respaldo puede ser circular o empotrado. Una forma circular crea un indicador circular de 360 grados, mientras que una forma ajustada crea un segmento de arco relleno que abarca las propiedades ScaleStartAngle y ScaleEndAngle. Esto se puede configurar configurando la propiedad 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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Escala

    La escala es un elemento visual que resalta la gama completa de valores en el indicador que se pueden crear proporcionando valores MinimumValue y MaximumValue. Junto con el respaldo, define la forma general del calibre. Las propiedades ScaleStartAngle y ScaleEndAngle definen los límites del arco de la escala. Mientras que la propiedad ScaleSweepDirection especifica si la escala barre en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj. Puede personalizar la apariencia de la escala configurando las propiedades ScaleBrush, ScaleStartExtent y 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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Etiquetas y títulos

    Las etiquetas de calibre radial son elementos visuales que muestran valores numéricos en un intervalo específico entre los valores de las propiedades MinimumValue y MaximumValue. Puede colocar etiquetas estableciendo la propiedad LabelExtent en una fracción, donde 0 representa el centro del calibre y 1 representa la extensión exterior del respaldo del calibre. Además, puede personalizar las etiquetas configurando varias propiedades de estilo, como FontBrush y Font.

    Cada una de estas etiquetas para la aguja tiene varios atributos de estilo que puede aplicar para cambiar la fuente, el ángulo, el pincel y la distancia desde el centro del medidor, como , 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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Título y subtítulo

    TitleText y SubtitleText las propiedades están disponibles y se pueden usar para mostrar texto personalizado para la aguja. Alternativamente, y SubtitleDisplaysValue, TitleDisplaysValue cuando se establece en true, permitirá mostrar el valor de la aguja y anular TitleText y SubtitleText. Por lo tanto, puede ocupar texto personalizado para el título pero mostrar el valor a través del subtítulo y viceversa.

    Si se muestra la aguja de resaltado, como se explica a continuación, el texto personalizado se puede mostrar a través HighlightLabelText de, de lo contrario HighlightLabelDisplaysValue, se puede habilitar y mostrar su valor.

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

    Escalado óptico

    Las etiquetas y los títulos del medidor radial pueden cambiar su escala. Para habilitar esto, primero establézcalo OpticalScalingEnabled en true. A continuación, puede establecer OpticalScalingSize cuál administra el tamaño en el que las etiquetas tienen un escalado óptico del 100%. Las etiquetas tendrán fuentes más grandes cuando el tamaño del medidor sea mayor. Por ejemplo, las etiquetas tendrán un tamaño de fuente un 200% más grande cuando esta propiedad se establece en 500 y el tamaño del px del medidor se duplica a, por ejemplo. 1000.

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Marcas de verificación

    Las marcas de graduación son líneas finas que irradian desde el centro del calibre radial. Hay dos tipos de marcas: mayores y menores. Las marcas principales se muestran en el Interval entre las propiedades MinimumValue y MaximumValue. Utilice la propiedad MinorTickCount para especificar el número de marcas menores que se muestran entre cada marca mayor. Puede controlar la longitud de las marcas estableciendo una fracción (entre 0 y 1) en las propiedades TickStartExtent, TickEndExtent, MinorTickStartExtent y MinorTickEndExtent.

     <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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Rangos

    Un rango resalta un conjunto de valores continuos vinculados por propiedades MinimumValue y MaximumValue especificadas. Puede agregar varios rangos al calibre radial especificando sus valores inicial y final. Cada rango tiene algunas propiedades de personalización, como Brush y Outline. Alternativamente, puede configurar las propiedades RangeBrushes y RangeOutlines en una lista de colores para los rangos.

    <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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Aguja

    Las agujas de calibre radial son elementos visuales que se utilizan para indicar un valor establecido de calibre. Las agujas están disponibles en una de las varias formas predefinidas. La aguja puede tener forma de pivote, que se coloca en el centro del calibre. La forma de pivote también adopta una de las formas predefinidas. Las formas de pivote que incluyen una superposición o una base pueden tener un pincel de pivote independiente aplicado a la forma.

    Las formas y tapas de agujas admitidas se configuran mediante las propiedades NeedleShape y NeedlePivotShape.

    Puede habilitar un modo interactivo del medidor (usando la propiedad IsNeedleDraggingEnabled) y el usuario final podrá cambiar el valor arrastrando la aguja entre los valores de las propiedades MinimumValue y 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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Aguja de resaltado

    El calibre radial 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="30"
        Interval="10"
        LabelInterval="10"
        LabelExtent="0.65"
        HighlightValue="50"
        HighlightValueDisplayMode=HighlightedValueDisplayMode.Overlay
        HighlightLabelDisplaysValue=true
        HighlightLabelSnapsToNeedlePivot=true
        IsHighlightNeedleDraggingEnabled=true
    </IgbLinearGauge>
    razor

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

    Resumen

    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 radial con todas las funciones y elementos visuales habilitados.

    <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

    Referencias de API

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

    Recursos adicionales

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