Anotações do Blazor Chart
As interações e anotações de foco do gráfico Blazor são implementadas por meio de camadas de interação de foco, que são séries adicionadas à coleção de séries. Essas camadas dependem da posição do cursor. Cada uma dessas camadas de anotação fornece uma interação de foco diferente que pode ser usada individualmente ou combinada com outras para fornecer interações de foco poderosas.
Blazor Annotations Example
O exemplo a seguir demonstra as camadas de anotação que estão disponíveis no gráfico Blazor. Clique nas caixas de seleção para ativar e desativar cada camada.
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 Crosshair Layer
O IgbCrosshairLayer é renderizado como linhas cruzadas que se cruzam no valor real de cada série que elas estão configuradas para atingir, com cada série renderizando um conjunto separado de linhas.
Os tipos de mira incluem:
- Horizontal
- Vertical
- Ambos
Os retículos do gráfico também podem ser configurados para se ajustarem aos pontos de dados definindo a propriedade CrosshairsSnapToData como true, caso contrário, os retículos serão interpolados entre os pontos de dados. Anotações também podem ser habilitadas para exibir o valor do retículo ao longo do eixo.
Você pode configurar a camada de retículo para que a camada seja exibida somente em uma série específica, já que por padrão elas terão como alvo todas as séries no controle do gráfico. Para conseguir isso, defina a propriedade TargetSeries.
Por padrão, a cor das linhas de retículo é uma cor mais clara do que a série com a qual está interagindo. No entanto, essa configuração padrão pode ser substituída para que você possa selecionar uma cor que será usada para as linhas de retículo. Isso é feito definindo a propriedade Brush da Crosshair Layer.
O exemplo a seguir mostra como configurar a camada de mira, mas direcionando uma única série, definindo o tipo como vertical e estilizando a cor do pincel.
Blazor Final Value Layer
O IgbFinalValueLayer do controle IgbDataChart fornece uma visualização rápida ao longo do eixo do valor final exibido em uma série.
Você pode configurar esta anotação para direcionar uma série específica se quiser ter múltiplas camadas de valor final presentes com diferentes configurações. Isso pode ser feito definindo a propriedade TargetSeries.
Você também pode personalizar essa anotação definindo as seguintes propriedades:
AxisAnnotationBackground: Esta propriedade é usada para escolher o pincel para a cor de fundo da anotação. O padrão é usar o pincel de série.AxisAnnotationTextColor: Esta propriedade é usada para escolher o pincel para a cor do texto da anotação.AxisAnnotationOutline: Esta propriedade é usada para escolher o pincel para a cor do contorno da anotação.
O exemplo a seguir demonstra como estilizar a anotação da camada de valor final definindo as propriedades listadas acima.
Blazor Callout Layer
O IgbCalloutLayer exibe anotações de dados existentes ou novos no controle do gráfico. As anotações aparecem ao lado dos valores de dados fornecidos na fonte de dados.
Use as anotações de texto explicativo para exibir informações adicionais, como notas ou detalhes específicos sobre pontos de dados, que você gostaria de apontar para seus usuários.
Você pode configurar os callouts para direcionar uma série específica se quiser ter várias camadas de callout presentes com diferentes configurações. Isso pode ser feito definindo a propriedade TargetSeries.
Você também pode personalizar essa anotação definindo as seguintes propriedades:
CalloutLeaderBrush: Esta propriedade é usada para escolher o pincel para as linhas de chamada dos callouts da camada.CalloutOutline: esta propriedade é usada para escolher o pincel para a cor do contorno da anotação.CalloutBackground: Esta propriedade é usada para escolher o pincel para a cor de fundo da anotação. O padrão é usar o pincel de série.CalloutTextColor: Esta propriedade é usada para escolher o pincel para a cor do texto da anotação.CalloutStrokeThickness: Esta propriedade é usada para escolher a espessura do fundo do texto explicativo.CalloutCornerRadius: Esta propriedade é usada para curvar os cantos dos callouts.AllowedPositions: Esta propriedade é usada para escolher quais posições a camada de chamada tem permissão para usar. por exemplo, superior, inferior
O exemplo a seguir demonstra como estilizar as anotações da camada de texto explicativo definindo as propriedades listadas acima:
Timeline Styling
O exemplo a seguir demonstra como estilizar o gráfico de dados como uma linha do tempo com anotações definindo as propriedades AllowedPositions listadas acima:
API References
A seguir está uma lista de membros da API mencionados nas seções acima: