Blazor Chart Data Annotations (Beta)
No gráfico Blazor, as camadas de anotação de dados permitem que você anote dados plotados no Gráfico de Dados com linhas inclinadas, linhas verticais/horizontais (também conhecidas como fatias de eixo), faixas verticais/horizontais (visando eixos específicos), retângulos e até paralelogramos (também conhecidos como bandas). Com a associação de dados suportada, você pode criar quantas anotações quiser para personalizar seus gráficos. Além disso, você pode combinar diferentes camadas de anotação e sobrepor texto dentro da área de plotagem a eventos, padrões e regiões importantes anotados em seus dados.
Por exemplo, você pode anotar os preços das ações com eventos e padrões de ações.
Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas Blazor completo e comece a criar seus próprios aplicativos em minutos. Baixe-o gratuitamente.
Blazor Data Annotation Slice Layer Example
Em Blazor, o link:{DataChartLink}. DataAnnotationSliceLayer.html[DataAnnotationSliceLayer] renderiza várias linhas verticais ou horizontais que dividem o gráfico em vários valores de um eixo no IgbDataChart
componente. Essa camada de anotação de dados é frequentemente usada para anotar eventos importantes (por exemplo, relatórios trimestrais da empresa) no eixo x ou valores importantes no eixo y. Definir a propriedade TargetAxis como eixo y renderizará a camada de anotação de dados como fatias horizontais ou definir a propriedade TargetAxis como eixo x renderizará a camada de anotação de dados como fatias verticais. Da mesma forma que todas as séries, o DataAnnotationSliceLayer também dá suporte à associação de dados por meio da DataSource
propriedade que pode ser definida como uma coleção de itens de dados que deve ter pelo menos 1 coluna de dados numéricos mapeada para a AnnotationValueMemberPath
propriedade.
Por exemplo, você pode usar DataAnnotationSliceLayer para anotar preços de ações com eventos importantes, como desdobramento de ações e resultados de relatórios de ganhos.
Blazor Data Annotation Strip Layer Example
No Blazor, o renderiza DataAnnotationStripLayer
várias faixas verticais ou horizontais entre 2 valores em um eixo no IgbDataChart
componente. Essa camada de anotação de dados pode ser usada para anotar a duração de eventos (por exemplo, crash do mercado de ações) no eixo x ou intervalo importante de valores no eixo y. Definir a propriedade TargetAxis como eixo y renderizará a camada de anotação de dados como faixas horizontais ou definir a propriedade TargetAxis como eixo x renderizará a camada de anotação de dados como faixas verticais. Da mesma forma que todas as séries, o DataAnnotationStripLayer
também dá suporte à associação de dados por meio da DataSource
propriedade que pode ser definida como uma coleção de itens de dados que deve ter pelo menos 1 coluna de dados numéricos mapeada para a propriedade AnnotationValueMemberPath.
Por exemplo, você pode usar DataAnnotationStripLayer
para anotar gráfico com quedas do mercado de ações e mudanças nas taxas de juros federais.
Blazor Data Annotation Line Layer Example
Em Blazor, DataAnnotationLineLayer
renderiza várias linhas entre 2 pontos na área de plotagem do IgbDataChart
componente. Essa camada de anotação de dados pode ser usada para anotar o gráfico de ações com crescimento e declínio nos preços das ações. Da mesma forma que todas as séries, o DataAnnotationLineLayer também dá suporte à associação de dados por meio da DataSource
propriedade que pode ser definida como uma coleção de itens de dados que devem ter pelo menos 4 colunas de dados numéricos que representam as coordenadas x/y do ponto inicial e do ponto final das linhas. Os pontos de partida devem ser mapeados usando as propriedades e StartValueXMemberPath
StartValueYMemberPath
e os pontos finais devem ser mapeados usando EndValueXMemberPath
as propriedades and EndValueYMemberPath
.
Por exemplo, você pode usar DataAnnotationLineLayer para anotar padrões de crescimento e declínio nos preços das ações e na alta e baixa de 52 semanas dos preços das ações no eixo y.
Blazor Data Annotation Rect Layer Example
No Blazor, o DataAnnotationRectLayer
renderiza vários retângulos definidos por pontos inicial e final na área de plotagem do IgbDataChart
componente. Essa camada de anotação de dados pode ser usada para anotar a região da área do gráfico, como padrões de baixa nos preços das ações. Da mesma forma que todas as séries, o DataAnnotationRectLayer também dá suporte à associação de dados por meio da DataSource
propriedade que pode ser definida como uma coleção de itens de dados que deve ter pelo menos 4 colunas de dados numéricos que representam coordenadas x/y do ponto inicial e do ponto final dos retângulos. Os pontos de partida devem ser mapeados usando as propriedades e StartValueXMemberPath
StartValueYMemberPath
e os pontos finais devem ser mapeados usando EndValueXMemberPath
as propriedades and EndValueYMemberPath
.
Por exemplo, você pode usar DataAnnotationRectLayer para anotar padrões de baixa e lacunas nos preços das ações no eixo y.
Blazor Data Annotation Band Layer Example
No Blazor, o DataAnnotationBandLayer
renderiza vários retângulos assimétricos (paralelogramo de forma livre) entre 2 pontos na área de plotagem do IgbDataChart
componente. Essa camada de anotação de dados pode ser usada para anotar a faixa de crescimento e declínio nos preços das ações. Da mesma forma que todas as séries, o DataAnnotationBandLayer também dá suporte à associação de dados por meio da DataSource
propriedade que pode ser definida como uma coleção de itens de dados que devem ter pelo menos 4 colunas de dados numéricos que representam coordenadas x/y do ponto inicial e final das linhas. Os pontos de partida devem ser mapeados usando StartValueXMemberPath
propriedades e StartValueYMemberPath
e os pontos finais devem ser mapeados usando EndValueXMemberPath
propriedades e EndValueYMemberPath
. Além disso, você pode especificar a espessura/tamanho do retângulo distorcido associando a coluna de dados numéricos à propriedade AnnotationBreadthMemberPath.
Por exemplo, você pode usar DataAnnotationBandLayer para anotar o intervalo de crescimento nos preços das ações.
API References
A seguir está uma lista de membros da API mencionados nas seções acima:
TargetAxis
: Essa propriedade especifica qual eixo deve ter um DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer habilitado.DataSource
: Essa propriedade vincula dados à camada de anotação para fornecer a forma precisa.StartValueXMemberPath
: Essa propriedade é um mapeamento para o nome da coluna de dados com posições x para o início de DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.StartValueYMemberPath
: Esta propriedade é um mapeamento para o nome da coluna de dados com posições y para o início do DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.EndValueXMemberPath
: Essa propriedade é um mapeamento para a coluna de dados com posições x para o final de DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.EndValueYMemberPath
: Esta propriedade é um mapeamento para a coluna de dados com posições y para o final do DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.StartLabelXMemberPath
: essa propriedade é um mapeamento para a coluna de dados que representa o rótulo de sobreposição para a posição inicial do xAxis ao longo do eixo.StartLabelXDisplayMode
|StartLabelYDisplayMode
|EndLabelXDisplayMode
|EndLabelYDisplayMode
|:CenterLabelXDisplayMode
essas propriedades especificam o que os rótulos de anotação devem ser exibidos no início, no final ou no centro da forma de anotação, por exemplo, valor de dados mapeados, rótulo de dados mapeados, valor do eixo ou ocultam um determinado rótulo de anotação.StartLabelYMemberPath
: Esta propriedade é um mapeamento para a coluna de dados que representa o rótulo do eixo para a posição inicial deDataAnnotationBandLayer
,DataAnnotationLineLayer
,DataAnnotationRectLayer
no eixo y.EndLabelYMemberPath
: Esta propriedade é um mapeamento para a coluna de dados que representa o rótulo do eixo para a posição final deDataAnnotationBandLayer
,DataAnnotationLineLayer
,DataAnnotationRectLayer
no eixo y.