Blazor Gráfico de líneas
La Ignite UI for Blazor Gráfico de líneas o Line Graph es un tipo de gráficos de categorías que muestran los valores de datos continuos representados por puntos conectados por segmentos de línea recta de una o más cantidades durante un período de tiempo. A menudo se utiliza para mostrar tendencias y realizar análisis comparativos. El eje Y (etiquetas en el lado izquierdo) muestra un valor numérico, mientras que el eje X (etiquetas inferiores) muestra una serie de tiempo o una categoría de comparación. Puede incluir uno o más conjuntos de datos para comparar, lo que se representaría como varias líneas en el gráfico.
Blazor Line Chart Example
Puede crear el Blazor Gráfico de líneas en el archivo IgbCategoryChart control mediante la vinculación de sus datos a DataSource Propiedad y entorno ChartType propiedad a Line enum, como se muestra en el ejemplo siguiente.
Line Chart Recommendations
Are Blazor Line Charts right for your project?
- A diferencia de un gráfico de áreas, el gráfico de líneas no llena el área entre el eje X (eje inferior) y la línea.
- El gráfico de líneas Blazor es idéntico al gráfico de splines Blazor en todos los aspectos, excepto que la línea que conecta los puntos de datos no tiene interpolación spline ni suavizado para mejorar la presentación de los datos.
Un Gráfico de líneas incluye varias variantes según sus datos o cómo desea contar la historia correcta con sus datos. Éstas incluyen:
- Gráfico de líneas en capas
- Gráfico de líneas apiladas
- Gráfico de líneas escalonadas
- Gráfico de líneas polares
- Gráfico de líneas apiladas
Line Chart Use Cases
Existen varios casos de uso comunes para elegir un Gráfico de líneas:
- Tenga un conjunto de datos grande y de gran volumen que se adapte bien a las interacciones de gráficos como panorámica, zoom y profundización.
- Necesidad de comparar las tendencias 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.
Line 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 atributos visuales como líneas sólidas para mostrar una serie de datos.
When Not to Use Line Chart
- 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), lo que hace que las líneas superpuestas sean imposibles de diferenciar.
Line 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 al menos un elemento de datos.
- 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 Line Chart with Single Series
El Gráfico de líneas Blazor se utiliza a menudo para mostrar el cambio de valor a lo largo del tiempo, como la cantidad de electricidad renovable producida desde 2009 durante un período de diez años, como mostramos en el siguiente ejemplo.
Puede crear este tipo de gráfico en el control IgbCategoryChart vinculando sus datos y estableciendo la propiedad ChartType en Line, como se muestra en el siguiente ejemplo:
Blazor Line Chart with Multiple Series
Dado que el Gráfico de líneas Blazor le permite combinar varias series y compararlas o ver cómo cambian con el tiempo, veamos qué fácil es lograrlo. Todo lo que tenemos que hacer es vincularnos a una fuente de datos que contenga los datos de China y EE. UU., y el gráfico de líneas se actualizará automáticamente para ajustarse a los datos adicionales.
Puede crear este tipo de gráfico en el control IgbCategoryChart vinculando sus datos y estableciendo la propiedad ChartType en Line, como se muestra en el siguiente ejemplo:
Blazor Line Chart with Live Data
El gráfico Blazor Line es capaz de manejar grandes volúmenes de datos, que abarcan millones de puntos de datos, y actualizarlos cada pocos milisegundos, como se demuestra en la siguiente demostración.
En este ejemplo, estamos transmitiendo datos en vivo al Gráfico de líneas Blazor en un intervalo de su elección. Puede configurar los puntos de datos de 5000 a 1 millón y actualizar el gráfico para optimizar la escala según el dispositivo en el que esté representando el gráfico.
Puede crear este tipo de gráfico en el control IgbCategoryChart vinculando sus datos y estableciendo la propiedad ChartType en Line, como se muestra en el siguiente ejemplo:
Blazor Styling Line Chart
Una vez que nuestro gráfico esté configurado, es posible que deseemos realizar algunas personalizaciones de estilo adicionales, como cambiar los colores de las líneas, cambiar la familia de fuentes de la leyenda y/o aumentar el tamaño de las etiquetas de los ejes para que sea más fácil de leer.
Puede crear este tipo de gráfico en el control IgbCategoryChart vinculando sus datos y estableciendo la propiedad ChartType en Line, como se muestra en el siguiente ejemplo:
También puede crear una línea discontinua dentro de IgbLineSeries utilizando IgbDataChart y configurando la propiedad DashArray en la serie. Esta propiedad toma una serie de números que describirán la longitud de los guiones resultantes en la línea.
El siguiente ejemplo demuestra el uso de DashArray en IgbLineSeries en IgbDataChart:
Advanced Types of Line Charts
En las siguientes secciones se explican tipos más avanzados de gráficos de líneas Blazor que se pueden crear utilizando el control IgbDataChart en lugar del control IgbCategoryChart con API simplificada.
Blazor 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 IgbDataChart vinculando sus datos a IgbStackedLineSeries, como se muestra en el siguiente ejemplo:
Blazor 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 IgbDataChart vinculando sus datos a IgbStacked100LineSeries, como se muestra en el siguiente ejemplo:
Blazor Radial Line Chart
El Gráfico de líneas radiales pertenece a un grupo de gráficos radiales y tiene la forma de un polígono sin relleno 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 líneas, 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 IgbRadialLineSeries, como se muestra en el siguiente ejemplo:
Blazor Polar Line Chart
El Gráfico de líneas polares pertenece a un grupo de gráficos polares y se representa utilizando una colección de líneas rectas que conectan puntos de datos en un sistema de coordenadas polares (ángulo/radio). Los gráficos de líneas polares utilizan los mismos conceptos de trazado de datos que los Gráfico de líneas de dispersión, con la diferencia de que la visualización envuelve los puntos de datos alrededor de un círculo en lugar de estirarlos horizontalmente.
Puede crear este tipo de gráfico en el control IgbDataChart vinculando sus datos a IgbPolarLineSeries, 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 |
|---|---|---|
| Línea | IgbCategoryChart |
ChartType = Line |
| Línea Polar | IgbDataChart |
IgbPolarLineSeries |
| Línea Radial | IgbDataChart |
IgbRadialLineSeries |
| Línea apilada | IgbDataChart |
IgbStackedLineSeries |
| Línea apilada 100% | IgbDataChart |
IgbStacked100LineSeries |