Web Components Gráfico de áreas

El Ignite UI for Web Components Gráfico de áreas se representa como una colección de puntos conectados por segmentos de línea recta con el área debajo de la línea rellenada. Los valores se representan en el eje Y (etiquetas en el lado izquierdo) y las categorías se muestran en el eje X (etiquetas inferiores). Este gráfico enfatiza la cantidad de cambio durante un período de tiempo o compara varios elementos, así como la relación de las partes de un todo, mostrando el total de los valores trazados. Por lo tanto, a menudo son cronológicos, mostrando un cambio de cantidad, por ejemplo, la acumulación de un producto a lo largo del tiempo.

Web Components Area Chart Example

Puedes crear Web Components Categoría Gráfico de áreas en elIgcCategoryChartComponent control vinculando tus datos aItemsSource propiedad y configurandochartType propiedad en Área enum, como se muestra en el ejemplo siguiente.

Area Chart Recommendations

Area Chart Use Cases

Existen varios casos de uso comunes para elegir un Gráfico de áreas:

Tenga un conjunto de datos grande y de gran volumen que se adapte bien a las interacciones de los gráficos, como panorámica, zoom y profundización.
Necesita comparar las tendencias de sus datos a lo largo del tiempo.
Quiere mostrar la diferencia entre 2 o más series de datos.
Quiere mostrar comparaciones acumulativas de parte y todo de distintas categorías.
Necesidad de mostrar tendencias de datos para una o más categorías para el análisis comparativo.
Necesidad de visualizar datos detallados de series de tiempo.

Area Chart Best Practices

Inicie siempre el eje Y (eje izquierdo o derecho) en 0 para que la comparación de datos sea precisa.
Ordene los datos de series temporales de izquierda a derecha.
Utilice colores transparentes para garantizar que los datos trazados detrás de otra serie no se bloqueen.

When Not to Use Area Charts

Tienes muchas (más de 7 o 10) series de datos. Su objetivo es garantizar que el gráfico sea legible.
Los datos de series de tiempo tienen valores similares (datos durante el mismo período). Esto hace que sea imposible diferenciar las áreas sombreadas superpuestas.

Area Chart Data Structure

La fuente de datos debe ser una matriz o una lista de elementos de datos (para series únicas).
La fuente de datos debe ser una matriz de matrices o una lista de listas (para series múltiples).
La fuente de datos debe contener dos o más elementos de datos para poder representar una línea entre ellos.
Todos los elementos de datos deben contener al menos una columna de datos (cadena o fecha y hora).
Todos los elementos de datos deben contener al menos una columna de datos numéricos.

Web Components Area Chart with Single Series

Web Components Gráfico de áreas se utiliza a menudo para mostrar el cambio de valor a lo largo del tiempo, como la cantidad de electricidad renovable producida. Puedes crear este tipo de gráfico enIgcCategoryChartComponent control vinculando tus datos y configurandochartType la propiedad enArea valor, como se muestra en el ejemplo siguiente.

Web Components Area Chart with Multiple Series

De forma similar a cómo puedes mostrar múltiples Gráfico de líneas y Spline Chart, también puedes combinar varios Area Charts en el mismo control. Esto se logra vinculando múltiples fuentes de datos aItemsSource la propiedad delIgcCategoryChartComponent control.

Web Components Area Chart Styling

Los gráficos de áreas suelen tener un relleno semitransparente para sus áreas, líneas más gruesas y marcadores un poco más grandes de lo habitual. A continuación se muestra un ejemplo que muestra cómo puede diseñar el Gráfico de áreas anterior en consecuencia.

Advanced Types of Area Charts

Las siguientes secciones explican tipos más avanzados de gráficos de área Web Components que pueden crearse usando elIgcDataChartComponent control en lugar delIgcCategoryChartComponent control con API simplificada.

Web Components Step Area Chart

El Web Components Step Gráfico de áreas pertenece a un grupo de diagramas de categorías y se representa utilizando una colección de puntos conectados por líneas verticales y horizontales continuas, con el área debajo de las líneas rellenada. Los valores se representan en el eje y y las categorías se muestran en el eje x. El gráfico de área de pasos enfatiza la cantidad de cambio a lo largo del tiempo o compara varios elementos. Puedes crear este tipo de gráfico enIgcCategoryChartComponent control vinculando tus datos y configurandochartType la propiedad enStepArea valor, como se muestra en el ejemplo siguiente.

Web Components Range Area Chart

El Gráfico de áreas de rango Web Components te permite mostrar el área como un rango entre dos valores a lo largo del tiempo. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcRangeAreaSeriesComponent como se muestra en el ejemplo siguiente.

Web Components Stacked Area Chart

El Web Components Stacked Area Chars se representa utilizando una colección de puntos conectados por segmentos de línea, con el área debajo de la línea rellenada y apilada unos sobre otros. Los Cartas de Área Apiladas cumplen todos los mismos requisitos que las Cartas de Área, con la única diferencia de que visualmente las áreas sombreadas están apiladas unas sobre otras. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcStackedAreaSeriesComponent como se muestra en el ejemplo siguiente.

Web Components Stacked 100% Area Chart

El Web Components Stacked 100% Gráfico de áreas permite representar tus datos como parte de un conjunto que cambia a lo largo del tiempo, por ejemplo, el consumo energético de un país relacionado con las fuentes de las que se producen. En tales casos, representar todos los elementos apilados por igual puede ser una mejor idea. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcStacked100AreaSeriesComponent como se muestra en el ejemplo siguiente.

Web Components Stacked Spline Area Chart

El Gráfico de áreas de Spline Apilado Web Components se representa usando una colección de puntos conectados por segmentos de spline curvados, con el área debajo de la spline curva rellenándose y apilándose unos sobre otros. El Spline Apilado Gráfico de áreas cumple todos los mismos requisitos que los gráficos de área, con la única diferencia de que las áreas visualmente sombreadas están apiladas unas sobre otras. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcStackedSplineAreaSeriesComponent como se muestra en el ejemplo siguiente.

Web Components Stacked 100% Spline Area Chart

El Web Components Gráfico de áreas Spline Apilado 100% es idéntico al Gráfico de áreas Spline Apilado 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 Apilado 100% presenta los datos en términos de un porcentaje de la suma de todos los valores en un punto de datos concreto. A veces la carta representa parte de un todo que se está cambiando con el tiempo. Por ejemplo, el consumo energético de un país relacionado con las fuentes de las que se produce. En tales casos, representar todos los elementos apilados por igual puede ser una mejor idea. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcStacked100SplineAreaSeriesComponent como se muestra en el ejemplo siguiente.

Web Components Radial Area Chart

El Web Components Radial Gráfico de áreas pertenece a un grupo de Radial Chart y tiene la forma de un polígono relleno que está delimitado por una colección de líneas rectas que conectan puntos de datos. Este tipo de gráfico utiliza el mismo concepto de trazado de datos que el Gráfico de áreas, pero envuelve los puntos de datos alrededor de un eje circular en lugar de estirarlos horizontalmente. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcRadialAreaSeriesComponent como se muestra en el ejemplo siguiente.

Web Components Polar Area Chart

El Web Components Polar Gráfico de áreas pertenece a un grupo de Gráfico polar y tiene la forma de un polígono relleno, donde los vértices o esquinas se encuentran en las coordenadas polares (ángulo/radio) de los puntos de datos y están conectados por una línea recta, llenando el área representada por los puntos conectados. El Gráfico de áreas polar utiliza los mismos conceptos de trazado de datos que el Gráfico de Marcadores de Dispersión, pero en su lugar envuelve los puntos alrededor de un círculo y rellena el área que se dibuja, en lugar de estirar los puntos y el área rellenados a lo largo de una línea horizontal. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcPolarAreaSeriesComponent como se muestra en el ejemplo siguiente.

Web Components Polar Spline Area Chart

La Web Components Spline Polar Gráfico de áreas pertenece a un grupo de Gráfico polar y tiene la forma de un polígono relleno, donde los vértices o esquinas se encuentran en las coordenadas polares (ángulo/radio) de los puntos de datos y están conectados por una spline curva, llenando el área representada por los puntos conectados. El Gráfico de áreas Spline Polar utiliza los mismos conceptos de trazado de datos que el Gráfico de Marcadores de Dispersión, pero en su lugar envuelve los puntos alrededor de un círculo y rellena el área que se dibuja, en lugar de estirar los puntos y el área rellenados a lo largo de una línea horizontal. Puedes crear este tipo de gráfico enIgcDataChartComponent control vinculando tus datos a,IgcPolarSplineAreaSeriesComponent como se muestra en el ejemplo siguiente.

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	`IgcCategoryChartComponent`	`chartType` = `Area`
Área de paso	`IgcCategoryChartComponent`	`chartType` = `StepArea`
Área de rango	`IgcDataChartComponent`	`IgcRangeAreaSeriesComponent`
Área Radial	`IgcDataChartComponent`	`IgcRadialAreaSeriesComponent`
Área polar	`IgcDataChartComponent`	`IgcPolarAreaSeriesComponent`
Área de spline polar	`IgcDataChartComponent`	`IgcPolarSplineAreaSeriesComponent`
Área apilada	`IgcDataChartComponent`	`IgcStackedAreaSeriesComponent`
Área de spline apilada	`IgcDataChartComponent`	`IgcStackedSplineAreaSeriesComponent`
Área apilada 100%	`IgcDataChartComponent`	`IgcStacked100AreaSeriesComponent`
Área apilada 100 % spline	`IgcDataChartComponent`	`IgcStacked100SplineAreaSeriesComponent`