Angular Gráfico de líneas

    El gráfico de Ignite UI for Angular Gráfico de líneas o de líneas 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 temporal o una categoría de comparación. Puede incluir uno o más conjuntos de datos para comparar, que se representarían como varias líneas en el gráfico.

    Angular Line Chart Example

    Puedes crear la Angular Gráfico de líneas en elIgxCategoryChartComponent control vinculando tus datos aItemsSource propiedad y configurandochartType propiedad comoLine enum, como se muestra en el ejemplo siguiente.

    Line Chart Recommendations

    Are Angular 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 Angular es idéntico al gráfico de splines Angular en todos los aspectos, excepto que la línea que conecta los puntos de datos no tiene interpolación ni suavizado de splines 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.

    Angular Line Chart with Single Series

    El Angular Gráfico de líneas 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 hemos mostrado en el siguiente ejemplo.

    Puedes crear este tipo de gráfico en elIgxCategoryChartComponent control vinculando tus datos y configurando lachartType propiedad aLine, como se muestra en el ejemplo siguiente:

    Angular Line Chart with Multiple Series

    Dado que el Angular Gráfico de líneas te permite combinar varias series y comparar o ver cómo cambian con el tiempo, veamos lo fácil que es lograrlo. Todo lo que tenemos que hacer es vincular 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 adaptarse a los datos adicionales.

    Puedes crear este tipo de gráfico en elIgxCategoryChartComponent control vinculando tus datos y configurando lachartType propiedad aLine, como se muestra en el ejemplo siguiente:

    Angular Line Chart with Live Data

    El gráfico de líneas Angular es capaz de manejar grandes volúmenes de datos, que abarcan millones de puntos de datos, y actualizarlos cada pocos milisegundos, como se muestra en la siguiente demostración.

    En este ejemplo, estamos transmitiendo datos en vivo al Angular Gráfico de líneas en un intervalo de su elección. Puede establecer los puntos de datos de 5.000 a 1 millón y actualizar el gráfico para optimizar la escala en función del dispositivo en el que esté representando el gráfico.

    Puedes crear este tipo de gráfico en elIgxCategoryChartComponent control vinculando tus datos y configurando lachartType propiedad aLine, como se muestra en el ejemplo siguiente:

    Angular 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.

    Puedes crear este tipo de gráfico en elIgxCategoryChartComponent control vinculando tus datos y configurando lachartType propiedad aLine, como se muestra en el ejemplo siguiente:

    También puedes crear una línea discontinua dentro de usandoIgxLineSeriesComponent laIgxDataChartComponent y configurando ladashArray propiedad en la serie. Esta propiedad toma un array de números que describirán la longitud de los guiones resultantes en la línea.

    El siguiente ejemplo demuestra el uso de endashArray unIgxLineSeriesComponent inIgxDataChartComponent:

    Advanced Types of Line Charts

    Las siguientes secciones explican tipos más avanzados de gráficos de líneas de Angular que pueden crearse usando elIgxDataChartComponent control en lugar delIgxCategoryChartComponent control con una API simplificada.

    Angular Stacked Line Chart

    El Gráfico de líneas 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. Puedes crear este tipo de gráfico en elIgxDataChartComponent control vinculando tus datos a unIgxStackedLineSeriesComponent, como se muestra en el ejemplo siguiente:

    Angular 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.

    Puedes crear este tipo de gráfico en elIgxDataChartComponent control vinculando tus datos a unIgxStacked100LineSeriesComponent, como se muestra en el ejemplo siguiente:

    Angular 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.

    Puedes crear este tipo de gráfico en elIgxDataChartComponent control vinculando tus datos a unIgxRadialLineSeriesComponent, como se muestra en el ejemplo siguiente:

    Angular 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.

    Puedes crear este tipo de gráfico en elIgxDataChartComponent control vinculando tus datos a unIgxPolarLineSeriesComponent, 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
    Línea IgxCategoryChartComponent chartType = Line
    Línea Polar IgxDataChartComponent IgxPolarLineSeriesComponent
    Línea Radial IgxDataChartComponent IgxRadialLineSeriesComponent
    Línea apilada IgxDataChartComponent IgxStackedLineSeriesComponent
    Línea apilada 100% IgxDataChartComponent IgxStacked100LineSeriesComponent