Modèle:Diagramme circulaire

Une page de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher
Documentation Documentation[modifier] [purger]

Utilisation[modifier | modifier le code]

Ce modèle permet de créer des graphiques circulaires, dits « fromage ». On peut y faire apparaître jusqu'à dix étiquettes et dix valeurs.

Syntaxe[modifier | modifier le code]

{{Diagramme circulaire
 | thumb     = 
 | caption   = 
 | autre     = 
 | label1    = 
 | valeur1   = 
 | couleur1  = 
 | label2    = 
 | valeur2   = 
 | couleur2  = 
 | label3    = 
 | valeur3   = 
 | couleur3  = 
 | label4    = 
 | valeur4   = 
 | couleur4  = 
 | label5    = 
 | valeur5   = 
 | couleur5  = 
 | label6    = 
 | valeur6   = 
 | couleur6  = 
 | label7    = 
 | valeur7   = 
 | couleur7  = 
 | label8    = 
 | valeur8   = 
 | couleur8  = 
 | label9    = 
 | valeur9   = 
 | couleur9  = 
 | label10   = 
 | valeur10  = 
 | couleur10 = 
}}

Paramètres[modifier | modifier le code]

  • thumb – spécifie le côté de page (droite ou gauche) contre lequel le diagramme sera apposé. Par défaut, le diagramme, comme pour les images, est à droite (code right). Pour imposer le côté gauche de la page, spécifiez thumb=left.
  • caption – la description, un texte d'une ligne inséré juste au-dessus de la légende.
  • autre – si cette option est spécifiée, un item "autre" est ajouté à la fin de la légende.
  • label1 à 10 – texte de la légende associé au secteur 1,2...10. À défaut, un secteur sera dépourvu de légende.
  • valeur1 à 10 – le pourcentage associé au secteur 1,2...10. Ne mettez pas le symbole %. Le pourcentage sera inséré à la suite de la légende, tel quel, sans arrondi et il sera mis en forme.
  • couleur1 à 10 – un code ou nom de couleur CSS. À défaut, la palette suivante est utilisée :
1.
  •      red
2.
  •      green
3.
  •      blue
4.
  •      yellow
5.
  •      fuchsia
6.
  •      aqua
7.
  •      brown
8.
  •      orange
9.
  •      purple
10.
  •      sienna

Limitations[modifier | modifier le code]

  • Le modèle a un rendu incorrect sur les téléphones mobiles. Cf cette page sur le site mobile et le rapport d'un utilisateur sur ce problème.
  • Il y a de petits problèmes d'impression. Il faudrait trouver une solution de repli pour Wikilivres.
  • Les valeurs ne peuvent être que des pourcentages.
  • Safari n'a pas l'air de gérer le crénelage des bords, ce qui fait que les lignes sont un peu en zigzag (pour Google-Chrome, ce problème a disparu avec la version 26).
  • On ne peut intégrer les étiquettes aux secteurs.
  • Par construction, il n'est pas possible de copier l'image de ce diagramme en se servant de la fonction "enregistrer l'image" du navigateur.

Il s'agit d'un modèle expérimental pour tracer les diagrammes circulaires en une seule image, moyennant un certain volume de code CSS à la volée, introduit par des fonctions d'analyse syntaxique, et zéro JavaScript. Il utilise une technique de vectorisation de segment en CSS, qui exploite le fait que les frontières entre les différents secteurs se coupent à angle aigu. De cette façon, il est possible de ne dessiner qu'un des deux traits frontières (avec une couleur pleine), et de rendre l'autre entièrement transparente pour dessiner une limite de secteur circulaire en biais. On peut contrôler l’inclinaison du trait en jouant sur les largeurs respectives des bords des secteurs adjacents (seul l'un des deux est coloré).

Notez qu'avec l'ancien navigateur web Internet Explorer 6, il n'était pas possible d'appliquer des teintes transparentes par la méthode devenue standard à présent. Il y a à cela un remède qui consiste à recourir à la classe CSS "transborder", qui a été ajoutée à MediaWiki:Common.css, précisément pour rendre ce modèle utilisable.

Les secteurs du diagramme sont dessinés dans l'ordre des aiguilles d'une montre, et dirigés dans le sens trigonométrique (inverse des aiguilles d'une montre). Ces secteurs sont positionnés :

  • à l'intérieur d'un 200x200px cadre contenant un cercle transparent sur fond de couleur pastel (à savoir la couleur que la classe CSS "thumbinner")
  • à l'intérieur d'un cadre de statut overflow: hidden;

Cela permet de ne conserver comme visible sur la page que la fraction de secteur intérieure au cercle.

L'essentiel du code de (tl) est organisé en cinq sections : les quatre premières correspondent aux quadrants du cercle et la dernière permet de traiter correctement le cas particulier où le diagramme ne comporte qu'un seul secteur (100%), qui est le cercle entier.

Exemple[modifier | modifier le code]

{{Diagramme circulaire
 | thumb     = 
 | caption   = Évolution de l'économie mondiale
 | autre     = 
 | label1    = un
 | valeur1   = 10
 | couleur1  = #FFFF00
 | label2    = deux
 | valeur2   = 10
 | couleur2  = #FF8C00
 | label3    = trois
 | valeur3   = 10
 | couleur3  = #4674C0
 | label4    = quatre
 | valeur4   = 10
 | couleur4  = #FFAAA5
 | label5    = cinq
 | valeur5   = 10
 | couleur5  = #009A37
 | label6    = six
 | valeur6   = 10
 | couleur6  = #FD0000
 | label7    = sept
 | valeur7   = 10
 | couleur7  = #F0B20F
 | label8    = huit
 | valeur8   = 10
 | couleur8  = #B1F0FF
 | label9    = neuf
 | valeur9   = 10
 | couleur9  = #D3D4E3
 | label10   = dix
 | valeur10  = 10
 | couleur10 = #21A121
}}

Évolution de l'économie mondiale

  •      un (10%)
  •      deux (10%)
  •      trois (10%)
  •      quatre (10%)
  •      cinq (10%)
  •      six (10%)
  •      sept (10%)
  •      huit (10%)
  •      neuf (10%)
  •      dix (10%)

Voir aussi[modifier | modifier le code]