Gráfico de líneas con datos
Plantilla de gráfico de líneas animado con un KPI que cuenta
Una línea blanca de adopción se dibuja de izquierda a derecha sobre una cuadrícula oscura. Ocho puntos se iluminan con su porcentaje a medida que la línea pasa, y debajo un KPI grande cuenta hasta la cifra final.
- 6s
- duración
- 4
- relaciones de aspecto
- 7
- controles
- 720p
- exportaciones gratis e ilimitadas
Data & Charts · 6s · 9:16
Line chart · KPI counter · Infographic
Un gráfico que se construye con tus números
Si buscas un gráfico animado, casi todo lo que encuentras son complementos para hojas de cálculo y archivos de proyecto de escritorio en los que cada valor es un fotograma clave que alguien escribió a mano. Esta es la versión en la que los datos mueven el dibujo: los siete segmentos de la línea se trazan en secuencia con una animación de progreso, los ocho puntos y sus etiquetas de porcentaje se colocan sobre los vértices, y el KPI de abajo cuenta hasta el último valor. Cambia una cifra y la geometría la sigue.
El cuadro es deliberadamente austero: un título, un subtítulo con el rango y la métrica, seis líneas horizontales de cuadrícula con etiquetas del eje Y de 0% a 50%, y ocho etiquetas de trimestre en la parte inferior. El color de acento controla una sola cosa: la nota de variación junto al KPI. Todo lo demás es blanco sobre casi negro, y eso es lo que mantiene el gráfico legible en tamaño miniatura.
6 segundos, tres momentos
Qué aparece en pantalla y cuándo. Cada elemento nombrado aquí es una capa del documento: puedes hacer clic en cualquiera en el lienzo y cambiarlo.
Momento 1 · 1.1s
Cuadrícula y título
El título y el subtítulo ya están colocados, las seis líneas de cuadrícula y los dos juegos de etiquetas de los ejes aparecieron en fundido, y el primer segmento de la línea se está dibujando desde la izquierda.
Momento 2 · 2.4s
La línea sube
Aproximadamente la mitad de los segmentos ya están dibujados, cada punto se ilumina y se etiqueta cuando la línea pasa por él, y el KPI empieza a contar.
Momento 3 · 3.6s
La línea se completa
La línea llegó al último punto, en 46%, y el KPI aterrizó en su cifra final con la nota de variación al lado, en el color de acento.
Tres pasos para un gráfico animado
- 01
Escribe el título y el subtítulo
En el subtítulo van el rango y la definición de la métrica: la línea que evita que un gráfico sea ambiguo. Ambos son controles de texto (Title y Subtitle).
- 02
Define los valores
Las etiquetas de los puntos y de los ejes son texto editable en el lienzo, y la etiqueta del KPI es un control (KPI label). Ajusta los valores y la línea dibujada, la posición de los puntos y el contador los siguen.
- 03
Dale color y exporta
El color de la línea y el color de acento son controles separados, y el grosor de la línea (Line thickness) va de 2 a 10 px. Exporta en 16:9 para una presentación o en 9:16 para una publicación en el feed.
Se dibuja sola
La línea se anima segmento a segmento
Cada uno de los siete segmentos tiene su propio progreso de trazado, así que la línea crece de izquierda a derecha a un ritmo legible en lugar de aparecer entera. Eso es lo que hace que el espectador siga la tendencia en vez de quedarse solo con una forma.
Puntos que van llegando
Ocho puntos, cada uno etiquetado cuando la línea lo alcanza
Cada punto aparece con un pequeño salto y su etiqueta de porcentaje entra en fundido cuando la línea pasa por él; la línea termina en el último punto y se mantiene. El gráfico cuenta su historia en orden en lugar de soltarlo todo en el primer fotograma.
Un KPI que cuenta
La cifra principal avanza hasta el valor final
Debajo del gráfico, el último valor cuenta hacia arriba en tipografía grande con una nota de variación al lado. Se genera a partir de los mismos datos que la línea, así que el número y la forma nunca pueden contradecirse.
Qué puedes cambiar
Siete controles, y cada etiqueta de eje, cada porcentaje de los puntos y la nota de variación se editan directamente en el lienzo.
- Haz clic en cualquier elemento del lienzo para editarlo directamente
- O describe el cambio en una frase y deja que el asistente lo haga
- Exporta en 9:16, 16:9, 1:1, 4:5 desde el mismo documento
Controles del Studio
7 con nombre
- TitleTextMulti-Product Adoption
- SubtitleTextShare of customers on 2+ products, 2022–2025
- KPI labelTextLatest quarter
- LineColour#F1F5F9
- AccentColour#5B8DEF
- Line thicknessSlider 2–106
- SpeedSlider 0.5–21
Por qué no una captura del dashboard
Las capturas de un dashboard arrastran la interfaz de la herramienta, una relación de aspecto que no sirve y una paleta de colores que no elegiste, y son estáticas en un feed que premia el movimiento. Reconstruir la misma serie aquí toma unos minutos, y el próximo trimestre toma uno: cambias ocho números y vuelves a exportar. Ese es el verdadero argumento a favor de una plantilla de gráfico: las animaciones de datos son las que más a menudo vuelves a hacer.
Gráfico de líneas con datos: preguntas y respuestas
¿El gráfico de líneas animado es gratis?+
Abrirlo y editarlo es gratis, y en el plan gratis puedes exportar en 720p sin límite, con una pequeña marca de agua de LazyKiwi. El 1080p sin marca de agua viene incluido con cualquier plan de pago.
¿En qué relaciones de aspecto puedo exportar?+
9:16, 16:9, 1:1 y 4:5. El 16:9 es la opción indicada para una presentación o un video de YouTube; en vertical, el diseño se reacomoda en lugar de recortar las etiquetas de los ejes.
¿Puedo poner mis propios números?+
Sí. Los valores, las etiquetas de los ejes, el título, el subtítulo y la etiqueta del KPI son editables, y la línea dibujada, la posición de los puntos y el contador se generan a partir de ellos en lugar de dibujarse encima.
¿Necesito After Effects?+
No. Animar gráficos en un editor de escritorio suele exigir un plugin o una pila de fotogramas clave de recorte de trazado (trim paths); aquí el trazado es una propiedad del documento.
¿Cuánto dura el clip?+
Seis segundos: la línea se completa a los 3,6 s y luego se mantiene en pantalla. Si hay muchos datos que leer, reduce el ritmo con el control de velocidad.
Más charts & data
Todas las data
Tarjeta de resumen de entrenamientoEl resumen de un entrenamiento, estilo app de fitness, sobre una foto oscurecida: las calorías suben como un contador, entran tres datos y la barra de meta se dibuja hasta una estrella.
Arcos sobre el globoUn globo de malla gira lentamente sobre un escenario azul medianoche mientras seis arcos entre ciudades se encienden uno tras otro, con una tabla de rutas que avanza a su lado.
Cifra financieraUna cifra en dólares sube alineada a la izquierda mientras debajo se dibuja una curva de ingresos y un área suave aparece bajo la línea; cuando el número llega a su valor, entran una píldora de crecimiento y una línea de comparaciónTus números, dibujándose solos.
Escribe las cifras de este trimestre y exporta una animación de gráfico en la relación de aspecto que necesite tu presentación o tu feed.