Sobreposições de gráficos de Web Components

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

    Web Components Value Overlay Example

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

    Web Components 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 IgcValueOverlayComponent são herdadas do IgcSeriesComponent 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 IgcValueOverlayComponent para mostrar o valor da sobreposição no eixo proprietário. Para mostrar isso, você pode definir a propriedade isAxisAnnotationEnabled como true.

    Web Components Value Layer

    Os componentes de gráficos Web Components 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 IgcValueLayerComponent nos componentes IgcCategoryChartComponent e IgcFinancialChartComponent é 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 IgcDataChartComponent, isso é feito adicionando um IgcValueLayerComponent à coleção IgcSeriesComponent 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 IgcValueLayerComponent, 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 IgcValueLayerComponent quiser dentro de um único IgcDataChartComponent.

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

    Web Components Financial Overlays

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

    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: