Ejemplo de resaltado de gráfico de Angular

    El siguiente ejemplo demuestra las diferentes opciones de resaltado que están disponibles en el gráfico Angular.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Angular Modo y comportamientos de resaltado de gráficos

    Todos los gráficos Angular admiten una variedad de opciones de resaltado. highlightingMode Se puede configurar para que se ilumine o se desvanezca cuando el ratón se desplaza sobre una serie/elemento de datos renderizado en el área de trazado. highlightingBehavior Se puede establecer directamente sobre o en el elemento de datos más cercano para activar el efecto de resaltado. Los modos y comportamientos de resaltado son compatibles con los IgxCategoryChartComponent controles , IgxFinancialChartComponent, y IgxDataChartComponent tienen la misma API para usar la característica de resaltado.

    El siguiente ejemplo demuestra el highlightingMode del gráfico Angular.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    El siguiente ejemplo demuestra el highlightingBehavior del gráfico Angular.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Angular Resaltado de la leyenda del gráfico

    Todos los gráficos de Angular admiten el resaltado de leyendas. legendHighlightingMode puede habilitado para que cuando el mouse esté pasando el mouse sobre un elemento de marcador de leyenda, la serie renderizada se resalte en el área de trazado. El resaltado de leyendas es compatible con los IgxCategoryChartComponent controles , IgxFinancialChartComponent, y IgxDataChartComponent tienen la misma API para usar la característica de resaltado.

    El siguiente ejemplo demuestra la serie de leyendas resaltando el gráfico Angular.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    Resaltar capas

    El Ignite UI for Angular IgxCategoryChartComponent puede habilitar tres tipos de resaltado al pasar el cursor sobre los elementos de datos.

    1. 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.

    2. 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.

    3. 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.

    El siguiente ejemplo demuestra las diferentes capas de resaltado que están disponibles en el gráfico Angular.

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Recursos adicionales

    Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:

    Referencias de API

    La siguiente es una lista de miembros de API mencionados en las secciones anteriores: