Les diagrammes circulaires sont des graphiques statistiques circulaires utilisés pour afficher des proportions numériques en divisant les données en tranches. Avec Mermaid.js, vous pouvez créer des analyses de données propres et réactives automatiquement, sans avoir à manipuler des bibliothèques de graphiques complexes ou des outils de conception vectorielle. Le moteur de rendu gère dynamiquement toutes les affectations de couleurs et les calculs de pourcentages.
Structure de syntaxe de base
Chaque diagramme circulaire commence par la déclaration pie déclaration. Vous pouvez éventuellement inclure un titre, suivi d’entrées de données où les étiquettes de catégorie sont entourées de guillemets et associées à des valeurs numériques positives.
pie
titre Diagramme circulaire d'exemple
"Catégorie A" : 45
"Catégorie B" : 30
"Catégorie C" : 25
Référence de syntaxe
Le tableau ci-dessous détaille les options structurelles fondamentales utilisées pour construire une carte de diagramme circulaire dans Mermaid.js.
| Composant | Description | Exemple de syntaxe |
|---|---|---|
| Déclaration | Initialise le moteur de rendu du diagramme circulaire. | pie |
| Indicateur d’affichage des données | Un modificateur facultatif ajouté immédiatement après piepour afficher les nombres réels aux côtés des pourcentages calculés. |
pie showData |
| Titre | Un titre facultatif imprimé clairement au-dessus du centre du layout du diagramme. | titre Sources des revenus du Q3 |
| Étiquette d’entrée de données | Le nom de la catégorie, qui doit toujours être entouré de guillemets doubles. | "Recherche organique" |
| Séparateur de données | Un caractère deux-points séparant votre chaîne d’étiquette de sa valeur mathématique. | : |
| Valeur des données | Un nombre positif. Prend en charge les comptages absolus ou les poids décimaux directs jusqu’à deux espaces décimaux. | 54.25 |
Modèle du monde réel : Sources de trafic du site web
Ce modèle met en évidence une analyse classique du tableau de bord marketing et analytique. Il utilise le paramètre showData pour afficher explicitement les métriques brutes de trafic directement dans la légende, tandis que le graphique présente les proportions de mise en page.
pie showData titre Canaux principaux de trafic
"Recherche organique" : 3540
"Trafic direct" : 2410
"Réseaux sociaux" : 1850
"Sites de référencement" : 920
"Campagnes par e-mail" : 680
Astuce de syntaxe : Par défaut, Mermaid affiche uniquement les pourcentages calculés relatifs (par exemple, 35 %) au-dessus de chaque section du graphique. Ajouter le mot-clé showData immédiatement après pie modifie les étiquettes pour afficher à la fois le pourcentage sur le graphique et les valeurs brutes exactes dans la liste de légende associée.
Concept avancé : Directives et mise en forme
Pour les pages de documentation à forte densité, vous pouvez appliquer une directive de configuration en ligne au début de votre extrait de code afin de personnaliser les comportements de mise en forme, modifier les décalages de positionnement du texte ou modifier les styles de lignes structurelles.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie titre Attribution du budget opérationnel
"Développement de produits" : 40.5
"Marketing et croissance" : 25.25
"Opérations clients" : 20.0
"Frais généraux administratifs" : 14.25
Péchés courants de syntaxe
Bien que les diagrammes en secteurs aient l’une des syntaxes les plus simples dans Mermaid, quelques erreurs de formatage peuvent entraîner des échecs d’analyse du layout. Évitez ces erreurs courantes :
- Nombres négatifs : Le moteur de rendu n’accepte que des valeurs numériques positives. Passer une valeur négative ou zéro rompra les limites de traitement mathématique.
- Exigences de guillemets : Les étiquettes de catégorie de données doivent toujours utiliser des guillemets doubles. Les guillemets simples ou les guillemets manquants empêcheront la construction correcte.
- Limites de précision décimale : Bien que Mermaid gère les décimales à virgule flottante avec précision de manière fluide, il suit nativement les paramètres jusqu’à deux décimales. Arrondir les valeurs au préalable garantit une cohérence stricte.
- Densités des tranches : Pour une communication visuelle claire, il est recommandé de limiter vos graphiques à 6 à 8 tranches. Si vos jeux de données comportent plus d’éléments, regroupez les nœuds les plus petits sous une catégorie « Autres » afin de maintenir votre conception lisible.