Visão geral do gráfico de marcadores React

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

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

React Bullet Graph Example

O exemplo a seguir demonstra como definir várias propriedades no mesmo IgrBulletGraph 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-react-core
npm install --save igniteui-react-gauges

Component Modules

O IgrBulletGraph requer os seguintes módulos:

import { IgrBulletGraphModule } from 'igniteui-react-gauges';

IgrBulletGraphModule.register();

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.

 <IgrBulletGraph height="100"
                   width="300"
                   minimumValue={5}
                   maximumValue={55}
                   value={35}
                   targetValue={43}>
        <IgrLinearGraphRange startValue={0}
                                endValue={15}
                                brush="#828181"/>
        <IgrLinearGraphRange StartValue={15}
                                endValue={30}
                                brush="#AAAAAA"/>
        <IgrLinearGraphRange StartValue={30}
                                bndValue={55}
                                brush="#D0D0D0"/>
 </IgrBulletGraph>

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.

<IgrBulletGraph
    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} />

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.

<IgrBulletGraph
    height="80px"
    width="100%"
    value={70} 
    targetValue={90}
    interval={10}
    minimumValue={0} 
    maximumValue={100} 
    labelInterval={10}
    labelExtent={0.025}
    labelsPreTerminal={0}
    labelsPostInitial={0}
    highlightValueDisplayMode="Overlay"
    highlightValue={25} />

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.

<IgrBulletGraph
    height="80px" width="400px"
    minimumValue={0} value={80} interval={10}
    maximumValue={100} targetValue={90}
    rangeBrushes ="#C62828, #F96232, #FF9800"
    rangeOutlines="#C62828, #F96232, #FF9800">
    <IgrLinearGraphRange
        startValue={0} endValue={40}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.95} outerEndExtent={0.95} />
    <IgrLinearGraphRange
        startValue={40} endValue={70}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.95} outerEndExtent={0.95} />
    <IgrLinearGraphRange
        startValue={70} endValue={100}
        innerStartExtent={0.075} innerEndExtent={0.075}
        outerStartExtent={0.95} outerEndExtent={0.95} />
</IgrBulletGraph>

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.

<IgrBulletGraph
    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} />

Labels

As etiquetas indicam as medidas na escala.

<IgrBulletGraph
    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"/>

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.

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

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.

<IgrBulletGraph
    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} />

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.

<IgrBulletGraph
    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">
    <IgrLinearGraphRange
        startValue={20} endValue={40}
        innerStartExtent={0.25} innerEndExtent={0.25}
        outerStartExtent={0.9} outerEndExtent={0.9} />
    <IgrLinearGraphRange
        startValue={40} endValue={60}
        innerStartExtent={0.25} innerEndExtent={0.25}
        outerStartExtent={0.9} outerEndExtent={0.9} />
    <IgrLinearGraphRange
        startValue={60} endValue={90}
        innerStartExtent={0.25} innerEndExtent={0.25}
        outerStartExtent={0.9} outerEndExtent={0.9} />
</IgrBulletGraph>

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: