Blocco Grafico a torta/anello
Un valore per categoria, mostrato come quota di un totale — una torta, oppure in modalità anello un anello con spazio per un numero in evidenza al centro.
Come funziona
Il grafico viene renderizzato come una singola PNG generata sul server (nessuna libreria di grafici lato client, nessun JavaScript) con una legenda sempre visibile e una tabella dei dati HTML sotto di essa — lo stesso abbinamento non negoziabile a cui si attiene ogni grafico di questa famiglia. A differenza della legenda del grafico a barre/linee, la legenda di una torta viene sempre renderizzata indipendentemente dal numero di fette. Il titolo di una torta non può nominare una singola fetta nel modo in cui un'unica serie di un grafico a barre/linee può prendere in prestito il titolo del blocco, quindi anche una torta con una sola fetta ha bisogno della legenda per dire cosa rappresenta quella fetta.
Ogni voce della legenda mostra l'etichetta della fetta insieme alla sua percentuale sul totale. La tabella dei dati aggiunge una terza colonna (valore esatto, accanto a categoria e percentuale), così sia la quota arrotondata a colpo d'occhio sia il numero preciso sono sempre disponibili come testo.
La struttura di inserimento differisce dagli slot di serie fissi di barre/linee: una riga per categoria, ciascuna con un singolo Value e un'opzionale sostituzione Color per fetta. Non esiste una seconda o terza serie, poiché una torta ha esattamente una misura per categoria per definizione. Le righe con categoria vuota o valore zero/negativo vengono ignorate completamente invece di essere disegnate come uno spicchio vuoto.
Oltre le 8 fette, quelle più piccole si uniscono in un unico spicchio sintetico "Other", invece di rendere il grafico illeggibilmente sottile. Oltre circa 8 fette, una torta smette di poter mostrare ognuna con un angolo distinguibile, quindi l'accorpamento mantiene leggibile ogni spicchio disegnato. L'accorpamento mantiene le 7 fette più grandi per valore e combina tutto il resto in "Other". La legenda e la tabella dei dati riflettono entrambe lo stesso accorpamento, così ciò che leggi accanto al grafico corrisponde sempre a ciò che è effettivamente disegnato al suo interno. Nulla viene nascosto silenziosamente dalla legenda pur restando conteggiato nell'immagine, o viceversa.
La modalità anello trasforma la torta in un anello. Solo allora i campi Center value e Center label fanno qualcosa, offrendoti un numero in stile KPI al centro dell'anello. È una coppia digitata dall'autore, non derivata dai valori delle fette — lo stesso precedente "autorato, non dedotto" del Δ della scorecard di KPI. Una torta piena non ha un buco in cui inserire del testo, quindi questi campi restano semplicemente inerti finché la modalità Donut non viene attivata.
Campi configurabili:
- Chart title — mostrato sopra l'immagine.
- Interruttore Donut (centro cavo).
- Data — l'elenco righe (Category + Value + Color facoltativo).
- Center value / Center label — solo in modalità anello.
- 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 torta può anche associare le proprie fette a una fonte dati connessa invece di inserire le righe manualmente — un campo Group by (ogni valore distinto diventa una fetta) più un campo Value e un aggregato (Sum, Average, Count o Latest row). Un filtro facoltativo può fare riferimento ai tag di personalizzazione del destinatario per una fetta specifica per destinatario della stessa fonte. Vedi Associare i grafici a dati reali per i dettagli completi, inclusa la modalità sui risultati delle risposte di una campagna — visualizzando ad esempio direttamente la distribuzione dei voti di un sondaggio o di una valutazione passati.
Esempi
Subject
Where your traffic is coming from
Un report post-campagna può visualizzare come torta la distribuzione dei voti di un sondaggio associandosi direttamente ai risultati delle risposte di quella campagna — nessuna fonte dati necessaria, basta scegliere il sondaggio dal selettore — così il report riflette sempre il conteggio attuale del sondaggio. Un riepilogo degli abbonamenti potrebbe usare un grafico ad anello per il "mix di piani" (Free/Starter/Pro/Business come fette) con il centro che mostra il totale degli account attivi come numero in stile KPI dentro l'anello stesso. Un digest di supporto con una dozzina di categorie di ticket si affida all'accorpamento automatico "Other" per mantenere leggibile il grafico, confidando nella tabella dei dati sottostante per elencare comunque ogni singola categoria con il conteggio esatto.
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">Plan mix</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="320"
alt="Donut chart: Free 420 (52%), Starter 210 (26%), Pro 175 (22%)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">
<span aria-hidden="true" style="display:inline-block;width:10px;height:10px;background-color:#4f46e5"></span>
Free (52%)
</span>
</div>
<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">Value</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Percent</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Free</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">420</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">52%</td>
</tr>
</table>
</div>
La legenda e la tabella riportano entrambe esattamente la stessa etichetta/valore/percentuale per ogni fetta — deliberatamente duplicate, poiché la legenda serve per una lettura rapida e la tabella è la fonte precisa.