Grafico a torta
Mostra le proporzioni a colpo d’occhio
Che cos’è un Grafico a torta?
Un grafico a torta mostra come un totale si scompone in parti: allocazione del budget, quote di mercato, risposte ai sondaggi, distribuzione del tempo. In Mermaid bastano quattro righe di testo — perfetto per documentazione e report.
I grafici a torta compaiono nelle slide di budget, nelle revisioni dei costi e nelle sintesi dei sondaggi — ovunque un totale debba essere scomposto in parti per un pubblico non tecnico. Scritto in Mermaid, il grafico sono quattro righe che vivono dentro il documento, invece di uno screenshot di un foglio di calcolo che nessuno ritrova più. Il limite è netto: un totale, un istante. Confrontare periodi, o mostrare una categoria troppo piccola per vedersi, richiede altro.
Esempio dal vivo
pie showData
title Cloud spend by service
"Compute" : 42
"Storage" : 23
"Network" : 18
"Databases" : 12
"Other" : 5Quando usarlo
Errori frequenti
Etichette delle fette senza virgolette
Scrivere Compute : 42 fallisce: l’etichetta deve essere una stringa tra virgolette, anche quando è una sola parola senza spazi. È di gran lunga il motivo più comune per cui un grafico a torta si rifiuta di apparire.
Le fette vengono riordinate per dimensione
Mermaid disegna le fette dalla più grande, qualunque sia l’ordine in cui le hai scritte, mentre la legenda conserva il tuo ordine. Non affidare mai un significato alla posizione di uno spicchio: etichettalo, oppure accetta lo scarto.
Valori che sono già percentuali
Mermaid calcola da sé la quota di ciascuna parte sul totale. Dargli percentuali che dopo un arrotondamento altrove sommano a 98 o 103 riscala in silenzio ogni fetta, e il grafico smette di corrispondere alla tabella stampata accanto.
Sintassi di base
pie title Budget
"Engineering" : 50
"Marketing" : 30
"Operations" : 20pie showData title Cloud spend by serviceshowData stampa il valore grezzo accanto a ogni etichetta nella legenda, oltre alla percentuale calcolata da Mermaid. Il titolo è facoltativo e può stare anche sulla riga pie.
"Compute" : 42Ogni fetta è un’etichetta tra virgolette, due punti e un numero. I decimali sono ammessi e Mermaid calcola le percentuali, quindi i valori non devono sommare a nulla in particolare.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%I colori delle fette vengono dal tema. Una direttiva init sulla primissima riga li sovrascrive uno per uno, da pie1 fino a pie12, per allinearsi a una palette di marca.
%% Q3 figures, source: finance exportDue segni di percentuale aprono un commento. Annotare da dove vengono i numeri, accanto ai numeri stessi, è ciò che rende un grafico ancora affidabile sei mesi dopo.
Domande su questo diagramma
Posso mostrare i valori effettivi sul grafico?
Sì — aggiungi showData dopo la parola chiave pie e Mermaid mostra il valore accanto a ogni etichetta, insieme alla percentuale.
Quante fette dovrebbe avere un grafico a torta?
Da cinque a sette al massimo per restare leggibile. Raggruppa le categorie piccole in «Altro» — puoi sempre rimandare a una tabella dettagliata.
Posso mettere un grafico a torta Mermaid in un report Markdown?
Sì. GitHub e GitLab renderizzano i grafici a torta da un blocco di codice con il tag mermaid, e i numeri restano modificabili nel sorgente. Per un PDF o una slide, esporta in SVG così le etichette restano nitide a qualsiasi dimensione.
Un solo grafico a torta può confrontare due periodi?
No. Mermaid supporta una sola serie: niente fette raggruppate, niente ciambella, nessun secondo anello. Disegna due grafici affiancati, oppure usa una tabella quando il lettore deve confrontare valori invece di vedere proporzioni.
Come cambio i colori delle fette?
Imposta le variabili di tema da pie1 a pie12 in una direttiva init sulla prima riga, oppure cambia tema del tutto. Una fetta non può essere colorata dalla propria riga, il che tiene tutta la palette definita in un unico posto.
Perché il mio grafico a torta appare piccolo nella pagina?
Il grafico si adatta alla larghezza del suo contenitore, quindi una colonna stretta rimpicciolisce anche le etichette. Dagli più larghezza nella pagina, oppure esporta un PNG a 2× quando il grafico deve essere letto da un proiettore.
Grafico a torta o un altro tipo di diagramma?
Grafico a torta o grafico a quadranti?
La torta è onesta solo quando le parti appartengono a un unico insieme e l’elenco è esaustivo: lo stesso budget, la stessa popolazione. Se i tuoi elementi sono stati misurati separatamente, o ne hai tenuti solo alcuni, le percentuali stampate da Mermaid non significano nulla: mettili su un grafico a quadranti.
Grafico a torta o diagramma di Gantt?
Entrambi servono a rispondere alla domanda «dove va lo sforzo». La torta divide un totale in un solo istante — il 40% del trimestre sulla piattaforma. Il Gantt distribuisce lo stesso lavoro su un calendario. Scegli la torta quando la decisione è la ripartizione, il Gantt quando è la sequenza.
Crea ora il tuo Grafico a torta
Descrivilo in linguaggio naturale — l’IA scrive il codice Mermaid per te.
Apri Mermaid Studio