Angular sobreposições de gráficos

    O Angular IgxDataChartComponent permite a colocação de linhas horizontais ou verticais em um único valor numérico que você define por meio do uso do IgxValueOverlayComponent. Isso pode ajudá-lo a visualizar dados como a média ou mediana de uma série específica.

    Angular Value Overlay Example

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

    Angular 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.

    IgxValueOverlayComponent As propriedades de aparência são herdadas de e assim por IgxSeriesComponent​ ​thickness exemplo, brush 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 IgxValueOverlayComponent para mostrar o valor da sobreposição no eixo proprietário. Para mostrar isso, você pode definir a isAxisAnnotationEnabled propriedade como true.

    Angular Value Layer

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

    A aplicação dos IgxValueLayerComponent componentes in the IgxCategoryChartComponent e IgxFinancialChartComponent é feita definindo a valueLines propriedade no gráfico. Essa propriedade usa uma coleção da ValueLayerValueMode enumeração. Você pode misturar e combinar várias camadas de valor no mesmo gráfico adicionando várias ValueLayerValueMode enumerações à valueLines coleção do gráfico.

    ​IgxDataChartComponent No , isso é feito adicionando a IgxValueLayerComponent à IgxSeriesComponent coleção do gráfico e, em seguida, definindo a ValueMode propriedade como uma das ValueLayerValueMode enumerações. Cada uma dessas enumerações e o que elas significam estão listadas 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 consideração ao usar o IgxValueLayerComponent elemento, você pode definir a targetSeries propriedade na camada. Isso forçará a camada a direcionar a série que você definir. Você pode ter quantos IgxValueLayerComponent elementos quiser em um único IgxDataChartComponent.

    O exemplo a seguir demonstra o uso do diferente valueLines no IgxCategoryChartComponent:

    Angular Financial Overlays

    Você também pode plotar sobreposições e indicadores financeiros integrados em Angular gráfico de ações.

    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: