Gráfico apilado Web Components
El gráfico apilado Ignite UI for Web Components pertenece a un grupo especial de gráficos que representan múltiples valores de elementos de datos como áreas/polígonos, barras, columnas, líneas o splines apilados. Los gráficos apilados estándar representan los valores reales de los elementos de datos, mientras que los gráficos apilados al 100 % representan los valores como porcentaje de los valores totales.
Web Components Stacked Chart Types
En el siguiente ejemplo, puede utilizar el menú desplegable para cambiar entre todos los diferentes tipos de gráficos apilados disponibles en el control IgcDataChartComponent Web Components.
Las siguientes secciones demuestran tipos individuales de Ignite UI for Web Components.
Web Components Stacked Area Chart
Los gráficos de áreas apiladas se representan utilizando una colección de puntos conectados por segmentos de línea, con el área debajo de la línea rellena y apilada una encima de la otra. Los gráficos de áreas apiladas siguen los mismos requisitos que Gráfico de áreas, con la única diferencia de que visualmente las áreas sombreadas están apiladas una encima de la otra.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStackedAreaSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked 100 Area Chart
A veces, las series representan parte de un todo que cambia con el tiempo, por ejemplo, el consumo de energía de un país en relación con las fuentes a partir de las cuales se produce. En tales casos, representar todos los elementos apilados por igual puede ser una mejor idea.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStacked100AreaSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked Bar Chart
Un Gráfico de barras apiladas, o gráfico de barras apiladas, es un tipo de gráfico de categorías que se utiliza para comparar la composición de diferentes categorías de datos mostrando fragmentos de diferentes tamaños en las barras horizontales del gráfico. La longitud de cada barra, o pila de fragmentos, es proporcional a su valor total.
El Gráfico de barras apiladas se diferencia del Gráfico de barras en que los puntos de datos que representan sus datos se apilan uno al lado del otro horizontalmente para agrupar visualmente sus datos. Cada pila puede contener valores tanto positivos como negativos. Todos los valores positivos se agrupan en el lado positivo del eje X y todos los valores negativos se agrupan en el lado negativo del eje X.
En este ejemplo de Gráfico de barras apiladas, tenemos un eje X numérico (etiquetas inferiores del gráfico) y un eje Y de categoría (etiquetas izquierdas del gráfico). Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStackedBarSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked 100% Bar Chart
El Gráfico de barras apiladas 100 % Web Components es idéntico al gráfico de barras apiladas Web Components en todos los aspectos, excepto en el tratamiento de los valores en el eje X (etiquetas inferiores del gráfico). En lugar de presentar una representación directa de los datos, el gráfico de barras apiladas al 100% presenta los datos en términos de porcentaje de la suma de todos los valores en un punto de datos.
En este ejemplo de Gráfico de barras apiladas al 100 %, los valores del producto energético se muestran como un valor del 100 % de todos los datos en los fragmentos de las barras horizontales. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStacked100BarSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked Column Chart
El Gráfico de columnas apiladas es idéntico al Gráfico de columnas en todos los aspectos, excepto que las series se representan una encima de la otra en lugar de estar a un lado. El Gráfico de columnas apiladas se utiliza para mostrar la comparación de resultados entre series. Cada fragmento apilado de la colección representa un elemento visual en cada pila. Cada pila puede contener valores tanto positivos como negativos. Todos los valores positivos se agrupan en el lado positivo del eje Y y todos los valores negativos se agrupan en el lado negativo del eje Y. El Gráfico de columnas apiladas utiliza los mismos conceptos de trazado de datos que el Gráfico de barras apiladas, pero los puntos de datos se apilan a lo largo de la línea vertical (eje Y) en lugar de a lo largo de la línea horizontal (eje X).
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStackedColumnSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked 100% Column Chart
El Gráfico de columnas apiladas al 100% es idéntico al Gráfico de columnas apiladas en todos los aspectos excepto en el tratamiento de los valores en el eje Y. En lugar de presentar una representación directa de los datos, el Gráfico de columnas apiladas al 100% presenta los datos en términos de porcentaje de la suma de todos los valores en un punto de datos.
El siguiente ejemplo muestra un estudio realizado sobre el tráfico de compras online por departamentos a través de tabletas, teléfonos y ordenadores personales. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStacked100ColumnSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked Line Chart
El Gráfico de líneas apiladas se utiliza a menudo para mostrar el cambio de valor a lo largo del tiempo, como la cantidad de electricidad renovable producida durante varios años entre regiones. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStackedLineSeriesComponent, como se muestra en el siguiente ejemplo:
Web Components Stacked 100% Line Chart
El Gráfico de líneas apiladas 100% es idéntico al Gráfico de líneas apiladas en todos los aspectos excepto en el tratamiento de los valores en el eje y. En lugar de presentar una representación directa de los datos, el Gráfico de líneas apiladas al 100% presenta los datos en términos de porcentaje de la suma de todos los valores en un punto de datos. El siguiente ejemplo muestra un estudio realizado sobre el tráfico de compras online por departamentos a través de tabletas, teléfonos y ordenadores personales.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStacked100LineSeriesComponent, como se muestra en el siguiente ejemplo:
Web Components Stacked Spline Area Chart
Los gráficos de áreas de spline apiladas se representan utilizando una colección de puntos conectados por segmentos de spline curvos, con el área debajo de la spline curva rellena y apilada uno encima del otro. Los gráficos de áreas spline apiladas siguen los mismos requisitos que Gráfico de áreas, con la única diferencia de que las áreas visualmente sombreadas se apilan una encima de la otra.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStackedSplineAreaSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked 100% Spline Area Chart
El Gráfico de áreas apiladas 100% spline es idéntico al Gráfico de áreas apiladas spline en todos los aspectos excepto en el tratamiento de los valores en el eje y. En lugar de presentar una representación directa de los datos, el Gráfico de áreas spline apiladas al 100% presenta los datos en términos de un porcentaje de la suma de todos los valores en un punto de datos particular. A veces, el gráfico representa parte de un todo que ha cambiado con el tiempo. Por ejemplo, el consumo de energía de un país relacionado con las fuentes de donde se produce. En tales casos, representar todos los elementos apilados por igual puede ser una mejor idea.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStacked100SplineAreaSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked Spline Chart
El gráfico de spline apilado se utiliza a menudo para mostrar el cambio de valor a lo largo del tiempo, como la cantidad de electricidad renovable producida durante varios años entre regiones. Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStackedSplineSeriesComponent, como se muestra en el siguiente ejemplo.
Web Components Stacked 100% Spline Chart
El gráfico apilado 100% spline es idéntico al gráfico apilado spline en todos los aspectos excepto en el tratamiento de los valores en el eje y. En lugar de presentar una representación directa de los datos, el gráfico Spline apilado 100% presenta los datos en términos de porcentaje de la suma de todos los valores en un punto de datos. El siguiente ejemplo muestra un estudio realizado sobre el tráfico de compras online por departamentos a través de tabletas, teléfonos y ordenadores personales.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStacked100SplineSeriesComponent.
Additional Resources
Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:
API References
La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores:
| Tipo de gráfico | Nombre del control | Miembros de la API |
|---|---|---|
| Área apilada | IgcDataChartComponent |
IgcStackedAreaSeriesComponent |
| Barra apilada | IgcDataChartComponent |
IgcStackedBarSeriesComponent |
| Columna apilada | IgcDataChartComponent |
IgcStackedColumnSeriesComponent |
| Línea apilada | IgcDataChartComponent |
IgcStackedLineSeriesComponent |
| Spline apilado | IgcDataChartComponent |
IgcStackedSplineSeriesComponent |
| Área de spline apilada | IgcDataChartComponent |
IgcStackedSplineAreaSeriesComponent |
| Área apilada 100% | IgcDataChartComponent |
IgcStacked100AreaSeriesComponent |
| Barra apilada 100% | IgcDataChartComponent |
IgcStacked100BarSeriesComponent |
| Columna apilada al 100% | IgcDataChartComponent |
IgcStacked100ColumnSeriesComponent |
| Línea apilada 100% | IgcDataChartComponent |
IgcStacked100LineSeriesComponent |
| Apilado 100% Spline | IgcDataChartComponent |
IgcStacked100SplineSeriesComponent |
| Área apilada 100 % spline | IgcDataChartComponent |
IgcStacked100SplineAreaSeriesComponent |