Bloque de gráfico de líneas / área
Una tendencia a lo largo de una secuencia ordenada — semanas, meses, etapas de embudo a lo largo del tiempo — dibujada como una línea trazada o, con el interruptor de relleno activado, un área sombreada debajo de ella. Hasta 3 series.
Cómo funciona
El gráfico se renderiza como un único PNG generado en el servidor — sin biblioteca de gráficos del lado del cliente, sin JavaScript — con una tabla de datos HTML siempre visible justo debajo, repitiendo cada número que dibuja la imagen. Es el mismo emparejamiento innegociable que asume cada gráfico de esta familia, así que la tendencia sigue siendo legible en clientes de solo texto, bandejas de entrada con imágenes bloqueadas, y con las imágenes desactivadas.
La forma de creación es idéntica a la del gráfico de barras: una columna de Categoría (aquí normalmente un período de tiempo — "Semana 1", "Lun", "T1" — aunque puede ser cualquier etiqueta ordenada) más hasta tres columnas de series numéricas. La Serie 1 siempre está activa, tomando prestado el propio título del gráfico como su nombre cuando no defines uno. Las Series 2 y 3 solo se activan una vez que se les da un nombre, así que una columna de valores parcialmente llena sin etiqueta de serie nunca aparece como una línea fantasma sin nombre. Cada serie activa se dibuja como su propia línea trazada con su propio color; una leyenda solo aparece una vez que hay 2 o más series activas.
El interruptor Relleno convierte el gráfico de líneas en un gráfico de área: la región debajo de cada línea se sombrea con baja opacidad hasta el eje. Es un interruptor en lugar de un bloque separado, ya que el modelo de datos subyacente, los ejes y la forma de categoría son exactamente los mismos en cualquier caso — solo cambia cómo se renderiza la línea. Con varias series rellenas, las regiones superpuestas se mantienen visualmente distinguibles, porque cada una conserva su propio color de serie con baja opacidad. Este bloque sigue rechazando los ejes duales, así que varias series rellenas siempre comparten una sola escala de valores.
Los marcadores de punto (pequeños círculos rellenos en cada valor de dato escrito) se dibujan sobre la línea para cada categoría, hasta unas 20 categorías. Pasado ese punto, los marcadores se reducen y dejan de dibujarse individualmente, ya que a alta densidad se superpondrían en una mancha sólida a lo largo de la línea en lugar de leerse como puntos distintos. La línea trazada en sí, el eje de valores compartido, y la tabla de datos siguen transmitiendo la tendencia pasado ese umbral — leer el gráfico no depende en realidad de los marcadores.
Campos configurables:
- Título del gráfico — mostrado sobre la imagen; también el nombre de serie alternativo cuando solo la Serie 1 está activa.
- Interruptor Relleno (variante de gráfico de área).
- Datos — la lista de filas (Categoría + Serie 1/2/3), el mismo conjunto de columnas que usa el gráfico de barras.
- Nombre y color de las Series 1/2/3.
- Color de fondo, relleno, borde, radio de borde en la tarjeta.
- Pares independientes de color/tamaño de fuente para el título y el texto de la leyenda/tabla.
Un gráfico de líneas también puede vincular sus filas a una fuente de datos conectada en lugar de escribirlas. Un campo Agrupar por convierte cada valor distinto en un punto a lo largo del eje de categorías, emparejado con hasta 3 campos de serie, cada uno con su propio agregado. Un filtro opcional puede referenciar etiquetas de combinación del destinatario para una vista de la misma tendencia por destinatario. Mira Vincular gráficos a datos reales para la mecánica completa, incluido el modo de resultados de respuesta de campaña.
Ejemplos
Subject
Weekly signups are trending up
Un resumen semanal de operaciones puede graficar el conteo de tickets abiertos de las últimas 8 semanas como una sola línea, con los marcadores de punto todavía visibles a ese conteo, dando una lectura inmediata de si la tendencia está mejorando. Un resumen de ventas podría usar un gráfico de área relleno para los ingresos acumulados a lo largo de un trimestre, una serie por línea de producto (hasta 3). El lector ve tanto la tendencia individual como, visualmente, el sombreado combinado acumularse semana tras semana. Un informe de rendimiento recurrente puede vincularse directamente a una fuente de datos filtrada por destinatario mediante una etiqueta de combinación — "el uso de tu cuenta este mes" — así el gráfico de líneas de un mismo proyecto muestra una tendencia distinta a cada destinatario del mismo envío.
Cómo se ve la alternativa estática
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Open tickets</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Open tickets</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
</tr>
</table>
</div>
El texto alternativo resume cada par de valores categoría/serie para que la tendencia sea legible incluso sin cargar la imagen; la tabla debajo son los mismos números como HTML plano.