Wiki source code of Courbes, Surfaces

Last modified by Aurelie Bertrand on 2025/09/26 17:02
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 Le  flux **{{glossaryReference glossaryId="Glossary" entryId="Courbes"}}Courbes{{/glossaryReference}}** [[image:Graph_courbe.png||queryString="width=35&height=31" alt="Icone_graphique_courbe" height="31" width="35"]] permet de visualiser des tendances.
6
7 Ci-dessous, on représente, par exemple, le //Chiffres d'affaires //par //Trimestre.//
8
9 [[image:Flow_lines_FR.png||alt="Courbes"]]
10
11 = Configurer le flux {{glossaryReference glossaryId="Glossary" entryId="Courbes"}}Courbes{{/glossaryReference}} =
12
13 Pour configurer le flux **{{glossaryReference glossaryId="Glossary" entryId="Courbes"}}Courbes{{/glossaryReference}}** :
14
15 1. Glissez-déposez une ou plusieurs mesures sur l'axe :
16 1*. ** Lignes** (axe des ordonnées) : chaque mesure est affichée sur une ligne
17 1*. **Abscisse : **chaque valeur de la mesure est affichée sur l'axe des abscisses.
18 1. Glissez-déposez les dimensions sur l'axe souhaité : **Lignes** ou **Abscisse**.
19 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.
20
21 == Modifier l'affichage des lignes {{id name="lignes"/}} ==
22
23 Il est possible de modifier l'affichage des lignes. Pour cela :
24
25 1. Cliquez sur le bouton** **[[image:1736419773131-704.png||alt="Propriétés"]] figurant dans la zone de l'axe **Lignes**.
26 ➡ la boite de dialogue **Paramètres d'axes **s'affiche.
27 1. Dans l'onglet **Répartition des membres**, cliquez sur **Afficher les membres**.
28 ➡ la liste des membres de mesure s'affiche.
29 [[image:Flow_lines_members_FR.png||alt="Membres"]]
30
31 Vous pouvez alors :
32
33 * **Afficher des marqueurs sur les lignes**
34 *1. Cliquez sur la flèche vers le bas dans le champ **Marqueur par ligne **de l'élément de votre choix.
35 ➡ une boite avec un choix de marqueurs s'affiche.
36 *1. Sélectionnez un marqueur ou importez celui de votre choix en cliquant sur bouton [[image:1736428256628-864.png]].
37
38 (% class="box infomessage" %)
39 (((
40 ℹ Les images ou icônes utilisées comme marqueurs doivent être au format **.SVG**.
41 )))
42
43 * **Afficher la courbe sous forme de diagramme surface** :
44 ** Cochez la case **Afficher en zone **pour colorer la zone en dessous de la ligne.
45 [[image:1751286485048-427.png||alt="Zone"]]
46 Pour afficher en zone de manière automatique et dynamique tous les membres de l'axe des lignes, utilisez l'option **Forcer l'affichage en zone** dans les [[**Paramètres spécifiques**>>doc:||anchor="Paramètres_spécifiques"]].
47
48 * **Afficher vos mesures sur deux échelles différentes :**
49 ** Cochez la case **Afficher à droite** pour les mesures que vous souhaitez afficher sur l'axe de droite.
50 [[image:1736433374672-221.png||alt="Afficher à droite"]]
51
52 Avec les paramètres ci-dessus, on obtient: 
53 [[image:1736433292458-863.png||alt="Echelles à droite"]]
54
55 = Configurer les paramètres spécifiques{{id name="Paramètres"/}} =
56
57 {{id name="Paramètres_spécifiques"/}}
58
59 |=(% style="width: 269px;" %)Paramètre|=(% colspan="2" style="width: 556px;" %)Description
60 |(% style="width:269px" %)(((
61 Marqueur
62
63
64 )))|(% colspan="2" style="width:556px" %)(((
65 Permet de définir un marqueur pour afficher la valeur d'une mesure.
66 Sélectionner le marqueur souhaité dans la liste déroulante.
67
68 Les marqueurs peuvent également définis depuis les paramètres d'axe Ligne comme vu ci-dessus.
69 )))
70 |(% style="width:269px" %)Couleur|(% colspan="2" style="width:556px" %)Permet de définir une couleur pour le marqueur.
71 |(% style="width:269px" %)Taille du marqueur|(% colspan="2" style="width:556px" %)Permet de spécifier la taille du marqueur en pixels.
72 |(% style="width:269px" %)Marqueur seulement sur les extrémités|(% colspan="2" style="width:556px" %)(((
73 Permet d'afficher les marqueurs en début et en fin de ligne uniquement.
74
75 Si une étiquette est configurée pour Point sur les lignes, seules les étiquettes des valeurs des extrémités sont visibles.
76 )))
77 |(% style="width:269px" %)(((
78 Afficher le cumul
79 )))|(% colspan="2" style="width:556px" %)Permet d'afficher les valeurs cumulées des mesures selon l'axe des abscisses.
80 |(% style="width:269px" %)(((
81 Ligne d'objectif
82
83
84 Couleur
85 )))|(% colspan="2" style="width:556px" %)(((
86 Permet d'afficher une ligne représentant les valeurs de l'objectif associé à la mesure  (cet objectif doit être défini dans le modèle de données puis sélectionné dans le flux).
87
88 Permet de spécifier une couleur pour la ligne d’objectif.
89 )))
90 |(% style="width:269px" %)Forcer la connexion entre points|(% colspan="2" style="width:556px" %)Permet de forcer la connexion entre tous les points du graphe (même s'ils sont séparés par des valeurs nulles).
91 |(% style="width:269px" %)Empiler les valeurs des mesures|(% colspan="2" style="width:556px" %)(((
92 Permet d'empiler les valeurs des mesures.
93
94 Exemple : avant et après empilement.  Les valeurs empilées sont ajoutées au-dessus.
95
96 [[image:1696601021101-784.png||height="405" width="711"]]
97
98 [[image:1696601058491-953.png||height="412" width="712"]]
99 )))
100 |(% style="width:269px" %)Forcer l'affichage en zone|(% colspan="2" style="width:556px" %)(((
101 Permet d'activer l'affichage en zone de manière automatique et dynamique pour tous les membres de l'axe des lignes. La zone en-dessous de chaque ligne est alors colorée.
102
103 Pour sélectionner l'affichage en zone de manière individuelle pour chaque membre, utilisez l'option **Affichage en zone** dans les Paramètres de l'axe Lignes. Consultez le paragraphe [[Modifier l'affichage des lignes>>doc:Glossary.Courbes||anchor="lignes"]] pour plus de détails.
104
105 [[image:Auto_zone_display_FR.png||alt="Affichage en zone"]]
106 )))
107 |(% rowspan="2" style="width:269px" %)Remplissage en gradient|(% colspan="2" style="width:556px" %)(((
108 //Dans le cas de l'affichage en zone des lignes.
109 Activée par défaut.//
110
111 Permet d'afficher les zones avec une opacité de 80% et un gradient de couleur allant du foncé en haut à gauche vers le clair en bas à droite. Vous pouvez ainsi visualiser les zones superposées.
112
113 Si la case est décochée, chaque zone sera remplie d'une couleur avec une opacité à 100% .
114 )))
115 |(% style="width:556px" %)(((
116 (% style="text-align: center;" %)
117 //Remplissage en gradient cochée//
118
119 [[image:1751364129728-920.png||alt="Remplissage gradient" data-xwiki-image-style-alignment="center" height="274" width="471"]]
120 )))|(% style="width:556px" %)(((
121 (% style="text-align: center;" %)
122 //Remplissage en gradient non cochée//
123
124 [[image:1751371014381-347.png||alt="Remplissage normal" data-xwiki-image-style-alignment="center" height="277" width="477"]](% aria-label="Élément 1751364156367-908.png image" contenteditable="false" role="region" tabindex="-1" title="Cliquer et glisser pour redimensionner" %)​
125 )))
126 |(% style="width:269px" %)Titres des axes|(% colspan="2" style="width:556px" %)(((
127 Permet d'activer l'affichage du titre des différents axes disponibles.
128 Par défaut, l'axe contient le nom des mesures / dimensions sur l'axe correspondant.
129 Vous pouvez personnaliser le titre en entrant le texte de votre choix.
130
131 Le titre personnalisé peut être traduit : cliquez sur le bouton (% aria-label="Élément 1744726590657-432.png image" contenteditable="false" role="region" tabindex="-1" %)[[image:1744726590657-432.png||height="23" width="24"]](% title="Cliquer et glisser pour redimensionner" %)​(% aria-label="Élément 1744726590657-432.png image" contenteditable="false" role="region" style="background-color:rgba(220,220,220,0.5)" tabindex="-1" %)[[image:data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==||draggable="true" height="15" role="presentation" title="Cliquer et glisser pour déplacer" width="15"]](%%) 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.
132 )))
133
134 = Modifier le thème =
135
136 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.
137
138 = Configurer des interactions =
139
140 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]].
141
142 = Modifier l'info-bulle =
143
144 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]].
145
146 = Modifier les échelles =
147
148 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]].
149
150 Des paramètres supplémentaires sont disponibles pour ce flux.
151
152 |=(% style="width: 227px;" %)Paramètre|=(% style="width: 599px;" %)Description
153 |(% style="width:227px" %)Repères de l'échelle|(% style="width:599px" %)(((
154 Permet de personnaliser les repères d'échelle.
155
156 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**.
157 )))
158 |(% style="width:227px" %)Echelle de gauche / droite logarithmique|(% style="width:599px" %)Utiliser l'échelle logarithmique pour l'échelle de gauche / droite.
159 |(% style="width:227px" %)Cacher l'échelle de gauche|(% style="width:599px" %)Permet de masquer l'échelle de gauche.
160 |(% style="width:227px" %)Graduations sur Y / à droite|(% style="width:599px" %)Permet de spécifier le nombre de graduations souhaitées sur l'axe Y figurant à gauche.
161 De même à droite dans le cas où vous affichez 2 échelles différentes pour l'axe Y : une à gauche l'autre à droite.
162
163 = Configurer les étiquettes =
164
165 Pour savoir comment configurer les étiquettes, consultez la page [[Configurer les étiquettes>>doc:Digdash.user_guide.studio.Create_flow.Configure_flow.Configure_labels.WebHome]].
166
167 Des paramètres supplémentaires sont disponibles ici.
168
169 |=Paramètre|=Description
170 |Taille de l'infographie des étiquettes|(((
171 Permet de spécifier la taille de l'icône dans le cas où une icône est utilisée comme étiquette.
172 )))
173 |(((
174 Forcer la taille sur l'axe vertical
175
176 Hauteur
177 )))|(((
178 Ces paramètres permettent de régler la taille des étiquettes sur l'axe vertical.
179 Entrer un texte dont la taille est celle attendue pour l'étiquette (exemple : « aaaaaaaaaa »).
180
181 Permet de spécifier une hauteur en pixels. Prioritaire sur Taille max. des étiquettes.
182 )))
183 |Taille max des étiquettes (en %)|(((
184 Taille maximale des étiquettes (en pourcentage).
185
186 __Exemple :__ pour que l'espace occupé par les libellés représente au maximum 10% du graphique, entrer la valeur 10.
187 )))
188 |Angle des étiquettes d'axe|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).
189 |N'afficher que les valeurs min/max|Permet d'afficher les étiquettes uniquement pour les valeurs minimum et maximum.
190 |Fusionner les étiquettes qui s'intersectent |Permet de fusionner les étiquettes qui se superposent pour former une plus grande étiquette.
191 [[image:Etiquettes_superposées.png]] ➡  [[image:Etiquettes_fusionnées.png]]
192 |Ne pas répéter le texte|Permet de ne pas répéter le texte.