Visão geral do gráfico de marcadores Web Components

O componente de gráfico de marcadores Web Components permite uma visão linear e concisa das medidas em comparação com uma escala.

O componente de gráfico de marcadores Ignite UI for Web Components fornece a capacidade de criar apresentações de dados atraentes, substituindo medidores e medidores 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/melhores ou comparar várias medições no menor espaço horizontal ou vertical possível.

Web Components Bullet Graph Example

O exemplo a seguir demonstra como a configuração de várias propriedades no mesmo IgcBulletGraphComponent pode transformá-lo em um gráfico de marcador 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-webcomponents-core
npm install --save igniteui-webcomponents-gauges

Component Modules

O IgcBulletGraphComponent requer os seguintes módulos:

import { IgcBulletGraphCoreModule  } from 'igniteui-webcomponents-gauges';
import { IgcBulletGraphModule } from 'igniteui-webcomponents-gauges';
import { ModuleManager } from 'igniteui-webcomponents-core';

// register the modules
ModuleManager.register(
    IgcBulletGraphCoreModule,
    IgcBulletGraphModule
);

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.

  <igc-bullet-graph height="100px"
    width="300px"
    minimum-value="5"
    maximum-value="55"
    value="35"
    target-value="43">
    <igc-linear-graph-range
      start-value="0"
      end-value="15"
      brush="#828181">
    </igc-linear-graph-range>
    <igc-linear-graph-range
      start-value="15"
      end-value="30"
      brush="#AAAAAA">
    </igc-linear-graph-range>
    <igc-linear-graph-range
      start-value="30"
      end-value="55"
      brush="#D0D0D0">
    </igc-linear-graph-range>
  </igc-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.

  <igc-bullet-graph
    height="80px"
    width="400px"
    value="50"
    value-brush="DodgerBlue"
    value-stroke-thickness="1"
    value-inner-extent="0.5"
    value-outer-extent="0.65"
    target-value="80"
    target-value-breadth="10"
    target-value-brush="LimeGreen"
    target-value-outline="LimeGreen"
    target-value-stroke-thickness="1"
    target-value-inner-extent="0.3"
    target-value-outer-extent="0.85"
    minimum-value="0"
    maximum-value="100">
  </igc-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.

<igc-bullet-graph
    id="gauge"
    height="80px"
    width="100%"
    minimum-value="0" 
    maximum-value="100"
    value="70" 
    interval="10"
    target-value="90"
    label-interval="10"
    label-extent="0.025"
    labels-pre-terminal="0"
    labels-post-initial="0"
    highlight-value-display-mode="Overlay"
    highlight-value="25" >
</igc-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.

  <igc-bullet-graph
    height="80px" width="400px"
    minimum-value="0" value="80" interval="10"
    maximum-value="100" target-value="90"
    range-brushes ="#C62828, #F96232, #FF9800"
    range-outlines="#C62828, #F96232, #FF9800">
    <igc-linear-graph-range
      start-value="0" end-value="40"
      inner-start-extent="0.075" inner-end-extent="0.075"
      outer-start-extent="0.95" outer-end-extent="0.95">
    </igc-linear-graph-range>
    <igc-linear-graph-range
      start-value="40" end-value="70"
      inner-start-extent="0.075" inner-end-extent="0.075"
      outer-start-extent="0.95" outer-end-extent="0.95">
    </igc-linear-graph-range>
    <igc-linear-graph-range
      start-value="70" end-value="100"
      inner-start-extent="0.075" inner-end-extent="0.075"
      outer-start-extent="0.95" outer-end-extent="0.95">
    </igc-linear-graph-range>
  </igc-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.

  <igc-bullet-graph
    height="80px" width="400px"
    minimum-value="0" value="70"
    maximum-value="100" target-value="90"
    interval="10"
    tick-brush="DodgerBlue"
    ticks-pre-terminal="0"
    ticks-post-initial="0"
    tick-stroke-thickness="2"
    tick-start-extent="0.2"
    tick-end-extent="0.075"
    minor-tick-count="4"
    minor-tick-brush="DarkViolet"
    minor-tick-end-extent="0.1"
    minor-tick-start-extent="0.2"
    minor-tick-stroke-thickness="1">
  </igc-bullet-graph>

Labels

As etiquetas indicam as medidas na escala.

  <igc-bullet-graph
    height="80px" width="400px"
    minimum-value="0" value="70" interval="10"
    maximum-value="100" target-value="90"
    label-interval="10"
    label-extent="0.025"
    labels-pre-terminal="0"
    labels-post-initial="0"
    font-brush="DodgerBlue"
    font="11px Verdana">
  </igc-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.

  <igc-bullet-graph
    height="80px" width="400px"
    minimum-value="0" value="70" interval="10"
    maximum-value="100" target-value="90"
    backing-brush="#bddcfc"
    backing-outline="DodgerBlue"
    backing-stroke-thickness="4"
    backing-inner-extent="0"
    backing-outer-extent="1">
  </igc-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.

  <igc-bullet-graph
    height="80px" width="400px"
    minimum-value="0" value="70" interval="10"
    maximum-value="100" target-value="90"
    is-scale-inverted="false"
    scale-background-brush="DodgerBlue"
    scale-background-outline="DarkViolet"
    scale-background-thickness="2"
    scale-start-extent="0.05"
    scale-end-extent="0.95">
  </igc-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.

  <igc-bullet-graph
    height="80px" width="400px"
    minimum-value="0"
    maximum-value="100"
    is-scale-inverted="false"
    scale-background-brush="Gray"
    scale-background-outline="Gray"
    scale-background-thickness="2"
    scale-start-extent="0.05"
    scale-end-extent="0.95"

    value="50"
    value-brush="Black"
    value-stroke-thickness="1"
    value-inner-extent="0.5"
    value-outer-extent="0.65"
    target-value="80"
    target-value-breadth="7.5"
    target-value-brush="Black"
    target-value-outline="Black"
    target-value-stroke-thickness="1"
    target-value-inner-extent="0.3"
    target-value-outer-extent="0.85"

    label-interval="10"
    label-extent="0.025"
    labels-pre-terminal="0"
    labels-post-initial="0"
    font-brush="Black"
    font="11px Verdana"

    backing-brush="#cecece"
    backing-outline="#cecece"
    backing-stroke-thickness="4"
    backing-inner-extent="0"
    backing-outer-extent="1"

    interval="10"
    tick-brush="Black"
    ticks-pre-terminal="0"
    ticks-post-initial="0"
    tick-stroke-thickness="2"
    tick-start-extent="0.2"
    tick-end-extent="0.075"

    minor-tick-count="4"
    minor-tick-brush="Black"
    minor-tick-end-extent="0.1"
    minor-tick-start-extent="0.2"
    minor-tick-stroke-thickness="1"

    range-brushes="#C62828, #F96232, #FF9800"
    range-outlines="#C62828, #F96232, #FF9800">
    <igc-linear-graph-range
      start-value="20" end-value="40"
      inner-start-extent="0.25" inner-end-extent="0.25"
      outer-start-extent="0.9" outer-end-extent="0.9">
    </igc-linear-graph-range>
    <igc-linear-graph-range
      start-value="40" end-value="60"
      inner-start-extent="0.25" inner-end-extent="0.25"
      outer-start-extent="0.9" outer-end-extent="0.9">
    </igc-linear-graph-range>
    <igc-linear-graph-range
      start-value="60" end-value="90"
      inner-start-extent="0.25" inner-end-extent="0.25"
      outer-start-extent="0.9" outer-end-extent="0.9">
    </igc-linear-graph-range>
  </igc-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: