Gráfico de spline de Blazor
El gráfico de splines de Ignite UI for Blazor pertenece a un grupo de gráficos de categorías que se representan como una colección de puntos conectados por curvas suaves de spline. Los valores se representan en el eje Y y las categorías se muestran en el eje X. El gráfico de splines enfatiza la cantidad de cambio durante un período de tiempo o compara varios elementos, así como la relación de las partes con un todo, mostrando el total de los valores trazados. El gráfico de splines es idéntico a Gráfico de líneas en todos los aspectos, excepto en que la línea que conecta los puntos de datos tiene interpolación y suavizado de splines para mejorar la presentación de los datos.
Blazor Spline Chart Example
El siguiente ejemplo muestra cómo crear Blazor Spline Chart en elIgbCategoryChart control vinculando tus datos y configurando laChartType propiedad comoSpline enum.
Blazor Spline Chart with Single Series
El gráfico Spline 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 en Europa, como se muestra en el siguiente ejemplo.
Puedes crear este tipo de gráfico en elIgbCategoryChart control vinculando tus datos y configurando laChartType propiedad aSpline, como se muestra en el ejemplo siguiente:
Blazor Spline Chart with Multiple Series
Dado que Spline Chart le permite combinar varias series y comparar o ver cómo cambian con el tiempo. 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 se actualizará automáticamente para ajustarse a los datos adicionales.
Puedes crear este tipo de gráfico en elIgbCategoryChart control vinculando tus datos y configurando laChartType propiedad aSpline, como se muestra en el ejemplo siguiente:
Blazor Spline Chart Styling
Si necesita un gráfico de spline con más funciones, como componer otras series, puede configurar los marcadores, los pinceles de marcador, los contornos de marcador, los pinceles de serie y los contornos de serie como se muestra a continuación.
Puedes crear este tipo de gráfico en elIgbCategoryChart control vinculando tus datos y configurando laChartType propiedad aSpline, como se muestra en el ejemplo siguiente:
Advanced Types of Spline Charts
Las siguientes secciones explican tipos más avanzados de gráficos de Blazor Spline que pueden crearse usando elIgbDataChart control en lugar delIgbCategoryChart control con API simplificada.
Blazor Stacked Spline Chart
El gráfico de spline apilado 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, como mostramos en el siguiente ejemplo.
Puedes crear este tipo de gráfico en elIgbDataChart control vinculando tus datos a unIgbStackedSplineSeries, como se muestra en el ejemplo siguiente:
Blazor Stacked 100% Spline Chart
El gráfico apilado 100% spline es idéntico al gráfico apilado spline 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 Spline apilado 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.
Puedes crear este tipo de gráfico en elIgbDataChart control vinculando tus datos a unIgbStacked100SplineSeries, 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 |
|---|---|---|
| Ranura | IgbCategoryChart |
ChartType = Spline |
| Spline apilado | IgbDataChart |
IgbStackedSplineSeries |
| Apilado 100% Spline | IgbDataChart |
IgbStacked100SplineSeries |