React Gráfico de áreas

Ignite UI for React Gráfico de áreas se representa como una colección de puntos conectados por segmentos de líneas rectas con el área por 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 pone de relieve la cantidad de cambio en un periodo 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, suelen ser cronológicos y muestran un cambio de cantidad, por ejemplo, la acumulación de una mercancía a lo largo del tiempo.

React Area Chart Example

Puede crear Gráfico de áreas de categoría React en el control IgrCategoryChart vinculando sus datos a la propiedad ItemsSource y configurando la propiedad chartType en Area enum, como se muestra en el siguiente ejemplo.

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.

React Area Chart with Single Series

Gráfico de áreas React se utiliza a menudo para mostrar el cambio de valor a lo largo del tiempo, como la cantidad de electricidad renovable producida. Puede crear este tipo de gráfico en el control IgrCategoryChart vinculando sus datos y estableciendo la propiedad chartType en el valor Area, como se muestra en el siguiente ejemplo.

React Area Chart with Multiple Series

De manera similar a cómo puede mostrar múltiples Gráfico de líneas y gráficos de splines, también puede combinar múltiples gráficos de áreas en el mismo control. Esto se logra vinculando varias fuentes de datos a la propiedad ItemsSource del control IgrCategoryChart.

React 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 React que se pueden crear usando el control IgrDataChart en lugar del control IgrCategoryChart con API simplificada.

React Step Area Chart

El Gráfico de áreas de pasos React pertenece a un grupo de gráficos 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 completa. 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 durante un período de tiempo o compara varios elementos. Puede crear este tipo de gráfico en el control IgrCategoryChart vinculando sus datos y configurando la propiedad chartType al valor StepArea, como se muestra en el siguiente ejemplo.

Advanced Types of Area Charts

Las siguientes secciones explican tipos más avanzados de gráficos de área React que se pueden crear usando el control IgrDataChart en lugar del control IgrCategoryChart con API simplificada.

React Range Area Chart

El Gráfico de áreas de rango React le permite mostrar el área como un rango entre dos valores a lo largo del tiempo. Puede crear este tipo de gráfico en el control IgrDataChart vinculando sus datos a IgrRangeAreaSeries, como se muestra en el siguiente ejemplo.

React Stacked Area Chart

Los caracteres del área apilada React se representan utilizando una colección de puntos conectados por segmentos de línea, con el área debajo de la línea completada y apilada una encima de la otra. Los gráficos de áreas apiladas siguen los mismos requisitos que los gráficos 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 IgrDataChart vinculando sus datos a IgrStackedAreaSeries, como se muestra en el siguiente ejemplo.

React Stacked 100% Area Chart

El Gráfico de áreas 100% apilada React le permite representar sus datos como parte de un todo que cambia a lo largo del tiempo, por ejemplo, el consumo de energía de un país relacionado 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 IgrDataChart vinculando sus datos a IgrStacked100AreaSeries, como se muestra en el siguiente ejemplo.

React Stacked Spline Area Chart

El Gráfico de áreas de spline apiladas React se representa utilizando una colección de puntos conectados por segmentos de spline curvos, con el área debajo de la spline curva rellena y apilada una encima de la otra. Gráfico de áreas spline apiladas sigue los mismos requisitos que los gráficos 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 IgrDataChart vinculando sus datos a IgrStackedSplineAreaSeries, como se muestra en el siguiente ejemplo.

React Stacked 100% Spline Area Chart

El Gráfico de áreas spline apilada al 100 % React es idéntico al Gráfico de áreas spline apilada 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 IgrDataChart vinculando sus datos a IgrStacked100SplineAreaSeries, como se muestra en el siguiente ejemplo.

React Radial Area Chart

El Gráfico de áreas radial React pertenece a un grupo de gráficos radiales 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. Puede crear este tipo de gráfico en el control IgrDataChart vinculando sus datos a IgrRadialAreaSeries, como se muestra en el siguiente ejemplo.

React Polar Area Chart

El Gráfico de áreas polar React pertenece a un grupo de Gráfico polar y tiene la forma de un polígono relleno, donde los vértices o esquinas están ubicados en las coordenadas polares (ángulo/radio) de los puntos de datos y están conectados por una línea recta y luego llenan 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 dibujada, en lugar de estirar los puntos y el área rellenados a lo largo de una línea horizontal. Puede crear este tipo de gráfico en el control IgrDataChart vinculando sus datos a IgrPolarAreaSeries, como se muestra en el siguiente ejemplo.

React Polar Spline Area Chart

El Gráfico de áreas de spline polar React pertenece a un grupo de Gráfico polar y tiene la forma de un polígono relleno, donde los vértices o esquinas están ubicados en las coordenadas polares (ángulo/radio) de los puntos de datos y están conectados por una spline curva y luego se rellenan. 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 dibujada, en lugar de estirar los puntos y el área rellena a lo largo de una línea horizontal. Puede crear este tipo de gráfico en el control IgrDataChart vinculando sus datos a IgrPolarSplineAreaSeries, como se muestra en el siguiente ejemplo.

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	`IgrCategoryChart`	`chartType` = `Area`
Área de paso	`IgrCategoryChart`	`chartType` = `StepArea`
Área de rango	`IgrDataChart`	`IgrRangeAreaSeries`
Área Radial	`IgrDataChart`	`IgrRadialAreaSeries`
Área polar	`IgrDataChart`	`IgrPolarAreaSeries`
Área de spline polar	`IgrDataChart`	`IgrPolarSplineAreaSeries`
Área apilada	`IgrDataChart`	`IgrStackedAreaSeries`
Área de spline apilada	`IgrDataChart`	`IgrStackedSplineAreaSeries`
Área apilada 100%	`IgrDataChart`	`IgrStacked100AreaSeries`
Área apilada 100 % spline	`IgrDataChart`	`IgrStacked100SplineAreaSeries`