Descripción general del gráfico Bullet Blazor

El componente de gráfico de viñetas Blazor permite una vista lineal y concisa de las medidas comparadas con una escala.

El componente de gráfico de viñetas Ignite UI for Blazor le brinda la posibilidad de crear presentaciones de datos atractivas, reemplazando los medidores y medidores que se utilizan en los paneles con gráficos de barras simples, claros y directos. Un gráfico de viñetas es una de las formas más efectivas y eficientes de presentar el progreso hacia los objetivos, los rangos buenos/mejores/óptimos, o comparar múltiples mediciones en el menor espacio horizontal o vertical posible.

Blazor Bullet Graph Example

El siguiente ejemplo demuestra cómo establecer múltiples propiedades en la mismaIgbBulletGraph puede transformarla en un gráfico de viñetas completamente diferente.

El gráfico de viñetas soporta una escala, un conjunto de marcas y un conjunto de etiquetas. El componente de gráficos de viñetas también tiene soporte incorporado para transiciones animadas. Esta animación se puede personalizar fácilmente configurando laTransitionDuration propiedad. Las características del gráfico de viñetas incluyen orientación y dirección configurables, elementos visuales configurables como la aguja y más.

Component Modules

RequiereIgbBulletGraph los siguientes módulos:

// in Program.cs file

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

Usage

El siguiente código explica cómo crear un componente de gráfico de viñetas y configurar una barra de rendimiento, un marcador de medida comparativa y tres rangos comparativos en la escala.

<IgbBulletGraph Height="80px" Width="100%"
MinimumValue="5" Value="35"
MaximumValue="55" TargetValue="43">
<IgbLinearGraphRange StartValue="0"
  EndValue="15"
  Brush="#828181" />
<IgbLinearGraphRange StartValue="15"
  EndValue="30"
  Brush="#AAAAAA" />
<IgbLinearGraphRange StartValue="30"
  EndValue="55"
  Brush="#D0D0D0" />
</IgbBulletGraph>

Comparative Measures

El gráfico de viñetas puede mostrar dos medidas: valor de rendimiento y valor objetivo.

El valor de rendimiento es la medida principal que muestra el componente y se visualiza como una barra que se extiende a lo largo de todo el gráfico. El valor objetivo es una medida con la que se compara el valor del rendimiento. Se muestra como un pequeño bloque que corre perpendicular a la orientación de la barra de rendimiento.

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

    Value="50"
    ValueBrush="DodgerBlue"
    ValueStrokeThickness="1"
    ValueInnerExtent="0.5"
    ValueOuterExtent="0.65"

    TargetValue="80"
    TargetValueBreadth="10"
    TargetValueBrush="LimeGreen"
    TargetValueOutline="LimeGreen"
    TargetValueStrokeThickness="1"
    TargetValueInnerExtent="0.3"
    TargetValueOuterExtent="0.85">
</IgbBulletGraph>

Highlight Value

El valor de rendimiento del gráfico de viñetas puede modificarse aún más para mostrar el progreso representado como un valor resaltado. Esto hará queValue parezcan con menor opacidad. Un buen ejemplo es siValue es 50 yHighlightValue está configurado en 25. Esto representaría un rendimiento del 50% independientemente del valor queTargetValue se establezca. Para habilitar esto, primero se configuraHighlightValueDisplayMode Superposición y luego aplica aHighlightValue algo inferior aValue.

<IgbBulletGraph Height="80px" Width="100%"
    MinimumValue="0"
    Value="70"
    TargetValue="90"
    Interval="10"
    MaximumValue="100"
    LabelInterval="10"
    LabelExtent="0.025"
    HighlightValueDisplayMode="HighlightedValueDisplayMode.Overlay"
    HighlightValue=25>
</IgbBulletGraph>

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

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="80" Interval="10"
  MaximumValue="100" TargetValue="90"
  RangeBrushes="#C62828,#F96232,#FF9800"
  RangeOutlines="#C62828,#F96232,#FF9800">
<IgbLinearGraphRange
  StartValue="0"
  EndValue="40"
  InnerStartExtent="0.075"
  InnerEndExtent="0.075"
  OuterStartExtent="0.95"
  OuterEndExtent="0.95">
</IgbLinearGraphRange>
<IgbLinearGraphRange
  StartValue="40"
  EndValue="70"
  InnerStartExtent="0.075"
  InnerEndExtent="0.075"
  OuterStartExtent="0.95"
  OuterEndExtent="0.95">
</IgbLinearGraphRange>
<IgbLinearGraphRange StartValue="70"
  EndValue="100"
  InnerStartExtent="0.075"
  InnerEndExtent="0.075"
  OuterStartExtent="0.95"
  OuterEndExtent="0.95">
</IgbLinearGraphRange>
</IgbBulletGraph>

Tick Marks

Las marcas sirven como una división visual de la escala en intervalos para aumentar la legibilidad del gráfico de viñetas.

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.

<IgbBulletGraph Height="80px" Width="100%"
    MinimumValue="0" Value="70" Interval="10"
    MaximumValue="100" TargetValue="90"

    TickBrush="DodgerBlue"
    TicksPreTerminal="0"
    TicksPostInitial="0"
    TickStrokeThickness="2"
    TickStartExtent="0.2"
    TickEndExtent="0.075"

    MinorTickCount="4"
    MinorTickBrush="DarkViolet"
    MinorTickEndExtent="0.1"
    MinorTickStartExtent="0.2"
    MinorTickStrokeThickness="1">
</IgbBulletGraph>

Labels

Las etiquetas indican las medidas de la báscula.

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="70" Interval="10"
  MaximumValue="100" TargetValue="90"
  LabelInterval="10"
  LabelExtent="0.025"
  LabelsPreTerminal="0"
  LabelsPostInitial="0"
  FontBrush="DodgerBlue"
  Font="11px Verdana">
</IgbBulletGraph>

Backing

El elemento de respaldo representa el fondo y el borde del componente del gráfico de viñetas. Siempre es el primer elemento representado y el resto de elementos, como etiquetas y marcas, se superponen encima.

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="70" Interval="10"
  MaximumValue="100" TargetValue="90"
  BackingBrush="#BDDCFC"
  BackingOutline="DodgerBlue"
  BackingStrokeThickness="4"
  BackingInnerExtent="0"
  BackingOuterExtent="1">
</IgbBulletGraph>

Scale

La escala es un elemento visual que resalta todo el rango de valores del calibre. Puedes personalizar la apariencia y la forma de la escala. La escala también puede invertirse (usandoIsScaleInverted la propiedad) y todas las etiquetas se renderizarán de derecha a izquierda en lugar de izquierda a derecha.

<IgbBulletGraph Height="80px" Width="100%"
  MinimumValue="0" Value="70" Interval="10"
  MaximumValue="100" TargetValue="90"
  IsScaleInverted="false"
  ScaleBackgroundBrush="DodgerBlue"
  ScaleBackgroundOutline="Red"
  ScaleBackgroundThickness="2"
  ScaleStartExtent="0.05"
  ScaleEndExtent="0.95">
</IgbBulletGraph>

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 gráfico de viñetas con todas las funciones y elementos visuales habilitados.

<IgbBulletGraph Height="80px" Width="100%"
    MinimumValue="0" Value="50" Interval="10"
    MaximumValue="100" TargetValue="90"
    IsScaleInverted="false"
    ScaleBackgroundBrush="DodgerBlue"
    ScaleBackgroundOutline="Red"
    ScaleBackgroundThickness="2"
    ScaleStartExtent="0.05"
    ScaleEndExtent="0.95"

    ValueBrush="Black"
    ValueStrokeThickness="1"
    ValueInnerExtent="0.5"
    ValueOuterExtent="0.65"
    TargetValue="80"
    TargetValueBreadth="7.5"
    TargetValueBrush="Black"
    TargetValueOutline="Black"
    TargetValueStrokeThickness="1"
    TargetValueInnerExtent="0.3"
    TargetValueOuterExtent="0.85"

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

    BackingBrush="#BDDCFC"
    BackingOutline="DodgerBlue"
    BackingStrokeThickness="4"
    BackingInnerExtent="0"
    BackingOuterExtent="1"
    TickBrush="DodgerBlue"
    TicksPreTerminal="0"
    TicksPostInitial="0"
    TickStrokeThickness="2"
    TickStartExtent="0.2"
    TickEndExtent="0.075"

    MinorTickCount="4"
    MinorTickBrush="DarkViolet"
    MinorTickEndExtent="0.1"
    MinorTickStartExtent="0.2"
    MinorTickStrokeThickness="1"

    RangeBrushes="#C62828,#F96232,#FF9800"
    RangeOutlines="#C62828,#F96232,#FF9800">
    <IgbLinearGraphRange StartValue="20" EndValue="40"
        InnerStartExtent="0.025" InnerEndExtent="0.025"
        OuterStartExtent="0.9" OuterEndExtent="0.9">
    </IgbLinearGraphRange>
    <IgbLinearGraphRange StartValue="40" EndValue="60"
        InnerStartExtent="0.025" InnerEndExtent="0.025"
        OuterStartExtent="0.9" OuterEndExtent="0.9">
    </IgbLinearGraphRange>
    <IgbLinearGraphRange StartValue="60" EndValue="90"
        InnerStartExtent="0.025" InnerEndExtent="0.025"
        OuterStartExtent="0.9 OuterEndExtent="0.9">
    </IgbLinearGraphRange>
</IgbBulletGraph>

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: