Modèle:Graph:Chart

 Documentation[voir] [modifier] [historique] [purger]

Paramètres (TemplateData)

Ce modèle permet de créer un graphique dans un article de Wikipédia, comme un graphique en lignes, un camembert ou un histogramme.

Paramètres du modèle[Modifier les données du modèle]

La mise en forme multiligne est préférée pour ce modèle.

Paramètre		Description	Type	État
largeur	width	largeur du graphique Par défaut 400	Nombre	obligatoire
hauteur	height	hauteur du graphique Par défaut 100	Nombre	obligatoire
type	type	type de graphique : line pour graphique en ligne, area pour graphique en surfaces, rect pour diagramme en barre et pie pour camembert. Plusieurs séries de données peuvent être empilées en utilisant le préfixe stacked. Exemple stackedarea	Chaîne	obligatoire
classes	x	liste des classes (catégories ou valeurs en x), séparées par une virgule Exemple 1,2,3,4,5,6,7,8	Chaîne	obligatoire
valeurs	y y1	liste des valeurs (hauteur pour un diagramme en barre, secteur angulaire pour un camembert), séparées par une virgule (Les séries suivantes se nomment y2, y3, y4, etc.) Exemple 10,12,6,14,2,10,7,9	Chaîne	obligatoire
couleurs	colors	listes des couleurs du graphique, séparées par une virgule. Les valeurs sont entrées sous la forme #rvb / #rrvvbb / #aarrvvbb ou avec leur nom CSS. Pour la syntaxe #aarrvvbb, la composante aa indique la transparence (canal alpha, FF=100% opaque, 80=50% semi-transparent, etc.). La palette de couleur par défaut est category10. Exemple seagreen, orchid	Chaîne	facultatif
Titre x	xAxisTitle	Légende de l'axe x	Chaîne	facultatif
Titre y	yAxisTitle	Légende de l'axe y	Chaîne	facultatif
xGrid	xGrid	Option afin d'afficher une grille pour l'abscisse Exemple 0 ou 1	Nombre	facultatif
yGrid	yGrid	Option afin d'afficher une grille pour l'ordonnée Exemple 0 ou 1	Nombre	facultatif
MinX	xAxisMin	Valeur minimum de l'axe x pour les diagrammes en ligne	Nombre	facultatif
MaxX	xAxisMax	Valeur maximum de l'axe x pour les diagrammes en ligne	Nombre	facultatif
MinY	yAxisMin	Valeur minimum de l'axe y pour les diagrammes en ligne	Nombre	facultatif
MaxY	yAxisMax	Valeur maximum de l'axe y pour les diagrammes en ligne	Nombre	facultatif
Format de l'axe x (des ordonnées)	xAxisFormat	Format de représentations des étiquettes sur l'axe des abscisses. Les valeurs prises en charges sont données dans la page [https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers] pour les nombres et dans la page [https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md] pour l'horodatation. Par exemple, le format &percent; peut être utilisé pour des pourcentages, et le s pour le système international	Chaîne	facultatif
Format de l'axe y des abscisses	yAxisFormat	Format de représentations des étiquettes sur l'axe des ordonnées. Les valeurs prises en charges sont données dans la page https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers pour les nombres et dans la page https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md pour l'horodatation. Par exemple, le format &percent; peut être utilisé pour des pourcentages.	Chaîne	facultatif
Légende	legend	Titre de la légende des différentes séries de données représentées. N'apparaît qu'en cas de séries multiples de données (y1, y2, etc) Exemple Légende	Chaîne	facultatif
showSymbols	showSymbols	Affiche un diagramme avec des marques Exemple 0 ou 1	Nombre	facultatif
Interpolation	interpolate	Méthode d'interpolation utilisée pour lisser les données. Valeur recommandée : monotone (pour interpolation cubique). Les interpolations disponibles sont les suivantes: * linear: linéaire, * step-before: marche antérieure, * step-after: marche postérieure, * basis, * basis-open, * cardinal, * cardinal-open, * monotone. Exemple monotone	Chaîne	suggéré
Épaisseur	linewidth	épaisseur de trait pour les diagramme en lignes ou espacement entre les secteurs pour un diagramme circulaire	Nombre	facultatif
Type x	xType	Type de donnée des valeurs (integer pour les nombres entiers, number pour les nombres avec virgule, date pour les dates (au format AAAA/MM/JJ) et string pour les valeurs ordinales	Chaîne	facultatif
Type y	yType	Type de donnée des valeurs (integer pour les nombres entiers, number pour les nombres avec virgule, date pour les dates (au format AAAA/MM/JJ) et string pour les valeurs ordinales	Inconnu	facultatif

Exemples

Diagramme en lignes

• Diagramme simple :

{{Graph:Chart |width=400 |height=140 |type=line |x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

Note : l'axe y commence à la valeur minimum de y, mais ce paramètres peut être changé avec le paramètre yAxisMin.

• Diagramme simple avec marques :

{{Graph:Chart |width=400 |height=140 |type=line |showSymbols=1 |x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}

• Diagramme simple avec dates :

{{Graph:Chart |width=400 |height=140 |type=line |xType=date
 |x=2020/01/01, 2020/01/15, 2020/02/01, 2020/02/15, 2020/03/01, 2020/03/15, 2020/04/01, 2020/04/15, 2020/05/01, 2020/05/15, 2020/06/01, 2020/06/15, 2020/07/01, 2020/07/15, 2020/08/01
 |y=10,12,6,14,2,10,7,9}}

Note : les dates sont en anglais à cause d'un bug. xAxisFormat = %m/%Y permet d'afficher la date au format 05/2020 (MM/AAAA) pour éviter l'affichage des mois en anglais, ce qui donne ceci :

{{Graph:Chart |width=400 |height=140 |type=line |xType=date |xAxisFormat = %m/%Y
 |x=2020/01/01, 2020/01/15, 2020/02/01, 2020/02/15, 2020/03/01, 2020/03/15, 2020/04/01, 2020/04/15, 2020/05/01, 2020/05/15, 2020/06/01, 2020/06/15, 2020/07/01, 2020/07/15, 2020/08/01
 |y=10,12,6,5,14,2,10,7,9,6,4,8,10,6,12}}

• Diagramme en lignes avec plusieurs séries de données de couleurs différentes :

{{Graph:Chart |width=400 |height=140 |xAxisTitle=X |yAxisTitle=Y |legend=Légende |type=line |x=1,2,3,4,5,6,7,8 |y1=10,12,6,14,2,10,7,9 |y2=2,4,6,8,13,11,9,2 |colors=#0000aa,#ff8000}}

• Diagramme en lignes avec plusieurs séries de données de couleurs différentes, des grilles et sans légende :

{{Graph:Chart |width=400 |height=140 |xAxisTitle=X |yAxisTitle=Y |xGrid=1 |yGrid=1 |legend=0 |type=line |x=1,2,3,4,5,6,7,8 |y1=10,12,6,14,2,10,7,9 |y2=2,4,6,8,13,11,9,2 |colors=#0000aa,#ff8000}}

Diagramme en surfaces

• Diagramme simple

{{Graph:Chart |width=400 |height=100 |type=area |x=1,2,3,4,5,6,7,8 |y=10,12,6,14,2,10,7,9}}

Note : l'axe y commence à zéro.

• Diagramme en surfaces avec plusieurs séries de données qui se chevauchent

{{Graph:Chart |width=400 |height=100 |xAxisTitle=X |yAxisTitle=Y |legend=Légende |type=area |x=1,2,3,4,5,6,7,8 |y1=10,12,6,14,2,10,7,9 |y2=2,4,6,8,13,11,9,2 |colors=#800000aa,#80ff8000}}

• Diagramme en surfaces avec données lissées

{{Graph:Chart |width=400 |height=100 |xAxisTitle=X |yAxisTitle=Y |legend=Légende |type=stackedarea |x=1,2,3,4,5,6,7,8 |y1=10,12,6,14,2,10,7,9 |y2=2,4,6,8,13,11,9,2 |interpolate=monotone |colors=seagreen,orchid}}

Diagramme en barre (histogramme)

• Histogramme simple

{{Graph:Chart |width=400 |height=100 |xAxisTitle=X |yAxisTitle=Y |type=rect |x=1,2,3,4,5,6,7,8 |y=10,12,6,14,2,10,7,9}}

• Histogramme avec séries multiples

{{Graph:Chart |width=400 |height=100 |xAxisTitle=X |yAxisTitle=Y |legend=Légende |type=rect |x=1,2,3,4,5,6,7,8 |y1=10,12,6,14,2,10,7,9 |y2=2,4,6,8,13,11,9,2 |colors=#800000aa,#80ff8000}}

• Histogramme avec données empilées

{{Graph:Chart |width=400 |height=100 |xAxisTitle=X |yAxisTitle=Y |legend=Légende |type=stackedrect |x=1,2,3,4,5,6,7,8 |y1=10,12,6,14,2,10,7,9 |y2=2,4,6,8,13,11,9,2 |y1Title=Data A |y2Title=Data B |colors=seagreen,orchid}}

Diagramme de dispersion (nuage de points)

• Nuage de points avec plusieurs séries de données de couleurs différentes

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|xAxisMin=0|legend=Légende|type=symbol|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2 |y3=10,3,5,1,7,3,1,11 |y4=5,7,6,8,5,4,8,6}}
{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|xAxisMin=0|legend=Légende|type=line|x=1,2,3,4,5,8,9,10|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2 |y3=10,3,5,1,7,3,1,11 |y4=5,7,6,8,5,4,8,6|linewidth=0|showSymbols=true}}

Diagramme circulaire (camembert)

• Camembert simple avec légende

{{Graph:Chart |width=100 |height=100 |type=pie |legend=Légende |x=A,B,C,D,E,F,G,H,I |y1=100,200,150,300,100,100,150,50,200}}

• Camembert avec légende et valeurs

{{Graph:Chart |width=100 |height=100 |type=pie |legend=Légende |x=A,B,C,D,E,F,G,H,I |y1=100,200,150,300,100,100,150,50,200 |showValues=}}

• Camembert avec légende, valeur et secteurs différenciés

{{Graph:Chart |width=100 |height=100 |type=pie |legend=Légende |x=A,B,C,D,E,F,G,H,I |y1=100,200,150,300,100,100,150,50,200 |y2=7,8,9,8,8,9,10,9,5 |showValues=}}

• Diagramme annulaire avec légende

{{Graph:Chart |width=100 |height=100 |type=pie |innerRadius=40 |legend=Légende |x=A,B,C,D,E,F,G,H,I |y1=100,200,150,300,100,100,150,50,200}}

• Diagramme annulaire avec légende, secteurs espacés et différenciés

{{Graph:Chart |width=100 |height=100 |type=pie |innerRadius=20 |legend=Légende |x=A,B,C,D,E,F,G,H,I |y1=100,200,150,300,100,100,150,50,200 |y2=7,8,9,8,8,9,10,9,5 |linewidth=5}}

Voir aussi

• {{Graph:Chart/Cadre}} : permet d'afficher un graphique dans un cadre de type image à droite.
• mw:Extension:Graph/fr : l'extension de MediaWiki utilisée pour ces graphiques, avec des exemples d'utilisation plus poussés.

La documentation de ce modèle est générée par le modèle {{Documentation}}.
Elle est incluse depuis sa sous-page de documentation. Veuillez placer les catégories sur cette page-là.
Les éditeurs peuvent travailler dans le bac à sable (modifier) et la page de test (modifier).
Voir les statistiques d'utilisation du modèle sur l'outil wstat.