Bloque de gráfico de barras
Barras verticales u horizontales para comparar valores entre categorías — el gráfico de trabajo para "cuál de estos es más grande", con hasta 3 series de ancho.
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 que repite cada número que dibuja la imagen. La tabla no es una alternativa añadida para clientes rotos — son los mismos números que la imagen, en HTML plano, y es lo que hace que el gráfico sea utilizable en clientes de solo texto, bandejas de entrada con imágenes bloqueadas, y lectores de pantalla.
Los datos se crean como filas: una columna de Categoría más hasta tres columnas numéricas de serie. La Serie 1 siempre está activa — un gráfico de barras de una sola serie no necesita un nombre de serie propio, ya que el propio título del bloque ya la identifica.
Las Series 2 y 3 solo se activan una vez que les das un nombre en Nombre de la serie 2 / Nombre de la serie 3. Una columna de valores parcialmente completada sin nombre de serie se ignora en lugar de aparecer como una barra fantasma sin etiqueta, así que los datos parcialmente completados nunca se filtran al renderizado. Cada serie activa obtiene su propio color, elegido por el autor por serie o resuelto desde la paleta categórica del proyecto. Una leyenda (muestra de color + etiqueta) solo aparece una vez que hay 2 o más series activas — una serie única ya está nombrada por el propio título del gráfico, así que una leyenda de un solo elemento sería redundante.
Con hasta unas 8 categorías, cada barra recibe una etiqueta de valor directa dibujada justo sobre o encima de ella en la imagen misma, además de la tabla de datos. Pasado ese umbral, el gráfico deja las etiquetas por barra en favor de un eje de valor compartido con líneas de cuadrícula. Intentar ajustar una etiqueta de valor en cada una de más de una docena de barras deja de ser legible bastante antes de ese punto. Así el eje se hace cargo de la lectura a simple vista, y la tabla de datos se convierte en la fuente precisa para los números exactos. El gráfico está limitado a 24 categorías en total; cualquier cosa creada más allá de eso simplemente no se dibuja (la tabla de datos solo refleja lo que realmente se trazó).
Las barras horizontales invierten el eje de categorías para que corra de arriba hacia abajo en lugar de izquierda a derecha. Elige esto cuando los nombres de categoría son largos o numerosos — las etiquetas horizontales no necesitan rotarse ni truncarse como sí lo requieren las etiquetas del eje vertical.
Campos configurables:
- Título del gráfico — mostrado encima de la imagen; también el nombre de serie de alternativa cuando solo la Serie 1 está activa.
- Interruptor de Barras horizontales.
- Datos — la lista de filas (Categoría + Serie 1/2/3).
- Nombre de la serie 1/2/3 y Color de la serie 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 leyenda/tabla.
Un gráfico de barras también puede vincular sus filas a una fuente de datos conectada en lugar de crearlas directamente. Un campo de Agrupar por convierte cada valor distinto en una categoría, emparejado con hasta 3 campos de serie — cada uno con su propio agregado (Suma, Promedio, Conteo, o Fila más reciente) — reflejando la misma forma de hasta 3 series que las filas creadas manualmente. Un filtro opcional puede referenciar etiquetas de combinación del destinatario, así el mismo bloque le muestra a cada destinatario su propia porción de una fuente compartida. Mira Vincular gráficos a datos reales para la mecánica completa, incluido el modo de resultados de respuesta de campaña.
Ejemplos
Subject
Q3 revenue vs. cost breakdown
El propósito de proyecto Panel de control siembra automáticamente un gráfico de barras, justo debajo de una fila de tres tarjetas de indicador clave — un punto de partida de un clic para un informe recurrente; mira la plantilla de cuadrícula de panel de control. Un resumen semanal de ventas puede graficar los ingresos por región como tres o cuatro categorías con una sola serie, o "esta semana frente a la semana pasada" como dos series por categoría para una comparación directa. Un informe posterior a un evento podría usar barras horizontales para "confirmaciones de asistencia por escuadra" cuando hay una docena de nombres de equipo demasiado largos para caber como etiquetas del eje vertical. Un resumen de progreso del sector educativo podría graficar el puntaje promedio de cuestionario por sección de clase, una barra por sección, vinculado en vivo a una fuente de datos para que los números se mantengan actualizados cada vez que se realiza el envío recurrente.
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">Revenue by region</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
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">Revenue</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
</tr>
</table>
</div>
El <img> lleva un texto alternativo descriptivo que resume cada valor de categoría/serie, y la tabla debajo repite los mismos números como HTML plano siempre visible.