Resumen de Blazor Medidor radial

El componente de medidor radial Blazor proporciona varios elementos visuales, como una aguja, marcas de marca, rangos y etiquetas, para crear una forma y escala predefinidas. TambiénIgbRadialGauge tiene soporte integrado para transiciones animadas. Esta animación se puede personalizar fácilmente configurando laTransitionDuration propiedad.

Blazor Radial Gauge Example

El siguiente ejemplo demuestra cómo al establecer múltiples propiedades en la mismaIgbRadialGauge puede transformarla en una muestra radial completamente diferente.

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

Component Modules

RequiereIgbRadialGauge los siguientes módulos:

// in Program.cs file

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

Usage

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>

Backing

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 ajustado. Una forma circular crea un calibre circular de 360 grados, mientras que una forma ajustada crea un segmento de arco relleno que abarca lasScaleStartAngle propiedades y (yScaleEndAngle). Esto se puede establecer estableciendo laBackingShape propiedad.

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

Scale

La escala es un elemento visual que resalta todo el rango de valores en el medidor que se pueden crear mediante la introducciónMinimumValue de valores yMaximumValue. Junto con el respaldo, define la forma general del calibre. LasScaleStartAngle propiedades yScaleEndAngle definen los límites del arco de la escala. Mientras que laScaleSweepDirection propiedad especifica si la escala se desplaza en sentido horario o antihorario. Puedes personalizar la apariencia de la escala ajustandoScaleBrushScaleStartExtent yScaleEndExtent las propiedades.

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

Labels and Titles

Las etiquetas radiales de calibre son elementos visuales que muestran valores numéricos en un intervalo especificado entre los valores de lasMinimumValue propiedades de yMaximumValue. Puedes posicionar las etiquetas estableciendo laLabelExtent propiedad en una fracción, donde 0 representa el centro de calibre y 1 representa la extensión exterior del respaldo de calibre. Además, puedes personalizar etiquetas y establecer varias propiedades de estilo comoFontBrush yFont.

Cada una de estas etiquetas para la aguja tiene varios atributos de estilo que puedes aplicar para cambiar la fuente, el ángulo, el pincel y la distancia respecto al centro del calibre, comoTitleExtent,TitleAngleSubtitleFontSize,HighlightLabelBrush,.

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

Title & Subtitle

TitleTextySubtitleText existen propiedades disponibles, que pueden usarse para mostrar texto personalizado para la aguja. Alternativamente,TitleDisplaysValue ySubtitleDisplaysValue, cuando se configura como verdadero, permitirá mostrar el valor de la aguja y anularTitleText ySubtitleText. Así que puedes 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 más abajo, entonces se puede mostrar texto personalizado a travésHighlightLabelText de ella, de lo contrarioHighlightLabelDisplaysValue activarse y mostrar su valor.

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

Optical Scaling

Las etiquetas y títulos del medidor radial pueden cambiar su escala. Para habilitar esto, primero se poneOpticalScalingEnabled en verdadero. Luego puedes establecerOpticalScalingSize cuál gestiona 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 calibre sea mayor. Por ejemplo, las etiquetas tendrán un tamaño de fuente un 200% mayor cuando esta propiedad está configurada a 500 y el tamaño gauge px se duplica a por ejemplo. 1000.

Tick Marks

Las marcas de marca son líneas finas que irradian desde el centro del manómetro radial. Existen dos tipos de marcas: mayores y menores. Las principales marcas de verificación se muestran en lasInterval propiedades entre yMinimumValueMaximumValue y . Utiliza laMinorTickCount propiedad para especificar el número de marcas menores que se muestran entre cada marca principal. Puedes controlar la longitud de las marcas de verificación estableciendo una fracción (entre 0 y 1) aTickStartExtent,TickEndExtent,MinorTickStartExtent, yMinorTickEndExtent propiedades.

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

Ranges

Un rango resalta un conjunto de valores continuos limitados por propiedades yMinimumValue especificadasMaximumValue. Puedes añadir varios rangos al medidor radial especificando sus valores iniciales y finales. Cada gama tiene algunas propiedades de personalización comoBrush yOutline. Alternativamente, puedes establecerRangeBrushes yRangeOutlines propiedades 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>

Needle

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 las agujas soportadas se fijan usando lasNeedleShape propiedades yNeedlePivotShape.

Puedes activar un modo interactivo del medidor (usandoIsNeedleDraggingEnabled propiedades) y el usuario final podrá cambiar el valor arrastrando la aguja entre los valores deMinimumValue yMaximumValue propiedades.

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

Highlight Needle

El medidor radial puede modificarse para mostrar una segunda aguja. Esto hará que las agujasValue principales tengan una opacidad menor. Para habilitar esto, primero configuraHighlightValueDisplayMode Superposición y luego aplica unHighlightValue.

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

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

API References

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

Additional Resources

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