Gráfico de splines Angular

    La Ignite UI for Angular 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.

    Angular Spline Chart Example

    En el ejemplo siguiente se muestra cómo crear Angular gráfico de splines en el IgxCategoryChartComponent control enlazando los datos y estableciendo la chartType propiedad en Spline enumeración.

    Angular 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 IgxCategoryChartComponent control enlazando los datos y estableciendo la chartType propiedad en Spline, como se muestra en el ejemplo siguiente:

    Angular 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 IgxCategoryChartComponent control enlazando los datos y estableciendo la chartType propiedad en Spline, como se muestra en el ejemplo siguiente:

    Angular 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 IgxCategoryChartComponent control enlazando los datos y estableciendo la chartType propiedad en Spline, como se muestra en el ejemplo siguiente:

    Advanced Types of Spline Charts

    Las siguientes secciones explican tipos más avanzados de gráficos Angular spline que se pueden crear usando el control IgxDataChartComponent en lugar del control IgxCategoryChartComponent con API simplificada.

    Angular 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 IgxDataChartComponent vinculando sus datos a un IgxStackedSplineSeriesComponent, como se muestra en el siguiente ejemplo:

    Angular 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 IgxDataChartComponent vinculando sus datos a un IgxStacked100SplineSeriesComponent, 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 IgxCategoryChartComponent chartType = Spline
    Spline apilado IgxDataChartComponent IgxStackedSplineSeriesComponent
    Apilado 100% Spline IgxDataChartComponent IgxStacked100SplineSeriesComponent