Sobreposições de gráficos React

    O ReactIgrDataChart permite posicionar linhas horizontais ou verticais em um único valor numérico que você define por meio do uso doIgrValueOverlay. 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

    Diferente de outros tipos de série que usam aItemsSource para vinculação de dados, a sobreposição de valores usa umaValueMemberPath propriedade para vincular um único valor numérico. Além disso, a sobreposição de valores exige que você defina um únicoaxis para usar. Se você usar um eixo X, a sobreposição de valores será uma linha vertical, e se usar um eixo Y, será uma linha horizontal.

    Ao usar um eixo numérico X ou Y, aValueMemberPath propriedade deve refletir o valor numérico real no eixo onde você deseja que a sobreposição de valor seja desenhada. Ao usar um eixo de categoria X ou Y, oValueMemberPath deve refletir o índice da categoria na qual você deseja que a sobreposição de valores 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.

    IgrValueOverlayPropriedades de aparência são herdadas deIgrSeries e, porbrush exemplo,thickness 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 aIgrValueOverlay para mostrar o valor da sobreposição no eixo proprietário. Para mostrar isso, você pode definir aisAxisAnnotationEnabled propriedade como verdadeira.

    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.

    Aplicar osIgrValueLayer componentes em eIgrCategoryChart​IgrFinancialChart é feito definindo avalueLines propriedade no gráfico. Essa propriedade reúne uma coleção daValueLayerValueMode enumeração. Você pode misturar e combinar múltiplas camadas de valor no mesmo gráfico adicionando múltiplasValueLayerValueMode enumerações àvalueLines coleção do gráfico.

    Em ,IgrDataChart isso é feito adicionando aIgrValueLayer àIgrSeries coleção do gráfico e então definindo aValueMode propriedade para uma dasValueLayerValueMode enumerações. Cada uma dessas enumerações e o seu significado estão listados abaixo:

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

    Se você quiser evitar que qualquer série específica seja levada em conta ao usar oIgrValueLayer elemento, pode definir atargetSeries propriedade na camada. Isso vai forçar a camada a mirar na série que você definiu. Você pode ter quantosIgrValueLayer elementos quiser em umIgrDataChart só.

    O exemplo a seguir demonstra o uso da diferençavalueLines noIgrCategoryChart:

    React Financial Overlays

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

    Chart Overlay Text

    As camadas ReactIgrValueOverlay eIgrValueLayer todas as Anotações de Dados podem renderizar texto sobreposto personalizado dentro da área de plot do componente XamDataChart. Você pode usar esse texto sobreposto 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 usarIgrDataAnnotationSliceLayer,IgrValueOverlay, eIgrValueLayer para mostrar texto sobreposto.

    Styling Overlay Text

    Este exemplo de código mostra como estilizar e personalizar o Texto Sobreposto noIgrDataAnnotationSliceLayer,IgrValueOverlay, eIgrValueLayer.

    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: