Visão geral do gráfico de marcadores Angular

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

O componente de gráfico de marcadores Ignite UI for Angular 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.

Angular Bullet Graph Example

O exemplo a seguir demonstra como definir várias propriedades no mesmo IgxBulletGraphComponent 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.

Dependencies

Ao instalar o pacote do medidor, o pacote principal também deve ser instalado.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges

Component Modules

O IgxBulletGraphComponent requer os seguintes módulos:

// app.module.ts
import { IgxBulletGraphModule } from 'igniteui-angular-gauges';

@NgModule({
    imports: [
        // ...
        IgxBulletGraphModule
        // ...
    ]
})
export class AppModule {}

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.

 <igx-bullet-graph height="100"
                   width="300"
                   minimumValue="5"
                   maximumValue="55"
                   value="35"
                   targetValue="43">
        <igx-linear-graph-range startValue="0"
                                endValue="15"
                                brush="#828181">
        </igx-linear-graph-range>
        <igx-linear-graph-range startValue="15"
                                endValue="30"
                                brush="#AAAAAA">
        </igx-linear-graph-range>
        <igx-linear-graph-range startValue="30"
                                endValue="55"
                                brush="#D0D0D0">
        </igx-linear-graph-range>
 </igx-bullet-graph>

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.

<igx-bullet-graph
    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
    height="80px" width="400px"
    minimumValue=0 value=50
    maximumValue=100>
</igx-bullet-graph>

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.

<igx-bullet-graph
    #bulletGraph
    height="80px" 
    width="400px"
    value=70 
    targetValue=90
    minimumValue=0 
    maximumValue=100 
    interval=10
    labelInterval=10
    labelExtent=0.025
    labelsPreTerminal=0
    labelsPostInitial=0
    highlightValueDisplayMode="Overlay"
    highlightValue=25>
  </igx-bullet-graph>

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.

<igx-bullet-graph
    height="80px" width="400px"
    minimumValue=0 value=80 interval=10
    maximumValue=100 targetValue=90
    rangeBrushes ="#C62828, #F96232, #FF9800"
    rangeOutlines="#C62828, #F96232, #FF9800">
    <igx-linear-graph-range
        startValue=0 endValue=40
        innerStartExtent=0.075 innerEndExtent=0.075
        outerStartExtent=0.95 outerEndExtent=0.95>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=40 endValue=70
        innerStartExtent=0.075 innerEndExtent=0.075
        outerStartExtent=0.95 outerEndExtent=0.95>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=70 endValue=100
        innerStartExtent=0.075 innerEndExtent=0.075
        outerStartExtent=0.95 outerEndExtent=0.95>
    </igx-linear-graph-range>
</igx-bullet-graph>

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.

<igx-bullet-graph
    height="80px" width="400px"
    minimumValue=0 value=70
    maximumValue=100 targetValue=90
    interval=10
    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>
</igx-bullet-graph>

Labels

As etiquetas indicam as medidas na escala.

<igx-bullet-graph
    height="80px" width="400px"
    minimumValue=0 value=70 interval=10
    maximumValue=100 targetValue=90
    labelInterval=10
    labelExtent=0.025
    labelsPreTerminal=0
    labelsPostInitial=0
    fontBrush="DodgerBlue"
    font="11px Verdana">
</igx-bullet-graph>

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.

<igx-bullet-graph
    height="80px" width="400px"
    minimumValue=0 value=70 interval=10
    maximumValue=100 targetValue=90
    backingBrush="#bddcfc"
    backingOutline="DodgerBlue"
    backingStrokeThickness=4
    backingInnerExtent=0
    backingOuterExtent=1>
</igx-bullet-graph>

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.

<igx-bullet-graph
    height="80px" width="400px"
    minimumValue=0 value=70 interval=10
    maximumValue=100 targetValue=90
    isScaleInverted=false
    scaleBackgroundBrush="DodgerBlue"
    scaleBackgroundOutline="DarkViolet"
    scaleBackgroundThickness=2
    scaleStartExtent=0.05
    scaleEndExtent=0.95>
</igx-bullet-graph>

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.

<igx-bullet-graph
    height="80px" width="400px"
    minimumValue=0
    maximumValue=100
    isScaleInverted=false
    scaleBackgroundBrush="Gray"
    scaleBackgroundOutline="Gray"
    scaleBackgroundThickness=2
    scaleStartExtent=0.05
    scaleEndExtent=0.95

    value=50
    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="Black"
    font="11px Verdana"

    backingBrush="#cecece"
    backingOutline="#cecece"
    backingStrokeThickness=4
    backingInnerExtent=0
    backingOuterExtent=1

    interval=10
    tickBrush="Black"
    ticksPreTerminal=0
    ticksPostInitial=0
    tickStrokeThickness=2
    tickStartExtent=0.2
    tickEndExtent=0.075

    minorTickCount=4
    minorTickBrush="Black"
    minorTickEndExtent=0.1
    minorTickStartExtent=0.2
    minorTickStrokeThickness=1

    rangeBrushes ="#C62828, #F96232, #FF9800"
    rangeOutlines="#C62828, #F96232, #FF9800">
    <igx-linear-graph-range
        startValue=20 endValue=40
        innerStartExtent=0.25 innerEndExtent=0.25
        outerStartExtent=0.9 outerEndExtent=0.9>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=40 endValue=60
        innerStartExtent=0.25 innerEndExtent=0.25
        outerStartExtent=0.9 outerEndExtent=0.9>
    </igx-linear-graph-range>
    <igx-linear-graph-range
        startValue=60 endValue=90
        innerStartExtent=0.25 innerEndExtent=0.25
        outerStartExtent=0.9 outerEndExtent=0.9>
    </igx-linear-graph-range>
</igx-bullet-graph>

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: