Diagramma XY
Il diagramma XY è un modulo di diagramma completo, un diagramma che rappresenta i dati usando un asse x e un asse y
Esempio
Copia
Incorpora
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Sintassi
Tutti i valori testuali composti da una sola parola possono essere scritti senza virgolette doppie. Se il valore testuale contiene più parole, in particolare spazi, deve essere racchiuso tra virgolette doppie.
Direzione
Il diagramma può essere disegnato orizzontalmente o verticalmente; l'impostazione predefinita è verticale.
Copia
Incorpora
xychart-beta horizontal
...
Titolo
Il titolo è una breve descrizione del diagramma e viene sempre renderizzato nella parte superiore del diagramma.
Esempio
Copia
Incorpora
xychart-beta
title "This is a simple example"
...
asse x
L'asse x rappresenta principalmente valori categorici, anche se può essere usato anche come intervallo numerico.
Esempio
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
asse y
L'asse y serve a rappresentare un intervallo numerico e non può avere valori categorici.
Esempio
- y-axis title min --> max
- Aggiunge solo il titolo; l'intervallo viene generato automaticamente in base ai dati
Diagramma a linee
Il diagramma a linee offre la possibilità di mostrare graficamente delle linee.
Esempio
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Diagramma a barre
Il diagramma a barre può mostrare graficamente delle barre.
Esempio
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Esempio semplice
Gli unici due elementi necessari sono il nome del diagramma xychart e un dataset. Pertanto, sarai in grado di disegnare il diagramma con una configurazione semplice.
Copia
Incorpora
xychart-beta
line [+1.3, .6, 2.4, -.34]
Configurazione del diagramma
| Parametro | Descrizione | Valore predefinito |
|---|---|---|
| width | Larghezza del diagramma | 700 |
| height | Altezza del diagramma | 500 |
| titlePadding | Spaziatura interna superiore e inferiore del titolo | 10 |
| titleFontSize | Dimensione del carattere del titolo | 20 |
| showTitle | Se il titolo è mostrato | true |
| xAxis | Configurazione dell'asse x | AxisConfig |
| yAxis | Configurazione dell'asse y | AxisConfig |
| plotReservedSpacePercent | Percentuale minima di spazio occupata da ciascun grafico nel diagramma | 50 |
| showDataLabel | Se mostrare il valore corrispondente all'interno del diagramma a barre | false |
AxisConfig
| Parametro | Descrizione | Valore predefinito |
|---|---|---|
| showLabel | Se mostrare l'etichetta dell'asse o il valore della tacca | true |
| labelFontSize | Dimensione del carattere dell'etichetta da disegnare | 14 |
| labelPadding | Spaziatura superiore e inferiore dell'etichetta | 5 |
| showTitle | Se mostrare il titolo dell'asse | true |
| titleFontSize | Dimensione del carattere del titolo dell'asse | 16 |
| titlePadding | Spaziatura superiore e inferiore del titolo dell'asse | 5 |
| showTick | Se mostrare le tacche | true |
| tickLength | Lunghezza della tacca | 5 |
| tickWidth | Spessore della tacca | 2 |
| showAxisLine | Se la linea dell'asse è mostrata | true |
| axisLineWidth | Spessore della linea dell'asse | 2 |
Variabili del tema del diagramma
Il tema di xychart si trova nella proprietà xychart e può essere personalizzato con la seguente sintassi:
Copia
Incorpora
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Parametro | Descrizione |
|---|---|
| backgroundColor | Colore di sfondo dell'intero diagramma |
| titleColor | Colore del testo del titolo |
| xAxisLabelColor | Colore dell'etichetta dell'asse x |
| xAxisTitleColor | Colore del titolo dell'asse x |
| xAxisTickColor | Colore delle tacche dell'asse x |
| xAxisLineColor | Colore della linea dell'asse x |
| yAxisLabelColor | Colore dell'etichetta dell'asse y |
| yAxisTitleColor | Colore del titolo dell'asse y |
| yAxisTickColor | Colore delle tacche dell'asse y |
| yAxisLineColor | Colore della linea dell'asse y |
| plotColorPalette | Può essere personalizzato con la seguente sintassi, ad esempio "#f3456, #43445" |
Esempio di configurazione e tema
Copia
Incorpora
---
config:
xyChart:
width: 900
height: 600
showDataLabel: true
themeVariables:
xyChart:
titleColor: "#f96"
---
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
