Angular Dashboard Tile Overview

    El mosaico del panel de Angular es un componente de visualización automática de datos que determina, mediante el análisis de una colección/matriz de DataSource o un solo punto de datos, cuál sería la visualización más adecuada para mostrar. A continuación, también proporciona un conjunto adicional de herramientas en su integrado IgxToolbarComponent que le permiten modificar la visualización que se presenta de diversas maneras.

    Se puede seleccionar una amplia variedad de visualizaciones para su visualización en función de la forma de los datos proporcionados, incluidos, entre otros: gráficos de categorías, gráficos radiales y polares, gráficos de dispersión, mapas geográficos, indicadores radiales y lineales, gráficos financieros y gráficos apilados.

    Interactuar con el menú de tipo de gráfico en la barra de herramientas permitirá seleccionar una visualización diferente entre la lista de posibles candidatos.

    Ejemplo de icono de panel de 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.

    dependencias

    Instale los siguientes paquetes en el conjunto de herramientas Ignite UI for Angular:

    npm install igniteui-angular-charts
    npm install igniteui-angular-core
    npm install igniteui-angular-dashboards
    npm install igniteui-angular-gauges
    npm install igniteui-angular-grids
    npm install igniteui-angular-inputs
    npm install igniteui-angular-layouts
    npm install igniteui-angular-maps
    cmd

    Se sugieren los siguientes módulos cuando se utiliza el componente Icono de panel:

    import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule,
             IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule,
             IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards";
    
    @NgModule({
        imports: [
            IgxDataChartDashboardTileModule,
            IgxRadialGaugeDashboardTileModule,
            IgxLinearGaugeDashboardTileModule,
            IgxGeographicMapDashboardTileModule,
            IgxPieChartDashboardTileModule,
            IgxDashboardTileModule
        ]
    })
    export class AppModule {}
    ts

    Uso

    En función de lo que vincule, la propiedad del icono del panel determinará DataSource qué visualización verá de forma predeterminada, ya que el control evaluará los datos que enlace y, a continuación, elegirá una visualización del conjunto de herramientas Ignite UI for Angular para mostrar. Los controles de visualización de datos que se incluyen para mostrarse en el icono del panel son los siguientes:

    La visualización de datos que se elige de forma predeterminada depende principalmente del esquema y del recuento de los DataSource datos que se han enlazado. Por ejemplo, si enlaza un único valor numérico, obtendrá a IgxRadialGaugeComponent, pero si enlaza una colección de pares de etiquetas de valor que son fáciles de distinguir entre sí, es probable que obtenga a XamDataPieChart. Si enlaza una DataSource que tiene más rutas de acceso de valor, recibirá una IgxDataChartComponent serie con varias columnas o series de líneas, dependiendo principalmente del recuento de la colección enlazada. También puede enlazar a un ShapeDataSource o datos que parecen contener puntos geográficos para recibir a IgxGeographicMapComponent.

    No está bloqueado en una sola visualización cuando enlaza y DataSource puede decirle al control que desea ver una visualización determinada estableciendo su VisualizationType propiedad. Por ejemplo, si desea específicamente ver un gráfico de líneas, puede definir el icono del panel de la siguiente manera:

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    La visualización o las propiedades de la visualización también se pueden configurar mediante el IgxToolbarComponent en la parte superior del control. Este IgxToolbarComponent tiene las herramientas predeterminadas para la visualización actual con la adición de cuatro específicas del mosaico del panel, resaltadas a continuación:

    De izquierda a derecha:

    • La primera herramienta mostrará una cuadrícula de datos con los DataSource proporcionados al control. Esta es una herramienta de alternancia, por lo que si vuelve a hacer clic en ella después de mostrar la cuadrícula, volverá a la visualización.
    • La segunda herramienta le permite configurar los ajustes de la visualización de datos actual.
    • La tercera herramienta le permite cambiar la visualización actual, lo que le permite trazar un tipo de serie diferente o mostrar un tipo de visualización completamente diferente. Esto se puede establecer en el control estableciendo la VisualizationType propiedad, mencionada anteriormente.
    • La última herramienta le permite configurar qué propiedades del elemento de datos subyacente se incluyen para el control. Puede configurar esto estableciendo la includedProperties colección or excludedProperties en el control.

    En esta demostración se muestra la integración del icono del panel con el Angular Gráfico circular. Las opciones de la barra de herramientas en la parte superior derecha proporcionan acceso para diseñar y cambiar la visualización de datos.

    EXAMPLE
    DATA
    MODULES
    TS
    HTML
    SCSS

    En esta demostración se muestra la integración del icono del panel de control con el mapa geográfico Angular. Las opciones de la barra de herramientas en la parte superior derecha proporcionan acceso para diseñar y cambiar la visualización de datos.

    EXAMPLE

    Referencias de API

    App Builder | CTA Banner

    Recursos adicionales