Un graphique XY est un composant de visualisation de données complet utilisé pour afficher à la fois des graphiques linéaires et des graphiques à barres sur une disposition standard en grille bidimensionnelle. Introduit pour remplacer et regrouper les anciens schémas de graphiques autonomes, le xychart-beta moteur de rendu traite dynamiquement des jeux de données numériques personnalisés, met automatiquement à l’échelle des grilles structurelles réactives et permet d’afficher simultanément plusieurs séries de données indépendantes et superposées.
Structure de syntaxe de base
Chaque graphique XY commence par le xychart-beta en-tête de déclaration. Il est suivi de la configuration d’un tableau de catégories de l’axe X horizontal, d’un titre de l’axe Y vertical ou d’une limite de plage de données, et d’au moins une série de tracé de données explicite (telle qu’une ligne ou barre bloc).
xychart-beta
titre "Graphique de performance d'exemple"
axe-x [Jan, Fév, Mar, Avr]
axe-y "Chiffre d'affaires (USD)"
barre [4500, 5200, 6100, 5800]
Référence de syntaxe
Le tableau ci-dessous détaille les définitions de données principales et les clés de configuration nécessaires pour structurer correctement un graphique XY dans Mermaid.js.
| Composant de syntaxe | Formats acceptés | Description et règles d’utilisation |
|---|---|---|
| Déclaration | Mot-clé | Initialise l’espace de travail du graphique en disposition 2D. Doit utiliser exactement le bloc de chaîne xychart-beta bloc de chaîne. |
| Titre | Chaîne entre guillemets | Un titre global facultatif affiché centré immédiatement au-dessus de la grille du canevas du graphique. |
| Configuration de l’axe X | Liste entre crochets / Plage | Définit les étiquettes d’échelle horizontale. Accepte des chaînes de texte catégoriques entre crochets[A, B, C] ou des plages de points numériques[100 --> 500]. |
| Configuration de l’axe Y | Chaîne de titre / Limites d’échelle | Configure les paramètres d’échelle verticale. Peut simplement être une chaîne de titre d’axe, ou personnalisée pour limiter les plages de valeurs inférieures/supérieures en utilisant"Titre" 0 --> 100. |
| Série de tracés en barres | Tableau numérique | Affiche les jeux de données sous forme de barres verticales. Le nombre d’éléments dans le tableau de données doit correspondre exactement à la longueur de vos catégories de l’axe X. |
| Série de tracés en lignes | Tableau numérique | Affiche les jeux de données sous forme de lignes continues reliant les points de données à travers l’espace de travail en grille. |
Personnalisation avancée des données (directives)
Vous pouvez affiner l’apparence visuelle de votre espace de travail de graphique en intégrant un bloc de configuration frontmatter tout en haut de votre extrait de code de document. Cela vous donne un contrôle total sur la mise en page, y compris les couleurs hex personnalisées, les épaisseurs des lignes des séries de tracés et les champs de visibilité de l’affichage de la grille.
Matrice des attributs de configuration du graphique XY
| Clé de configuration de propriété | Options de valeur | Résultat visuel |
|---|---|---|
showLine |
vrai | faux |
Active ou désactive l’affichage des traits de grille des lignes d’axe structurel de fond à travers les coordonnées. |
chartWidth |
Entier (pixels) | Définit la largeur de mise en page fixe de la zone de dessin de la grille du système. |
hauteurGraphique |
Entier (pixels) | Définit la hauteur de mise en page fixe de la zone de dessin de la grille du système. |
variablesThème.xyChart |
Tableaux de mappage des couleurs | Insère des blocs de couleur explicites en hexadécimal (par exemple, couleurFond, couleurTitre, ou des emplacements de liste de couleurs personnalisées paletteCouleursGraphique) dans vos graphiques. |
Maquette du monde réel : Comparaison technique multi-séries
Cette maquette complète suit une revue des performances d’une infrastructure. Elle utilise une directive de configuration personnalisée pour fixer les dimensions du canevas, afficher les chemins des lignes de grille de fond et injecter une palette de couleurs hexadécimales explicite. Elle mappe quatre phases trimestrielles distinctes, les rendant sous forme d’un graphique combiné visuel (des séries de barres superposées et des graphiques de séries de lignes ensemble).
---
config:
xychart:
largeurGraphique: 700
hauteurGraphique: 400
afficherLigne: true
variablesThème:
xychart:
couleurTitre: "#0072B1"
paletteCouleursGraphique: "#0072B1, #E06000"
---
xychart-beta
titre "Métriques Ressources vs Exécution Q1-Q4"
axeX ["Trimestre 1", "Trimestre 2", "Trimestre 3", "Trimestre 4"]
axeY "Unités de métriques de performance" 0 --> 100
barres [45, 65, 80, 95]
ligne [55, 60, 72, 88]
Astuce de syntaxe : Lorsque vous superposez plusieurs graphiques de données (par exemple, en exécutant un barre jeu de données et un ligne jeu de données dans le même canevas de mise en page), le moteur de rendu les empile ou les dessine séquentiellement dans l’ordre où ils sont écrits dans le script texte. Organisez vos blocs de données intentionnellement pour éviter le découpage visuel sur les lignes du canevas.
Péchés courants de syntaxe et contraintes du système
Lors de la compilation des chemins de matrices dimensionnelles, quelques erreurs de configuration subtiles perturberont les calculs des coordonnées. Gardez ces paramètres de dépannage à l’esprit :
- Incohérence de longueur des données : Chaque
barreoulignele tableau de séries de données *doit* contenir exactement le même nombre d’éléments que défini dans votreaxe des xparamètre de liste. Avoir 4 catégories sur votre axe des x tout en fournissant une liste de données de 5 nombres rompra complètement la compilation du graphique. - Limites des guillemets : Lorsque vous spécifiez des catégories à l’intérieur des crochets d’une liste d’axes, les blocs de texte contenant des espaces ou des caractères spéciaux doivent être entourés proprement de guillemets doubles (par exemple,
["Phase 1", "Phase 2"]). - Bornes de coordonnées numériques : Lorsque vous définissez des plages manuelles sur une échelle d’axe (par exemple,
0 --> 500), vous devez utiliser explicitement deux tirets suivis d’un symbole de plus grand que (-->). Oublier un tiret ou séparer les caractères opérateurs par des espaces déclenchera une erreur de mise en page de traitement. - Poids entiers positifs : Les valeurs d’échelle sont mappées sur des blocs d’espace linéaire. Assurez-vous que les valeurs transmises à vos séries ne contiennent pas d’éléments de caractères non échappés ou de paramètres vides nuls à l’intérieur des tableaux.