Blocco Grafico a barre
Barre verticali o orizzontali per confrontare valori tra categorie — il grafico da lavoro per "quale di questi è più grande", fino a 3 serie.
Come funziona
Il grafico viene renderizzato come una singola PNG generata sul server (nessuna libreria di grafici lato client, nessun JavaScript) con una tabella dei dati HTML sempre visibile proprio sotto, che ripete ogni numero disegnato nell'immagine. La tabella non è un fallback aggiunto per i client che non funzionano bene — sono gli stessi numeri dell'immagine, in puro HTML, ed è ciò che rende il grafico utilizzabile nei client solo testo, nelle caselle di posta che bloccano le immagini e negli screen reader.
I dati vengono inseriti come righe: una colonna Category più fino a tre colonne numeriche di serie. La Serie 1 è sempre attiva — un grafico a barre a serie singola non ha bisogno di un proprio nome, perché il titolo del blocco stesso già la identifica.
Le Serie 2 e 3 si attivano solo quando gli dai un nome in Series 2 name / Series 3 name. Una colonna di valori parzialmente compilata senza un nome di serie viene ignorata invece di comparire come una barra fantasma senza etichetta, così i dati parzialmente compilati non finiscono mai nel rendering. Ogni serie attiva ha un proprio colore, scelto dall'autore per ogni serie oppure risolto dalla palette categoriale del progetto. Una legenda (campione colorato + etichetta) appare solo quando ci sono 2 o più serie attive — una serie singola è già identificata dal titolo del grafico, quindi una legenda con una sola voce sarebbe ridondante.
Fino a circa 8 categorie, ogni barra riceve un'etichetta di valore diretta disegnata sopra o accanto ad essa nell'immagine stessa, oltre alla tabella dei dati. Superata quella soglia, il grafico abbandona le etichette per barra a favore di un asse dei valori condiviso con linee guida. Cercare di far stare un'etichetta di valore su ciascuna di una dozzina o più di barre smette di essere leggibile ben prima di quel punto. Quindi l'asse subentra come lettura a colpo d'occhio, e la tabella dei dati diventa la fonte precisa per i numeri esatti. Il grafico è limitato a 24 categorie totali; tutto ciò che viene inserito oltre quel limite semplicemente non viene disegnato (la tabella dei dati riflette sempre e solo ciò che è stato effettivamente tracciato).
Le barre orizzontali ribaltano l'asse delle categorie facendolo scorrere dall'alto verso il basso invece che da sinistra a destra. Scegli questa opzione quando i nomi delle categorie sono lunghi o numerosi — le etichette orizzontali non devono essere ruotate o troncate come invece serve per le etichette dell'asse verticale.
Campi configurabili:
- Chart title — mostrato sopra l'immagine; è anche il nome di serie di riserva quando è attiva solo la Serie 1.
- Interruttore Horizontal bars.
- Data — l'elenco righe (Category + Series 1/2/3).
- Series 1/2/3 name e Series 1/2/3 color.
- Background color, padding, border, border radius della card.
- Coppie indipendenti di colore/dimensione carattere per il titolo e per il testo di legenda/tabella.
Un grafico a barre può anche associare le proprie righe a una fonte dati connessa invece di inserirle direttamente. Un campo Group by trasforma ogni valore distinto in una categoria, abbinato a fino a 3 campi di serie — ciascuno con il proprio aggregato (Sum, Average, Count o Latest row) — rispecchiando la stessa struttura fino a 3 serie delle righe inserite manualmente. Un filtro facoltativo può fare riferimento ai tag di personalizzazione del destinatario, così lo stesso blocco mostra a ogni destinatario la propria porzione di una fonte condivisa. Vedi Associare i grafici a dati reali per i dettagli completi, inclusa la modalità sui risultati delle risposte di una campagna.
Esempi
Subject
Q3 revenue vs. cost breakdown
Lo scopo di progetto Dashboard genera automaticamente un grafico a barre, subito sotto una riga di tre scorecard di KPI — un punto di partenza con un clic per un report ricorrente; vedi il preset a griglia Dashboard. Un digest settimanale delle vendite può visualizzare il fatturato per regione come tre o quattro categorie con una singola serie, oppure "questa settimana vs. la settimana scorsa" come due serie per categoria per un confronto diretto. Un report post-evento potrebbe usare barre orizzontali per "RSVP per squadra" quando ci sono una dozzina di nomi di squadra troppo lunghi per stare come etichette sull'asse verticale. Un digest di avanzamento per il settore educativo potrebbe visualizzare il punteggio medio dei quiz per sezione di classe, una barra per sezione, associato in tempo reale a una fonte dati così i numeri restano aggiornati a ogni invio ricorrente.
Come appare il fallback statico
<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>
L'<img> porta un testo alternativo descrittivo che riassume ogni valore di categoria/serie, e la tabella sottostante ripete gli stessi numeri come HTML semplice sempre visibile.