Sobreposições de gráficos React

    O React IgrDataChart permite a colocação de linhas horizontais ou verticais em um único valor numérico que você define por meio do uso do IgrValueOverlay. Isso pode ajudar você a visualizar dados como a média ou mediana de uma série específica.

    React Value Overlay Example

    O exemplo a seguir descreve um gráfico de colunas com algumas sobreposições de valores horizontais plotadas.

    React Value Overlay Properties

    Ao contrário de outros tipos de série que usam uma ItemsSource associação de dados, a sobreposição de valor usa uma ValueMemberPath propriedade para associar um único valor numérico. Além disso, a sobreposição de valor exige que você defina um único axis a ser usado. Se você usar um eixo X, a sobreposição de valor será uma linha vertical e, se você usar um eixo Y, será uma linha horizontal.

    Ao usar um eixo numérico X ou Y, a propriedade ValueMemberPath deve refletir o valor numérico real no eixo onde você quer que a sobreposição de valor seja desenhada. Ao usar um eixo de categoria X ou Y, o ValueMemberPath deve refletir o índice da categoria na qual você quer que a sobreposição de valor apareça.

    Ao usar a sobreposição de valor com um eixo de ângulo numérico, ele aparecerá como uma linha do centro do gráfico e, ao usar um eixo de raio numérico, ele aparecerá como um círculo.

    As propriedades de aparência IgrValueOverlay são herdadas do IgrSeries e, portanto, brush e thickness por exemplo, estão disponíveis e funcionam da mesma forma que com outros tipos de séries.

    Também é possível mostrar uma anotação de eixo em um IgrValueOverlay para mostrar o valor da sobreposição no eixo proprietário. Para mostrar isso, você pode definir a propriedade isAxisAnnotationEnabled como true.

    React Value Layer

    Os componentes de gráficos React também expõem a capacidade de usar linhas de valor para destacar diferentes pontos focais dos seus dados, como valores mínimos, máximos e médios.

    A aplicação do IgrValueLayer nos componentes IgrCategoryChart e IgrFinancialChart é feita definindo a propriedade valueLines no gráfico. Essa propriedade pega uma coleção da enumeração ValueLayerValueMode. Você pode misturar e combinar várias camadas de valor no mesmo gráfico adicionando várias enumerações ValueLayerValueMode à coleção valueLines do gráfico.

    No IgrDataChart, isso é feito adicionando um IgrValueLayer à coleção IgrSeries do gráfico e, em seguida, definindo a propriedade ValueMode para uma das enumerações ValueLayerValueMode. Cada uma dessas enumerações e o que elas significam estão listados abaixo:

    • Auto: O modo de valor padrão da ValueLayerValueMode enumeração.
    • Average: Aplica linhas de valor potencialmente múltiplas para destacar o valor médio de cada série plotada no gráfico.
    • GlobalAverage: Aplica uma única linha de valor para destacar a média de todos os valores da série no gráfico.
    • GlobalMaximum: Aplica uma única linha de valor para destacar o valor máximo absoluto de todos os valores de série no gráfico.
    • GlobalMinimum: Aplica uma única linha de valor para destacar o valor mínimo absoluto de todos os valores da série no gráfico.
    • Maximum: Aplica linhas de valor potencialmente múltiplas para destacar o valor máximo de cada série plotada no gráfico.
    • Minimum: Aplica linhas de valor potencialmente múltiplas para destacar o valor mínimo de cada série plotada no gráfico.

    Se você quiser evitar que qualquer série específica seja levada em conta ao usar o elemento IgrValueLayer, você pode definir a propriedade targetSeries na camada. Isso forçará a camada a mirar na série que você definir. Você pode ter quantos elementos IgrValueLayer em um único IgrDataChart quiser.

    O exemplo a seguir demonstra o uso de diferentes valueLines no IgrCategoryChart:

    React Financial Overlays

    Você também pode plotar sobreposições e indicadores financeiros integrados no React Stock Chart.

    Chart Overlay Text (Beta)

    O React IgrValueOverlay e IgrValueLayer todas as Camadas de Anotação de Dados podem renderizar texto de sobreposição personalizado dentro da área de plotagem do componente XamDataChart. Você pode usar este texto de sobreposição para anotar eventos importantes (por exemplo, relatórios trimestrais da empresa) no eixo x ou valores importantes no eixo y em relação às camadas.

    Por exemplo, você pode usar DataAnnotationSliceLayer e IgrValueOverlay​ ​IgrValueLayer para mostrar o texto de sobreposição.

    Styling Overlay Text

    Este exemplo de código mostra como estilizar e personalizar o texto de sobreposição no DataAnnotationSliceLayer, IgrValueOverlay, e IgrValueLayer.

    Additional Resources

    Você pode encontrar mais informações sobre os tipos de gráficos relacionados nestes tópicos:

    API References

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