Bonjour à tous.
Tout d'abord, j'espère que je ne me suis pas trompé de section, sinon, ben je suis désolé et merci au modérateur qui voudra bien me le déplacer dans la bonne section.
Alors voici mon souci qui me fait perdre mes cheveux depuis quelques jours
Je trace un graphe avec 3 courbes correspondant à 3 années. Ces 3 années sont récupérées à partir d'une table qui contient toutes les données nécessaires avec 2 lignes par jours (arrivées et départs).
je voudrai :
- sur l'axe des X ne voir que les mois
- dans le bulle d'aide, la date.
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260 /*----------------------------------------------------------------------------------------------*/ /* Graph TRAFIC JOURNALIER */ /*----------------------------------------------------------------------------------------------*/ // Requête au serveur Annee = date.slice(0,4); var deferred = $.get("./scripts/PHP/TraficJournalier.php?date=".concat(Annee)); // Retour du serveur (traitement des données JSON) deferred.done(function(jsonData) { var update = false; if (jsonData[0].length > 0) { update = true; if ($("#LIG_TJ_LFPO").children().length == 0) { // addHTML("lfob", ["lfob_hg"], ["12"]); // on se place dans le div row ID="lfob", on crée une div lfob_hg col-md-12 addHTML("LIG_TJ_LFPO", ["lfpo_tj"], ["12"]); // Graph de gauche=LFPB / Graph de droite=LFOB } createGraph_TJ_LFPO(Annee, jsonData[0], jsonData[1], jsonData[2]); } else { $("#LIG_TJ_LFPO").empty(); } }); /*----------------------------------------------------------------------------------------------*/ /* Graph TRAFIC JOURNALIER LFPO - GRAND */ /*----------------------------------------------------------------------------------------------*/ function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){ var i = 0, WAnneeN = P_Annee, WAnneeN1 = P_Annee - 1, WAnneeN2 = P_Annee - 2, DateMouv = [], Jours_X = [], NbMouvN_Y = [], NbMouvN1_Y = [], NbMouvN2_Y = []; // Remplissage des tableaux i = 0; WNumJour = 1; while (i < jsonData_N2.length){ var WNbMouv_N2 = parseInt(jsonData_N2[i][4]); var WAnnee = jsonData_N2[i][3].slice(0,4); var JourMouv = jsonData_N2[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ var WJour = jsonData_N2[i][3].slice(8,10); var WMois = jsonData_N2[i][3].slice(5,7); WMois = MoisEnLettres(WMois); var WDateMouv = WJour + " " + WMois; Jours_X.push(WNumJour); NbMouvN2_Y.push(WNbMouv_N2); DateMouv.push(WDateMouv); i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D" WNumJour = WNumJour + 1; } console.log(Jours_X); console.log(DateMouv); console.log(NbMouvN2_Y); i = 0; while (i < jsonData_N1.length){ var WAnnee = jsonData_N1[i][3].slice(0,4); // var JourMouv = jsonData_N1[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ var WNbMouv_N1 = parseInt(jsonData_N1[i][4]); // Jours_X.push(JourMouv); NbMouvN1_Y.push(WNbMouv_N1); i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D" } i = 0; while (i < jsonData_N.length){ var WAnnee = jsonData_N[i][3].slice(0,4); // var JourMouv = jsonData_N[i][3].slice(8,10); // Récupération du jour de AAAA-MM-JJ var WNbMouv_N = parseInt(jsonData_N[i][4]); // Jours_X.push(JourMouv); NbMouvN_Y.push(WNbMouv_N); i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D" } var TJ_Colors = ["#FE0000"]; var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF']; var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj")); // val = ($("#lfpo_tj").width() / 20); padding_array = [0, 0, 0, val]; var TJ_ChartOpt = { // color: HG_Colors, color: TJ_TAB_Colors, title: { padding: [20, 5, 0, 5], // Title space around content text: 'Trafic Journalier LFPO', left: 'center' // Distance between grid component and the left side of the container }, grid: { show: false, // Whether to show the grid in rectangular coordinate top: 50, // Distance between grid component and the top side of the container bottom: 65, // Distance between grid component and the bottom side of the container left: 40, // Distance between grid component and the left side of the container right: 30 // Distance between grid component and the right side of the container }, xAxis: { // The X axis in Cartesian (rect.) coordinate type: 'category', name: 'Jours', nameLocation: 'center', nameTextStyle: { padding: 13, fontWeight: 'bold' }, max: 'dataMax', position: 'bottom', boundaryGap: true, axisLine: { lineStyle: { color: 'rgb(105,105,105)', width: 2, onZero: true, } }, axisTick: { show: true, // Whether to show the axis tick inside: false, length: 3 }, axisLabel: { interval: 30, // Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure rotate:0, margin: 10, showMinLabel: true, align : 'left', padding: padding_array, // [haut, droit, bas, gauche] color: 'rgb(050,050,050)' }, splitLine: {show: false}, // True => quadrillage sur le graphe splitArea : { // Permet de mettre un fond de couleurs différentes show: false, areaStyle:{ color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)'] } }, data: Jours_X }, yAxis: { type: 'value', name: 'Mouvements', nameLocation: 'center', nameRotate: 90, nameTextStyle: { padding: 15, fontWeight: 'bold' }, axisLine: { lineStyle: { color: 'rgb(165,165,165)', width: 2 } }, axisTick: { length: 3, }, axisLabel: { // Settings related to axis label color: 'rgb(070,070,070)' } }, tooltip: { show: true, trigger: 'axis', // Triggered by axes. axisPointer: { type: 'line', label : { formatter: function (params) { return DateMouv[parseInt(params.value) * 20] ; // * 60 => on se déplace de 60 dans le tableau de 1440 items } }, lineStyle: { width: 1 // Epaisseur de la ligne verticale } } }, toolbox: { // Cartouche en haut à droite show: true, feature: { magicType: { type: ['line', 'bar'], title: { line: 'Ligne', bar: 'Histo.' } }, saveAsImage: {title:'Sauvegarde Image'} } }, legend: { show: true, type : 'plain', bottom: 3, left: 0 }, series : [ { type: 'line', name: WAnneeN, // Series name used for displaying in tooltip and filtering with legend symbolSize: 7, showSymbol: false, // Whether to show symbol. It would be shown during tooltip hover lineStyle: { width: 1, type: 'solid' //'dotted' / 'dashed' }, smooth: false, // Permet de lisser ou non les courbes data: NbMouvN_Y }, { type: 'line', name: WAnneeN1, // Series name used for displaying in tooltip and filtering with legend symbolSize: 7, showSymbol: false, // Whether to show symbol. It would be shown during tooltip hover lineStyle: { width: 1, type: 'solid' //'dotted' / 'dashed' }, smooth: false, // Permet de lisser ou non les courbes data: NbMouvN1_Y }, { type: 'line', name: WAnneeN2, // Series name used for displaying in tooltip and filtering with legend symbolSize: 7, showSymbol: false, // Whether to show symbol. It would be shown during tooltip hover lineStyle: { width: 1, type: 'solid' //'dotted' / 'dashed' }, smooth: false, // Permet de lisser ou non les courbes data: NbMouvN2_Y } ], textStyle: { fontFamily: 'sans-serif' }, animation: true }; TJ_Chart_C1.setOption(TJ_ChartOpt); /*--------------------------------------------------------------------------------------------------*/ /* LFPO : ARR et DEP */ /*--------------------------------------------------------------------------------------------------*/ var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj")); // // Permet de définir dynamiquement le padding afin de bien positionner les libellés val = ($("#lfpo_tj").width() / 60); padding_array = [0, 0, 0, val]; TJ_ChartOpt.xAxis.data = Jours_X; TJ_ChartOpt.series[0].data = NbMouvN_Y; TJ_ChartOpt.series[1].data = NbMouvN1_Y; TJ_ChartOpt.series[2].data = NbMouvN2_Y; TJ_ChartOpt.xAxis.axisLabel.padding = padding_array; TJ_Chart_C1.setOption(TJ_ChartOpt); }
Si besoin, voici le contenu des tableaux que j'utilise :
Voila, j'espère vous avoir tout donné pour que vous puissiez m'aider, car là, je suis coincé.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 Jours_X : (366)*[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100,* ][0 99][100 199][200 299][300 365]300: 301301: 302302: 303303: 304304: 305305: 306306: 307307: 308308: 309309: 310310: 311311: 312312: 313313: 314314: 315315: 316316: 317317: 318318: 319319: 320320: 321321: 322322: 323323: 324324: 325325: 326326: 327327: 328328: 329329: 330330: 331331: 332332: 333333: 334334: 335335: 336336: 337337: 338338: 339339: 340340: 341341: 342342: 343343: 344344: 345345: 346346: 347347: 348348: 349349: 350350: 351351: 352352: 353353: 354354: 355355: 356356: 357357: 358358: 359359: 360360: 361361: 362362: 363363: 364364: 365365: 366length: 366__proto__: Array(0) DateMouv : (366)*["01 Janvier", "02 Janvier", "03 Janvier", "04 Janvier", "05 Janvier", "06 Janvier", "07 Janvier", "08 Janvier", "09 Janvier", "10 Janvier", "11 Janvier", "12 Janvier", "13 Janvier", "14 Janvier", "15 Janvier", "16 Janvier", "17 Janvier", "18 Janvier", "19 Janvier", "20 Janvier", "21 Janvier", "22 Janvier", "23 Janvier", "24 Janvier", "25 Janvier", "26 Janvier", "27 Janvier", "28 Janvier", "29 Janvier", "30 Janvier", "31 Janvier", "01 Février", "02 Février", "03 Février", "04 Février", "05 Février", "06 Février", "07 Février", "08 Février", "09 Février", "10 Février", "11 Février", "12 Février", "13 Février", "14 Février", "15 Février", "16 Février", "17 Février", "18 Février", "19 Février", "20 Février", "21 Février", "22 Février", "23 Février", "24 Février", "25 Février", "26 Février", "27 Février", "28 Février", "29 Février", "01 Mars", "02 Mars", "03 Mars", "04 Mars", "05 Mars", "06 Mars", "07 Mars", "08 Mars", "09 Mars", "10 Mars", "11 Mars", "12 Mars", "13 Mars", "14 Mars", "15 Mars", "16 Mars", "17 Mars", "18 Mars", "19 Mars", "20 Mars", "21 Mars", "22 Mars", "23 Mars", "24 Mars", "25 Mars", "26 Mars", "27 Mars", "28 Mars", "29 Mars", "30 Mars", "31 Mars", "01 Avril", "02 Avril", "03 Avril", "04 Avril", "05 Avril", "06 Avril", "07 Avril", "08 Avril", "09 Avril",* ] NbMouvN2_Y : (366)*[267, 283, 333, 319, 287, 279, 291, 305, 211, 278, 284, 265, 269, 282, 305, 198, 260, 286, 262, 265, 279, 310, 205, 263, 288, 205, 273, 280, 308, 203, 264, 315, 306, 296, 315, 335, 227, 285, 310, 288, 296, 310, 329, 226, 287, 312, 283, 285, 306, 341, 244, 305, 323, 299, 297, 319, 335, 243, 299, 319, 302, 292, 323, 341, 249, 299, 336, 320, 312, 329, 347, 231, 288, 341, 311, 308, 331, 349, 244, 190, 228, 322, 323, 340, 355, 239, 250, 332, 348, 329, 272, 362, 279, 318, 355, 321, 335, 338, 367, 291,* ]
Merci d'avance.
Partager