Descripción general del icono del panel de Web Components

    El mosaico del panel de Web Components 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 IgcToolbarComponent 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.

    Web Components Dashboard Tile Example

    Dependencies

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

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

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

    import { IgcDashboardTileModule, IgcDataChartDashboardTileModule, IgcRadialGaugeDashboardTileModule,
         IgcLinearGaugeDashboardTileModule, IgcGeographicMapDashboardTileModule,
         IgcPieChartDashboardTileModule } from "igniteui-angular-dashboards";

ModuleManager.register(
    IgcDataChartDashboardTileModule,
    IgcRadialGaugeDashboardTileModule,
    IgcLinearGaugeDashboardTileModule,
    IgcGeographicMapDashboardTileModule,
    IgcPieChartDashboardTileModule,
    IgcDashboardTileModule
);

    Usage

    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 Web Components 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 IgcRadialGaugeComponent, 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 IgcDataChartComponent 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 IgcGeographicMapComponent.

    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:

    La visualización o las propiedades de la visualización también se pueden configurar mediante el IgcToolbarComponent en la parte superior del control. Este IgcToolbarComponent 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 Web Components 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.

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

    API References

    Additional Resources