Visão geral do gráfico de marcadores Blazor

O componente de gráfico de marcadores Blazor permite uma visão linear e concisa de medidas comparadas a uma escala.

O componente de gráfico de marcadores Ignite UI for Blazor fornece a você a capacidade de criar apresentações de dados atraentes, substituindo medidores e indicadores usados em painéis por gráficos de barras simples, mas diretos e claros. Um gráfico de marcadores é uma das maneiras mais eficazes e eficientes de apresentar o progresso em direção a metas, intervalos bons/melhores/ótimos ou comparar várias medições no menor espaço horizontal ou vertical possível.

Blazor Bullet Graph Example

O exemplo a seguir demonstra como definir várias propriedades no mesmo IgbBulletGraph pode transformá-lo em um gráfico de marcadores completamente diferente.

O gráfico de marcadores suporta uma escala, um conjunto de marcas de escala e um conjunto de rótulos. O componente de gráfico de marcadores também tem suporte integrado para transições animadas. Esta animação é facilmente personalizável ao definir a propriedade TransitionDuration. Os recursos do gráfico de marcadores incluem orientação e direção configuráveis, elementos visuais configuráveis como a agulha e muito mais.

Component Modules

O IgbBulletGraph requer os seguintes módulos:

// in Program.cs file

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

Usage

O código a seguir explica como criar um componente de gráfico de marcadores e configurar uma barra de desempenho, um marcador de medida comparativa e três intervalos comparativos na 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

O gráfico de marcadores pode mostrar duas medidas: valor de desempenho e valor-alvo.

O valor de desempenho é a medida primária exibida pelo componente e é visualizado como uma barra que se estende ao longo do comprimento de todo o gráfico. O valor alvo é uma medida com a qual o valor de desempenho se compara. Ele é exibido como um pequeno bloco que corre perpendicularmente à orientação da barra de desempenho.

<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

O valor de desempenho do gráfico de marcadores pode ser modificado ainda mais para mostrar o progresso representado como um valor destacado. Isso fará com que o Value apareça com uma opacidade menor. Um bom exemplo é se Value for 50 e HighlightValue estiver definido como 25. Isso representaria um desempenho de 50%, independentemente de qual for o valor de TargetValue definido. Para habilitar isso, primeiro defina HighlightValueDisplayMode como Overlay e, em seguida, aplique um HighlightValue a algo menor que Value.

<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

Os intervalos são elementos visuais que destacam um intervalo especificado de valores em uma escala. Seu propósito é comunicar visualmente o estado qualitativo da medida da barra de desempenho, ilustrando ao mesmo tempo o grau em que ela reside dentro desse 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

As marcas de seleção servem como uma divisão visual da escala em intervalos para aumentar a legibilidade do gráfico de marcadores.

Marcas de escala principais – As marcas de escala principais são usadas como delimitadores primários na escala. A frequência em que aparecem, suas extensões e estilo podem ser controlados definindo suas propriedades correspondentes.
Marcas de verificação menores – As marcas de verificação menores representam marcas de verificação auxiliares, que podem ser usadas para melhorar ainda mais a legibilidade da escala e podem ser personalizadas de forma semelhante às principais.

<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

As etiquetas indicam as medidas na escala.

<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

O elemento de apoio representa o fundo e a borda do componente do gráfico de marcadores. Ele é sempre o primeiro elemento renderizado e todos os outros elementos, como rótulos e marcas de escala, são sobrepostos a ele.

<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

A escala é um elemento visual que destaca toda a gama de valores no medidor. Você pode personalizar a aparência e o formato da escala. A escala também pode ser invertida (usando a propriedade IsScaleInverted) e todos os rótulos serão renderizados da direita para a esquerda em vez da esquerda para a direita.

<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 sua conveniência, todos os trechos de código acima são combinados em um bloco de código abaixo que você pode copiar facilmente para seu projeto e ver o gráfico de marcadores com todos os recursos e visuais 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

A seguir está uma lista de membros da API mencionados nas seções acima:

Additional Resources

Você pode encontrar mais informações sobre outros tipos de medidores nestes tópicos: