Blazor Gráfico de áreas

Ignite UI for Blazor 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.

Blazor Area Chart Example

Puede crear Gráfico de áreas de categoría Blazor en el control IgbCategoryChart vinculando sus datos a la propiedad DataSource y estableciendo la propiedad ChartType en la enumeración Área, 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.

Blazor Area Chart with Single Series

Gráfico de áreas Blazor 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 IgbCategoryChart vinculando sus datos y estableciendo la propiedad ChartType en el valor Area, como se muestra en el siguiente ejemplo.

Blazor 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 múltiples fuentes de datos a la propiedad DataSource del control IgbCategoryChart.

Blazor 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

En las siguientes secciones se explican tipos más avanzados de gráficos de área Blazor que se pueden crear utilizando el control IgbDataChart en lugar del control IgbCategoryChart con API simplificada.

Blazor Step Area Chart

El Gráfico de áreas de pasos Blazor 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 rellenas. 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 IgbCategoryChart vinculando sus datos y configurando la propiedad ChartType en el valor StepArea, como se muestra en el siguiente ejemplo.

Advanced Types of Area Charts

Blazor Range Area Chart

El Gráfico de áreas de rango Blazor 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 IgbDataChart vinculando sus datos a IgbRangeAreaSeries, como se muestra en el siguiente ejemplo.

Blazor Stacked Area Chart

Los caracteres de área apilada Blazor 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 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 IgbDataChart vinculando sus datos a IgbStackedAreaSeries, como se muestra en el siguiente ejemplo.

Blazor Stacked 100% Area Chart

El Gráfico de áreas 100 % apilada Blazor 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 en relación con las fuentes de las que 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 IgbDataChart vinculando sus datos a IgbStacked100AreaSeries, como se muestra en el siguiente ejemplo.

Blazor Stacked Spline Area Chart

El Gráfico de áreas de spline apiladas Blazor 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 IgbDataChart vinculando sus datos a IgbStackedSplineAreaSeries, como se muestra en el siguiente ejemplo.

Blazor Stacked 100% Spline Area Chart

El Gráfico de áreas spline apilada al 100% Blazor 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 IgbDataChart vinculando sus datos a IgbStacked100SplineAreaSeries, como se muestra en el siguiente ejemplo.

Blazor Radial Area Chart

El Gráfico de áreas radial Blazor 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 IgbDataChart vinculando sus datos a IgbRadialAreaSeries, como se muestra en el siguiente ejemplo.

Blazor Polar Area Chart

El Gráfico de áreas polar Blazor 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 IgbDataChart vinculando sus datos a IgbPolarAreaSeries, como se muestra en el siguiente ejemplo.

Blazor Polar Spline Area Chart

El Gráfico de áreas de spline polar Blazor pertenece a un grupo de Gráfico polar y tiene la forma de un polígono relleno, donde los vértices o esquinas se ubican en las coordenadas polares (ángulo/radio) de los puntos de datos y están conectados mediante 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 IgbDataChart vinculando sus datos a IgbPolarSplineAreaSeries, 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	`IgbCategoryChart`	`ChartType` = `Area`
Área de paso	`IgbCategoryChart`	`ChartType` = `StepArea`
Área de rango	`IgbDataChart`	`IgbRangeAreaSeries`
Área Radial	`IgbDataChart`	`IgbRadialAreaSeries`
Área polar	`IgbDataChart`	`IgbPolarAreaSeries`
Área de spline polar	`IgbDataChart`	`IgbPolarSplineAreaSeries`
Área apilada	`IgbDataChart`	`IgbStackedAreaSeries`
Área de spline apilada	`IgbDataChart`	`IgbStackedSplineAreaSeries`
Área apilada 100%	`IgbDataChart`	`IgbStacked100AreaSeries`
Área apilada 100 % spline	`IgbDataChart`	`IgbStacked100SplineAreaSeries`