Sobreposições de gráficos Blazor

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

Blazor Value Overlay Example

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

Blazor Value Overlay Properties

Ao contrário de outros tipos de série que usam um DataSource para vinculação de dados, a sobreposição de valor usa uma propriedade ValueMemberPath para vincular um único valor numérico. Além disso, a sobreposição de valor exige que você defina um único Axis para usar. 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 IgbValueOverlay são herdadas de Series 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 IgbValueOverlay para mostrar o valor da sobreposição no eixo proprietário. Para mostrar isso, você pode definir a propriedade IsAxisAnnotationEnabled como true.

Blazor Value Layer

Os componentes de gráficos Blazor 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 IgbValueLayer nos componentes IgbCategoryChart e IgbFinancialChart é 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 IgbDataChart, isso é feito adicionando um IgbValueLayer à coleção Series 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 enumeração ValueLayerValueMode.
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 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 máximo absoluto de todos os valores da série no gráfico.
GlobalMinimum: aplica uma única linha de valor para chamar 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 potencialmente múltiplas linhas de valor para indicar 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 IgbValueLayer, 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 IgbValueLayer em um único IgbDataChart quiser.

O exemplo a seguir demonstra o uso das diferentes ValueLines no IgbCategoryChart:

Blazor Financial Overlays

Você também pode traçar sobreposições e indicadores financeiros integrados no Blazor 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: