Wiki source code of Secteurs

Last modified by Aurelie Bertrand on 2025/03/11 14:31
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 Le flux **Secteurs** ou diagramme camembert  [[image:Graph_secteur.png||queryString="width=27&height=23" alt="Bouton_graphique_colonnes" height="32" width="36"]] est utilisé pour représenter des proportions.
6
7 Les données sont présentées sous la forme d'un camembert dont les différentes portions représentent un membre de la dimension choisie. La taille de chaque portion est proportionnelle à la valeur de la mesure.
8
9 Ci-dessous, on représente, par exemple, la répartition du //Coût de communication// par //Région// (niveau pays).
10
11 [[image:Flow_pie_FR.png||alt="Secteur"]]
12
13 = Configurer un flux Secteurs =
14
15 Pour configurer un flux **Secteurs** :
16
17 1. Glissez-déposez une dimension sur l'axe ** Secteur **pour déterminer les différentes portions.
18 1. Glissez-déposez une mesure sur l'axe **Mesure** pour déterminer la taille des portions.
19 1. Vous pouvez glisser-déposer une dimension sur l'axe **Multiplicateur **:  le graphique sera répliqué pour chaque membre de la dimension placée sur l'axe multiplicateur.
20
21 = Configurer les paramètres spécifiques =
22
23 |=Paramètre|=Description
24 |Sens horaire|Permet de modifier l’ordre d’affichage des parts dans le sens horaire (selon le tri choisi).
25 |Rendu brillant|Permet d'afficher les secteurs avec un rendu brillant.
26 |Ombrage|Permet d'afficher des ombres sur le graphique.
27 |Angle de départ|Permet de définir l'angle de départ du premier élément en degrés. L'angle de départ est défini 0 par défaut comme illustré ci-dessous (sens anti-horaire ici).
28 [[image:Zero_angle_pie_chart_FR.png||height="218" width="337"]]
29 |Angle max|Permet de définir l'angle maximum d'un graphe en secteur. Par exemple, maxAngle = 180, permet d'afficher un demi cercle.
30 |(((
31 Décalage global
32 )))|Décalage du rayon (global) en pixel pour toutes les parts du graphe en secteur (par défaut, la valeur est 0).
33 |Décalage par part|Décalage du rayon (par part) en pixels par part du graphe en secteur.
34 |Alignement 1ère part|(((
35 Permet de définir l'alignement de la 1ère part :
36
37 * **Pas de rotation** : Valeur par défaut, pas de rotation du graphe en secteur.
38 * **Centrée à droite **: Rotation du graphe afin que la première part soit centrée à droite.
39 * **Centrée en haut **: Rotation du graphe afin que la première part soit centrée en haut.
40 * **Centrée à gauche** : Rotation du graphe afin que la première part soit centrée à gauche.
41 * **Centrée en bas**: Rotation du graphe afin que la première part soit centrée en bas.
42 )))
43
44 = Modifier le thème =
45
46 Consultez la page [[Modifier le style / thème>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Modify_style.WebHome]] pour plus de détails sur la configuration du thème.
47
48 = Configurer des interactions =
49
50 Pour savoir comment configurer des interactions, consultez la page dédiée [[Configurer des interactions>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Configure_interactions.WebHome]].
51
52 = Modifier l'info-bulle =
53
54 Pour savoir comment modifier l'info-bulle, consultez la page dédiée [[Modifier l'info-bulle>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Configure_tooltips.WebHome]].
55
56 = (% style="color:inherit; font-family:inherit" %)Configurer les étiquettes(%%) =
57
58 Pour savoir comment configurer les étiquettes, consultez la page [[Configurer les étiquettes>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Configure_labels.WebHome]].
59
60 Des paramètres supplémentaires sont disponibles ici.
61
62 |=Paramètre|=Description
63 |Afficher les étiquettes sur une seule ligne|Le texte des étiquettes peut être affiché sur plusieurs lignes.
64 Cocher la case permet d'afficher les étiquettes sur une seule ligne.
65 |N'afficher que les valeurs min/max|Permet d'afficher les étiquettes uniquement pour les valeurs minimum et maximum.
66 |Pourcentage réel|(((
67 Permet de spécifier la taille de l'icône dans le cas où une icône est utilisée comme étiquette.
68 )))
69 |En face de leurs portions|Permet de forcer le positionnement des étiquettes en face des portions correspondantes.
70 |Position améliorée|Permet d'optimiser le positionnement des étiquettes de manière automatique.
71 |Couleur automatique du texte|(((
72 La couleur (blanc ou noir) est définie automatiquement en fonction de la couleur du secteur.
73
74 Vous pouvez personnaliser les couleurs utilisées en ajoutant les classes CSS « dark » et « light » dans votre style CSS (onglet Thèmes). Par exemple :
75
76 {{code language="css"}}
77 .dark
78 {
79 fill:red;
80 }
81
82 .light
83 {
84 fill:yellow;
85 }
86 {{/code}}
87 )))
88 |(((
89 Largeur du contour / Hauteur
90 )))|(((
91 Permet de spécifier l'espace alloué autour du graphique pour les étiquettes en pixels.
92 )))
93 |(((
94 Largeur suppl. / Hauteur
95 )))|(((
96 Permet d'étendre la largeur/hauteur de l'étiquette du nombre de pixels spécifié.
97 )))
98 |Position|(((
99 Permet de définir la position des étiquettes : Auto, Extérieur, Intérieur.
100 )))
101 |(((
102 Étiquettes sur les meilleures valeurs
103
104 Nombre d'étiquettes
105 )))|(((
106 Permet d'afficher les valeurs uniquement sur les plus grandes parts.
107
108
109 Le nombre d'étiquettes définit le nombre de parts.
110 )))
111
112