Wiki source code of Barres

Last modified by Aurelie Bertrand on 2025/10/28 08:59
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 Le flux **Barres** [[image:Graph_barres.png||queryString="width=25&height=25" alt="Icone_graphique_barres" height="25" width="25"]] affiche des barres horizontales et est utilisé pour comparer des éléments entre catégories.
6
7 Ci-dessous, on représente, par exemple, le nombre de //Chiffre d'affaires// par //Pays//.
8
9 [[image:Flow_bar_FR.png||alt="Barres"]]
10
11
12 = Configurer le flux Barres =
13
14 Pour configurer le flux **Barres** :
15
16 1. Glissez-déposez une dimension sur l'axe **Barre **(axe des ordonnées).
17 Si vous y ajoutez d'autres dimensions, elles seront combinées.
18 1. Glissez-déposez une mesure sur l'axe **Empilement **(axe des abscisses).
19 Si vous y ajoutez d'autres mesures, elles seront, par défaut, empilées l'une à côté de l'autre.
20 [[image:Graphique_barres_empilement.png||queryString="width=723&height=335" alt="Exemple_barres_empilement" height="335" width="723"]]
21 1. Vous pouvez glisser-déposer une dimension sur l'axe **Groupement** : les barres seront groupées selon cette dimension.
22 Par exemple, nous avons défini la dimension //Date //au niveau //Année //(distribution des couleurs ici sur l'axe Multiplicateur).[[image:1736418945560-383.png]]
23 1. Vous pouvez glisser-déposer une dimension sur l'axe **Multiplicateur **:  le graphique sera répliqué pour chaque valeur de la dimension placée sur l'axe multiplicateur.
24
25 = Configurer les paramètres spécifiques =
26
27 |=(% style="width: 281px;" %)Paramètre|=(% style="width: 545px;" %)Description
28 |(% style="width:281px" %)Titres des axes|(% style="width:545px" %)(((
29 Permet d'activer l'affichage du titre des différents axes disponibles.
30 Par défaut, l'axe contient le nom des mesures / dimensions sur l'axe correspondant.
31 Vous pouvez personnaliser le titre en entrant le texte de votre choix.
32
33 Le titre personnalisé peut être traduit : cliquez sur le bouton [[image:1744726414082-472.png||height="22" width="24"]] pour accéder à l'interface d'**Édition multilangue** et entrer la valeur affichée dans chaque langue. Consultez la page [[Traduire le nom d'un objet>>doc:Digdash.user_guide.studio.translate_items.WebHome]] pour plus de détails.
34 )))
35 |(% style="width:281px" %)Cacher l'axe des mesures|(% style="width:545px" %)Permet de masquer l'axe des mesures.
36 |(% style="width:281px" %)Espace entre barres
37 Groupes|(% style="width:545px" %)Permet de spécifier l'espace souhaité entre 2 membres de l'axe Barre, respectivement de l'axe Groupement.
38 |(% style="width:281px" %)Delta entre barres
39 Delta en pourcentage|(% style="width:545px" %)(((
40 (% id="cke_bm_28244S" style="display:none" %) (%%)Activer pour afficher le delta entre la deuxième et la première barre d'un graphe.
41 De même, en pourcentage.
42 )))
43 |(% style="width:281px" %)Activer le fond noir|(% style="width:545px" %)Seulement si la fonction Delta est activée.
44 Active le fond noir.
45 |(% style="width:281px" %)Inverser les couleurs du delta|(% style="width:545px" %)Seulement si la fonction Delta est activée.
46 Inverse les couleurs du delta : le delta positif est rouge, et le négatif est vert.
47 |(% style="width:281px" %)Même largeur pour toutes les barres|(% style="width:545px" %)(((
48 L'empilement est réalisé en pourçentage dans des barres qui font toutes la même largeur.
49
50 ❗//Non compatible avec l'option "Dernier empilement affiché en texte".//
51 )))
52 |(% style="width:281px" %)Dernier empilement affiché en texte|(% style="width:545px" %)(((
53 (% id="cke_bm_6597S" style="display:none" %) (%%)Si l'option est cochée, pour un graphique empilant au moins 2 mesures/dimensions, la valeur de la dernière sera affichée à droite de l'empilement.
54 Si un total (valeur récapitulative) est ajouté à la fin, c'est la valeur du total qui sera affichée.
55
56 [[image:1740477234316-550.png]]
57 )))
58 |(% style="width:281px" %)(((
59 Couleur à partir d'un objectif d'une mesure cachée
60 )))|(% style="width:545px" %)Si un objectif est défini pour une mesure cachée, les colonnes seront affichées de la couleur de la zone correspondante de l'objectif.
61 Par exemple, si la couleur est verte pour un objectif réalisé, les colonnes seront affichées en vert.
62
63 = Modifier le thème =
64
65 Consultez la page [[Modifier le style>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Modify_style.WebHome]] pour plus de détails sur la configuration du thème.
66
67 = Configurer des interactions =
68
69 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]].
70
71 = Modifier l'info-bulle =
72
73 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]].
74
75 = Modifier les échelles =
76
77 Pour savoir comment configurer les échelles, consultez la page [[Modifier les échelles des axes>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Configure_scales.WebHome]].
78
79 Des paramètres supplémentaires sont disponibles pour ce flux.
80
81 |=(% style="width: 224px;" %)Paramètre|=(% style="width: 602px;" %)Description
82 |(% style="width:224px" %)Repères de l'échelle|(% style="width:602px" %)(((
83 Permet de personnaliser les repères d'échelle.
84
85 Par défaut, un trait est affiché à l’extérieur de la barre de l’échelle de gauche. Une liste déroulante permet de choisir d’autres types de traits : **Intérieur**, **Ligne entière **ou **Traversant**.
86 )))
87 |(% style="width:224px" %)Cacher l'échelle du haut|(% style="width:602px" %)Permet d'afficher/masquer l'échelle de gauche.
88 |(% style="width:224px" %)Cacher l'accolade|(% style="width:602px" %)(((
89 Cocher la case cache l'accolade affichée à droite de l'étiquette des axes dans le cas d'un groupement.
90 )))
91
92 = Configurer les étiquettes =
93
94 Pour savoir comment configurer les étiquettes, consultez la page [[Configurer les étiquettes>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Configure_labels.WebHome]].
95
96 Des paramètres supplémentaires sont disponibles ici.
97
98 |=(% style="width: 240px;" %)Paramètre|=(% style="width: 586px;" %)Description
99 |(% style="width:240px" %)Taille de l'infographie des étiquettes|(% style="width:586px" %)(((
100 Permet de spécifier la taille de l'icône dans le cas où une icône est utilisée comme étiquette.
101 )))
102 |(% style="width:240px" %)Forcer la taille sur l'axe vertical|(% style="width:586px" %)(((
103 Ces paramètres permettent de régler la taille des étiquettes sur l 'axe vertical.
104 Entrer un texte dont la taille est celle attendue pour l'étiquette (exemple : « aaaaaaaaaa »).
105 )))
106 |(% style="width:240px" %)Cacher l'accolade|(% style="width:586px" %)Cocher la case cache l'accolade affichée sous l'étiquette des axes.
107 |(% style="width:240px" %)Taille automatique des étiquettes|(% style="width:586px" %)Active le calcul automatique de la taille des étiquettes.
108 |(% style="width:240px" %)Taille max. des étiquettes (en %)|(% style="width:586px" %)(((
109 Taille maximale des libellés (en pourcentage).
110
111 __Exemple :__ pour que l'espace occupé par les libellés représente au maximum 10% du graphe, entrer la valeur 10.
112 )))
113 |(% style="width:240px" %)Angle des étiquettes d'axe |(% style="width:586px" %)Permet de sélectionner un angle d'affichage pour les étiquettes d'axe : 0, 15, 30, 45 ou 90 degrés (45° par défaut).
114 |(% style="width:240px" %)Dépassement étiquettes barres / axes|(% style="width:586px" %)(((
115 Permet de sélectionner l'affichage pour les étiquettes larges (dont la taille est supérieure à ce qui peut être affiché dans les barres / les axes :
116
117 * **Cacher **: cache les étiquettes trop larges. (Par défaut, pour les barres).
118 * **Couper **: affiche le début de l'étiquette suivi par …
119 * **Afficher **: affiche l'étiquette dans sa totalité.
120 )))
121 |(% style="width:240px" %)Angle des étiquettes d'axe|(% style="width:586px" %)Permet de sélectionner un angle d'affichage pour les étiquettes d'axe : 0, 15, 30, 45 ou 90 degrés (45° par défaut).
122 |(% style="width:240px" %)Afficher les étiquettes sur une seule ligne|(% style="width:586px" %)Si l'option **Afficher** est sélectionnée pour le **Dépassement des étiquettes**, le texte des étiquettes peut être affiché sur plusieurs lignes.
123 Cocher la case permet d'afficher les étiquettes sur une seule ligne.
124 |(% style="width:240px" %)N'afficher que les valeurs min/max|(% style="width:586px" %)Permet d'afficher les étiquettes uniquement pour les valeurs minimum et maximum.
125 |(% style="width:240px" %)Couleur automatique du texte|(% style="width:586px" %)(((
126 La couleur (blanc ou noir) est définie automatiquement en fonction de la couleur de la barre.
127
128 Vous pouvez personnaliser les couleurs utilisées en ajoutant les classes CSS « dark » et « light » dans votre style CSS (onglet Thèmes). Par exemple :
129
130 {{code language="css"}}
131 .dark
132 {
133 fill:red;
134 }
135
136 .light
137 {
138 fill:yellow;
139 }
140 {{/code}}
141 )))