Modèle:Graph:Chart
Ce modèle est obsolète.
Veuillez utiliser un autre modèle à la place ou solliciter l’aide des modélistes du projet Modèle.
Ce modèle utilise le module Graph, un script écrit dans le langage de programmation Lua. Toute expérimentation devrait être conduite d'abord via sa sous-page bac à sable. Voir le projet Scribunto si vous voulez en savoir plus.
Ce modèle utilise la feuille de style Graph:Chart/styles.css en CSS. Voir l'aide de l'extension TemplateStyles si vous voulez en savoir plus.
Paramètres (TemplateData)
[modifier le code]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ètre | Description | Type | État | |
|---|---|---|---|---|
| largeur | width | largeur du graphique
| Nombre | obligatoire |
| hauteur | height | hauteur du graphique
| 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.
| Chaîne | obligatoire |
| classes | x | liste des classes (catégories ou valeurs en x), séparées par une virgule
| 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.)
| 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.
| 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
| Nombre | facultatif |
| yGrid | yGrid | Option afin d'afficher une grille pour l'ordonnée
| 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)
| Chaîne | facultatif |
| showSymbols | showSymbols | Affiche un diagramme avec des marques
| 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.
| 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
[modifier le code]Diagramme en lignes
[modifier le code]- 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}}
Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
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}}
Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
Diagramme en surfaces
[modifier le code]- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
Diagramme en barre (histogramme)
[modifier le code]- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
Diagramme de dispersion (nuage de points)
[modifier le code]- 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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
{{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}}Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
Diagramme circulaire (camembert)
[modifier le code]- 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}}
Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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=}}
Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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=}}
Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}
Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
- 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}}
Le graphique qui aurait dû être présenté ici ne peut pas être affiché car il utilise l'ancienne extension Graph, désactivée pour des questions de sécurité. Des indications pour créer un nouveau graphique avec la nouvelle extension Chart sont disponibles ici.
Voir aussi
[modifier le code]- {{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.