Angular Chart Highlighting Example
O exemplo a seguir demonstra as diferentes opções de realce disponíveis no gráfico Angular.
Angular Modos e comportamentos de destaque de gráfico
Todos os gráficos Angular suportam uma variedade de opções de destaque.highlightingMode pode ser configurado para clarear ou desvanecer quando o mouse está pairando sobre uma série/item de dados renderizado na área do gráfico.highlightingBehavior pode ser configurado diretamente sobre ou sobre o elemento de dados mais próximo para ativar o efeito de destaque. A realce de modos e comportamentos é suportada pelosIgxCategoryChartComponent controles,IgxFinancialChartComponent eIgxDataChartComponent eles possuem a mesma API para usar o recurso de destaque.
O exemplo a seguir demonstra ohighlightingMode gráfico Angular.
O exemplo a seguir demonstra ohighlightingBehavior gráfico Angular.
Angular Realce da legenda do gráfico
Todos os Angular Charts suportam destaque de lendas.legendHighlightingMode pode ativado para que, quando o mouse estiver passando o mouse sobre um item de marcador de lenda, a série renderizada seja destacada na área de plot. O ressaltamento de legendas é suportado pelosIgxCategoryChartComponent controles,IgxFinancialChartComponent eIgxDataChartComponent eles têm a mesma API para usar o recurso de destaque.
O exemplo a seguir demonstra a série de legendas realçando Angular gráfico.
Highlight Layers
O Ignite UI for AngularIgxCategoryChartComponent pode habilitar três tipos de destaque ao passar o mouse sobre itens de dados.
O Destaque de Série destaca o único ponto de dados representado por um marcador ou coluna quando o ponteiro estiver posicionado sobre ele. Isso é possível ao definir a
isSeriesHighlightingEnabledpropriedade como verdadeira.O Destaque de Itens destaca itens em uma série, seja desenhando uma forma faixada em sua posição ou renderizando um marcador em sua posição. Isso é possível ao definir a
isItemHighlightingEnabledpropriedade como verdadeira.O Destaque por Categoria tem como alvo todos os eixos da categoria no gráfico. Eles desenham uma forma que ilumina a área do eixo mais próxima da posição do ponteiro. Isso é possível ao definir a
isCategoryHighlightingEnabledpropriedade como verdadeira.
O exemplo a seguir demonstra as diferentes camadas de realce disponíveis no gráfico Angular.
Additional Resources
Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:
API References
A seguir está uma lista de membros da API mencionados nas seções acima:
highlightingModehighlightingBehaviorLegendHighlightingBehaviorisCategoryHighlightingEnabledisItemHighlightingEnabledisSeriesHighlightingEnabledIgxCategoryChartComponentIgxDataChartComponentIgxFinancialChartComponent