Gráfico de spline de Web Components
El gráfico de splines de Ignite UI for Web Components 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.
Web Components Spline Chart Example
El siguiente ejemplo muestra cómo crear Web Components Spline Chart en elIgcCategoryChartComponent control vinculando tus datos y configurando lachartType propiedad comoSpline enum.
Web Components 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 elIgcCategoryChartComponent control vinculando tus datos y configurando lachartType propiedad aSpline, como se muestra en el ejemplo siguiente:
Web Components 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 elIgcCategoryChartComponent control vinculando tus datos y configurando lachartType propiedad aSpline, como se muestra en el ejemplo siguiente:
Web Components 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 elIgcCategoryChartComponent 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 Web Components Spline que pueden crearse usando elIgcDataChartComponent control en lugar delIgcCategoryChartComponent control con API simplificada.
Web Components 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 elIgcDataChartComponent control vinculando tus datos a unIgcStackedSplineSeriesComponent, como se muestra en el ejemplo siguiente:
Web Components 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 elIgcDataChartComponent control vinculando tus datos a unIgcStacked100SplineSeriesComponent, 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 | IgcCategoryChartComponent |
chartType = Spline |
| Spline apilado | IgcDataChartComponent |
IgcStackedSplineSeriesComponent |
| Apilado 100% Spline | IgcDataChartComponent |
IgcStacked100SplineSeriesComponent |