Blazor Gráfico de áreas
El Ignite UI for Blazor 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.
Blazor Area Chart Example
Puedes crear Blazor Categoría Gráfico de áreas en elIgbCategoryChart control vinculando tus datos aDataSource la propiedad y configurandoChartType la 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.
Blazor Area Chart with Single Series
Blazor 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 enIgbCategoryChart control vinculando tus datos y configurandoChartType la propiedad enArea valor, como se muestra en el ejemplo siguiente.
Blazor 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 aDataSource la propiedad delIgbCategoryChart control.
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
Las siguientes secciones explican tipos más avanzados de gráficos de área Blazor que pueden crearse usando elIgbDataChart control en lugar delIgbCategoryChart control con API simplificada.
Blazor Step Area Chart
El Blazor 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 enIgbCategoryChart control vinculando tus datos y configurandoChartType la propiedad enStepArea valor, como se muestra en el ejemplo siguiente.
Las siguientes secciones explican tipos más avanzados de gráficos de área Blazor que pueden crearse usando elIgbDataChart control en lugar delIgbCategoryChart control con API simplificada.
Blazor Range Area Chart
El Gráfico de áreas de rango Blazor te permite mostrar el área como un rango entre dos valores a lo largo del tiempo. Puedes crear este tipo de gráfico enIgbDataChart control vinculando tus datos a,IgbRangeAreaSeries como se muestra en el ejemplo siguiente.
Blazor Stacked Area Chart
El Blazor 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 enIgbDataChart control vinculando tus datos a,IgbStackedAreaSeries como se muestra en el ejemplo siguiente.
Blazor Stacked 100% Area Chart
El Blazor 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 enIgbDataChart control vinculando tus datos a,IgbStacked100AreaSeries como se muestra en el ejemplo siguiente.
Blazor Stacked Spline Area Chart
El Gráfico de áreas de Spline Apilado Blazor 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 enIgbDataChart control vinculando tus datos a,IgbStackedSplineAreaSeries como se muestra en el ejemplo siguiente.
Blazor Stacked 100% Spline Area Chart
El Blazor 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 enIgbDataChart control vinculando tus datos a,IgbStacked100SplineAreaSeries como se muestra en el ejemplo siguiente.
Blazor Radial Area Chart
El Blazor 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 enIgbDataChart control vinculando tus datos a,IgbRadialAreaSeries como se muestra en el ejemplo siguiente.
Blazor Polar Area Chart
El Blazor 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 enIgbDataChart control vinculando tus datos a,IgbPolarAreaSeries como se muestra en el ejemplo siguiente.
Blazor Polar Spline Area Chart
La Blazor 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 enIgbDataChart control vinculando tus datos a,IgbPolarSplineAreaSeries como se muestra en el ejemplo siguiente.
Additional Resources
Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:
- Gráfico de barras
- Gráfico de columnas
- Gráfico polar
- Gráfico radial
- Gráfico de líneas
- Gráfico apilado
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 |