Diagramma a torta
Il grafico a torta è un tipo di grafico statistico circolare, suddiviso in più spicchi per mostrare le proporzioni numeriche. In un grafico a torta, la lunghezza dell'arco di ciascuno spicchio è proporzionale alla quantità che rappresenta.
Mermaid può renderizzare il grafico a torta.
Codice
Copia
Incorpora
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Sintassi
Disegnare un grafico a torta in Mermaid è molto semplice.
showData indica di renderizzare i valori numerici effettivi dopo il testo della legenda, ed è opzionale.
- Segue poi la sintassi title con il suo valore stringa, che imposta il titolo del grafico a torta, ed è opzionale.
- Poi c'è il dataset; gli spicchi del grafico a torta sono disposti in senso orario secondo l'ordine delle etichette.
label di una parte del grafico a torta, racchiusa tra virgolette doppie.
Seguiti da due punti : come separatore.
Segue poi un positive numeric value, che rappresenta il valore concreto; sono supportati fino a due decimali.
mermaid.grammar_pie_data_option_title_value
Esempio
Codice
Copia
Incorpora
---
config:
pie:
textPosition: 0.5
themeVariables:
pieOuterStrokeWidth: "5px"
---
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Configurazione
Il grafico a torta supporta i seguenti parametri di configurazione:
| Parametro | Descrizione | Valore predefinito |
|---|---|---|
| textPosition | La posizione assiale dell'etichetta degli spicchi del grafico a torta, da 0.0 al centro a 1.0 sul bordo del cerchio. | 0.75 |
| donutHole | Rapporto del foro ad anello. Intervallo di valori validi da 0 a 0.9. | 0.1 |
| legendPosition | La posizione della legenda rispetto al diagramma. Valori validi: top, bottom, left, right e center. | top |
| highlightSlice | Evidenzia uno spicchio specifico con etichetta corrispondente; impostato su hover evidenzia lo spicchio su cui si passa il mouse. | hover |
