Gráfico de splines Web Components
La Ignite UI for Web Components Spline Chart 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. Spline Chart 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. Spline Chart es idéntico a Gráfico de líneas en todos los aspectos, excepto que la línea que conecta los puntos de datos tiene interpolación spline y suavizado para mejorar la presentación de los datos.
Web Components Spline Chart Example
En el ejemplo siguiente se muestra cómo crear Web Components gráfico de splines en el IgcCategoryChartComponent control enlazando los datos y estableciendo la chartType propiedad en Spline enumeración.
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.
Puede crear este tipo de gráfico en el control enlazando los datos y estableciendo la chartType propiedad en, como se muestra en Spline el IgcCategoryChartComponent 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.
Puede crear este tipo de gráfico en el control enlazando los datos y estableciendo la chartType propiedad en, como se muestra en Spline el IgcCategoryChartComponent 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.
Puede crear este tipo de gráfico en el control enlazando los datos y estableciendo la chartType propiedad en, como se muestra en Spline el IgcCategoryChartComponent ejemplo siguiente:
Advanced Types of Spline Charts
Las siguientes secciones explican tipos más avanzados de gráficos spline Web Components que se pueden crear usando el control IgcDataChartComponent en lugar del control IgcCategoryChartComponent 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.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStackedSplineSeriesComponent, como se muestra en el siguiente ejemplo:
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.
Puede crear este tipo de gráfico en el control IgcDataChartComponent vinculando sus datos a un IgcStacked100SplineSeriesComponent, 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 |
|---|---|---|
| Ranura | IgcCategoryChartComponent |
chartType = Spline |
| Spline apilado | IgcDataChartComponent |
IgcStackedSplineSeriesComponent |
| Apilado 100% Spline | IgcDataChartComponent |
IgcStacked100SplineSeriesComponent |