Diagramme circulaire
Le diagramme circulaire est un type de graphique statistique circulaire, divisé en plusieurs secteurs pour afficher des proportions numériques. Dans un diagramme circulaire, la longueur d'arc de chaque secteur est proportionnelle à la quantité qu'il représente.
Mermaid peut rendre des diagrammes circulaires.
Copier
Intégrer
pie title The most popular pets
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Syntaxe
Tracer un diagramme circulaire dans Mermaid est très simple.
showData indique que la valeur numérique réelle est rendue après le texte de la légende ; c'est facultatif.
- Viennent ensuite la syntaxe title et sa valeur de chaîne de caractères, qui définissent le titre du diagramme circulaire ; c'est facultatif.
- Puis vient l'ensemble de données ; les secteurs du diagramme circulaire sont disposés dans le sens des aiguilles d'une montre, dans l'ordre des étiquettes.
Le label d'une partie du diagramme circulaire, entouré de guillemets doubles.
Suivi d'un deux-points : comme séparateur.
Suivi d'une positive numeric value , représentant la valeur concrète, avec un maximum de deux décimales.
mermaid.grammar_pie_data_option_title_value
Exemple
Copier
Intégrer
---
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
Configuration
Le diagramme circulaire prend en charge les paramètres de configuration suivants :
| Paramètre | Description | Valeur par défaut |
|---|---|---|
| textPosition | Position axiale des étiquettes des secteurs du diagramme circulaire, de 0.0 au centre à 1.0 sur le bord du cercle. | 0.75 |
| donutHole | Proportion du trou annulaire. Les valeurs valides vont de 0 à 0.9. | 0.1 |
| legendPosition | Position de la légende par rapport au diagramme. Les valeurs valides sont top, bottom, left, right et center. | top |
| highlightSlice | Met en surbrillance un secteur spécifique dont l'étiquette correspond ; réglez sur hover pour mettre en surbrillance le secteur survolé. | hover |
