Gráfico de líneas

    Un Gráfico de líneas es un tipo de gráfico de líneas de categorías que muestra 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 valores numéricos, mientras que el eje X (etiquetas en la parte inferior) muestra una serie de tiempo o una categoría de comparación. Puede incluir uno o más conjuntos de datos para comparar, lo que se representaría como varias líneas en el gráfico. El Gráfico de líneas es idéntico al gráfico de spline en todos los aspectos, excepto que la línea que conecta los puntos de datos no tiene interpolación spline ni suavizado para mejorar la presentación de los datos. El Gráfico de líneas es visualmente idéntico a la Ignite UI for Angular el componente Gráfico de líneas angulares

    Line Chart Demo

    El Gráfico de líneas tiene título, leyenda y área del gráfico, donde puede elegir entre los estados inactivo y flotante. También admite dos tipos de gráficos: Línea y Área con varias configuraciones de Cantidad de serie y permite ajustar la Leyenda en consecuencia.

    Title

    El Gráfico de líneas tiene un título que se puede cambiar u ocultar si no es necesario. En Figma puedes ocultar el título desactivando la propiedad booleana Title y gracias a la función de diseño automático, el diseño del gráfico se ajustará en consecuencia. En Sketch, el diseño inteligente se encarga de ajustar el gráfico en consecuencia cuando oculta el título configurándolo en ~Sin símbolo. En Adobe XD, puede lograr lo mismo eliminando la capa de título y dejando que la pila actualice el diseño en consecuencia.

    Legend

    El Gráfico de líneas viene con una leyenda para mostrar el número de series que contiene y lo que representan. La Leyenda en Figma se construye usando diseño automático, lo que significa que puede mostrar/ocultar elementos de la serie desde el panel de capas y el contenido se ajustará en consecuencia. También puedes ocultarlo por completo desactivando la propiedad booleana Legend. En Sketch se crea utilizando un diseño inteligente y se puede ajustar para contener la cantidad exacta de elementos de la serie estableciendo las anulaciones de aquellos que no son necesarios en ~Sin símbolo. En Adobe XD, el uso de una pila le permite lograrlo eliminando las capas de elementos de leyenda innecesarias. La forma de los elementos de leyenda también se puede configurar con soporte integrado para rectángulo, línea y punto.

    Chart Type

    El tipo de gráfico permite cambiar entre línea y área. Este último tiene el área entre el eje X y la línea rellena con el color de la serie. Los gráficos de áreas se utilizan para representar qué tan grande es el cambio y cuál es la tendencia a lo largo del tiempo.

    State

    El Gráfico de líneas tiene dos estados: inactivo y suspendido. En Figma puede cambiar entre los dos usando la operación booleana "Información sobre herramientas al pasar el mouse" desde el panel de propiedades, una vez que seleccione el componente Tipo de gráfico anidado, mientras que en Sketch esto se logra con Symbol Overrides. En Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre estados. En el estado de desplazamiento, se muestra una información sobre herramientas que brinda información sobre los valores de la serie en este punto al pasar el cursor sobre un punto de datos.

    Y-Axis

    El eje Y del Gráfico de líneas se compone de un título, etiquetas y el propio eje. El Título y las Etiquetas son configurables y para ocultar una etiqueta simplemente ocúltela del panel de capas en Figma o establezca su anulación en ~Sin símbolo en Sketch. En Adobe XD puedes lograr esto eliminando la capa. De forma predeterminada, el eje Y está oculto en Figma y Adobe XD y configurado en Transparent en Sketch. Para hacerlo visible en Figma y Adobe XD, vaya al panel de capas, haga clic derecho en la capa del eje Y y seleccione "Mostrar/Ocultar". Se puede lograr lo mismo en Sketch eligiendo un estilo de capa diferente para el eje Y. Si desea ocultar todos los elementos a la vez, oculte el componente anidado del eje Y del panel de capas en Figma, cambie la anulación del eje Y a ~Sin símbolo en Sketch o elimine su capa en Adobe XD.

    Gridlines

    El Gráfico de líneas tiene líneas de cuadrícula integradas para facilitar el seguimiento visual de un punto de datos hasta un valor en el eje Y. En Figma puede mostrarlos/ocultarlos seleccionando el componente Tipo de gráfico anidado y activando/desactivando la propiedad booleana "Cuadrícula" en el panel de propiedades. Para ocultarlos en Sketch y Adobe XD simplemente establezca su color en Transparent.

    Series Amount

    El Gráfico de líneas viene con una selección de una, dos y tres series que se representarán en el área del gráfico. Esto también es válido para el tipo de Área.

    Estilismo

    En primer lugar, el Gráfico de líneas le permite cambiar el color de la serie. Se recomienda utilizar solo colores de la paleta para visualizaciones de datos con matices denominados serie.1, serie.2 y así sucesivamente hasta serie.10. También puede cambiar los colores de los ejes vertical y horizontal, las líneas de la cuadrícula, así como los colores de fondo y borde del área del gráfico. Los títulos, etiquetas, valores de anotaciones, etc. también se pueden personalizar a través de los estilos de texto disponibles en Indigo.Design System.

    Usage

    Utilice el Gráfico de líneas cuando tenga un conjunto de datos continuo y desee ver la cantidad de cambios durante un período de tiempo. Si utiliza el tiempo para representar el cambio en la categoría, siempre debe establecerlo en el eje horizontal. Inicie siempre el eje Y en 0 para que la comparación de datos sea precisa y ordene los datos de series temporales de izquierda a derecha. Utilice la relación de aspecto adecuada para minimizar las caídas dramáticas de la pendiente. Cuando hay más de una serie en el gráfico se deben utilizar colores diferentes para poder distinguirlas. Usar una leyenda para indicar lo que representan se considera una buena práctica.

    Hacer No

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.