Diagramme XY
Le diagramme XY est un module de diagramme complet qui utilise un axe des x et un axe des y pour représenter des données
Exemple
Copier
Intégrer
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]
Syntaxe
Toutes les valeurs textuelles ne comportant qu'un seul mot peuvent être écrites sans guillemets doubles. Si la valeur textuelle contient plusieurs mots, en particulier des espaces, elle doit être entourée de guillemets doubles.
Direction
Le diagramme peut être tracé horizontalement ou verticalement ; la valeur par défaut est verticale.
Copier
Intégrer
xychart-beta horizontal
...
Titre
Le titre est une brève description du diagramme ; il est toujours rendu en haut du diagramme.
Exemple
Copier
Intégrer
xychart-beta
title "This is a simple example"
...
Axe des x
L'axe des x représente principalement des valeurs catégorielles, bien qu'il puisse aussi servir de plage numérique.
Exemple
- mermaid.grammar_quadrant_example_x_axis_min_max_use
- mermaid.grammar_quadrant_example_x_axis_title_text
Axe des y
L'axe des y sert à représenter une plage numérique ; il ne peut pas comporter de valeurs catégorielles.
Exemple
- y-axis title min --> max
- Il ne fait qu'ajouter le titre ; la plage est générée automatiquement en fonction des données
Diagramme en courbes
Le diagramme en courbes permet d'afficher des lignes de manière graphique.
Exemple
- mermaid.grammar_quadrant_example_line_2_3_valide
- mermaid.grammar_quadrant_example_line_series_2_3_valide
Diagramme à barres
Le diagramme à barres permet d'afficher des barres de manière graphique.
Exemple
- mermaid.grammar_quadrant_example_bar_2_3_valide
- mermaid.grammar_quadrant_example_bar_series_2_3_valide
Exemple simple
Les deux seuls éléments nécessaires sont le nom du diagramme xychart et un ensemble de données. Vous pourrez donc tracer le diagramme à l'aide d'une configuration simple.
Copier
Intégrer
xychart-beta
line [+1.3, .6, 2.4, -.34]
Configuration du diagramme
| Paramètre | Description | Valeur par défaut |
|---|---|---|
| width | Largeur du diagramme | 700 |
| height | Hauteur du diagramme | 500 |
| titlePadding | Marge intérieure verticale du titre | 10 |
| titleFontSize | Taille de police du titre | 20 |
| showTitle | Indique si le titre est affiché | true |
| xAxis | Configuration de l'axe des x | AxisConfig |
| yAxis | Configuration de l'axe des y | AxisConfig |
| plotReservedSpacePercent | Pourcentage minimal d'espace occupé par chaque graphique dans le diagramme | 50 |
| showDataLabel | Indique s'il faut afficher la valeur correspondante à l'intérieur du diagramme à barres | false |
AxisConfig
| Paramètre | Description | Valeur par défaut |
|---|---|---|
| showLabel | Indique s'il faut afficher les étiquettes ou les valeurs de graduation des axes | true |
| labelFontSize | Taille de police des étiquettes à dessiner | 14 |
| labelPadding | Espacement vertical des étiquettes | 5 |
| showTitle | Indique s'il faut afficher le titre des axes | true |
| titleFontSize | Taille de police du titre des axes | 16 |
| titlePadding | Espacement vertical du titre des axes | 5 |
| showTick | Indique s'il faut afficher les graduations | true |
| tickLength | Longueur des graduations | 5 |
| tickWidth | Largeur des graduations | 2 |
| showAxisLine | Indique si la ligne de l'axe est affichée | true |
| axisLineWidth | Épaisseur de la ligne de l'axe | 2 |
Variables de thème du diagramme
Le thème de xychart se trouve dans la propriété xychart et peut être personnalisé à l'aide de la syntaxe suivante :
Copier
Intégrer
---
config:
themeVariables:
xyChart:
titleColor: '#ff0000'
---
| Paramètre | Description |
|---|---|
| backgroundColor | Couleur de fond de l'ensemble du diagramme |
| titleColor | Couleur du texte du titre |
| xAxisLabelColor | Couleur des étiquettes de l'axe des x |
| xAxisTitleColor | Couleur du titre de l'axe des x |
| xAxisTickColor | Couleur des graduations de l'axe des x |
| xAxisLineColor | Couleur de la ligne de l'axe des x |
| yAxisLabelColor | Couleur des étiquettes de l'axe des y |
| yAxisTitleColor | Couleur du titre de l'axe des y |
| yAxisTickColor | Couleur des graduations de l'axe des y |
| yAxisLineColor | Couleur de la ligne de l'axe des y |
| plotColorPalette | Peut être personnalisé à l'aide de la syntaxe suivante, par exemple "#f3456, #43445" |
Exemple de configuration et de thème
Copier
Intégrer
---
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]
