Angular Chart Highlighting Example
En el ejemplo siguiente se muestran las diferentes opciones de resaltado que están disponibles en el gráfico Angular.
Modos y comportamientos de resaltado de gráficos Angular
Todos los gráficos Angular admiten una variedad de opciones de resaltado. highlightingMode
se puede configurar para que se aclare o se desvanezca cuando el mouse se coloca sobre una serie/elemento de datos representado en el área de trazado. highlightingBehavior
se puede configurar directamente sobre el elemento de datos más cercano o directamente para activar el efecto de resaltado. Los modos y comportamientos de resaltado son compatibles con los controles IgxCategoryChartComponent
, IgxFinancialChartComponent
e IgxDataChartComponent
y tienen la misma API para usar la función de resaltado.
En el ejemplo siguiente se muestra el highlightingMode
gráfico Angular.
En el ejemplo siguiente se muestra el highlightingBehavior
gráfico Angular.
Resaltado de leyenda de gráfico Angular
Todos los gráficos Angular admiten el resaltado de leyendas. legendHighlightingMode
se puede habilitar para que cuando el mouse pase sobre un elemento de marcador de leyenda, la serie representada se resalte en el área de trazado. El resaltado de leyendas es compatible con los controles IgxCategoryChartComponent
, IgxFinancialChartComponent
e IgxDataChartComponent
y tienen la misma API para usar la función de resaltado.
En el ejemplo siguiente se muestra la serie de leyendas que resalta Angular gráfico.
Highlight Layers
La Ignite UI for Angular IgxCategoryChartComponent
puede habilitar tres tipos de resaltado al pasar el cursor sobre elementos de datos.
El resaltado de series resaltará el único punto de datos representado por un marcador o columna cuando el puntero se coloque sobre él. Esto se habilita estableciendo la propiedad
isSeriesHighlightingEnabled
en verdadero.El resaltado de elementos resalta los elementos de una serie, ya sea dibujando una forma de banda en su posición o representando un marcador en su posición. Esto se habilita estableciendo la propiedad
isItemHighlightingEnabled
en verdadero.El resaltado de categorías apunta a todos los ejes de categorías del gráfico. Dibujan una forma que ilumina el área del eje más cercana a la posición del puntero. Esto se habilita estableciendo la propiedad
isCategoryHighlightingEnabled
en verdadero.
En el ejemplo siguiente se muestran las diferentes capas de resaltado que están disponibles en el gráfico Angular.
Additional Resources
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
highlightingMode
highlightingBehavior
LegendHighlightingBehavior
isCategoryHighlightingEnabled
isItemHighlightingEnabled
isSeriesHighlightingEnabled
IgxCategoryChartComponent
IgxDataChartComponent
IgxFinancialChartComponent