Modèle:Diagramme circulaire/Documentation

Utilisation

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

Syntaxe

{{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

• 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

• 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é).

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 cadre de 200×200px 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 {{Diagramme circulaire/section}} 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

{{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

• Module:Diagramme, programmé en Lua