Discussion :

[Zebulon777]

Bonjour, bonjour.

C'est très bête, mais impossible de retrouver comment modifier l'affichage des chiffres :


Je voudrai afficher les chiffres à la française, donc avoir 7892 au lieu de 7,892.

Si j'ajoute formatter: '{value}' pour l'axe des Y, ça fonctionne, mais à mon avis, il y a mieux à faire.
De plus, impossible de retrouver comment modifier la bulle ?

Merci d'avance.

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
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
 
var TJ_ChartOpt = {
	backgroundColor: P_CoulFond,
	color: P_TAB_Colors,
	textStyle: {
		fontFamily: 'sans-serif'
	},
	animation: true,
	title: {
		padding: [15, 0, 0, 0], // Title space around content // [haut, droit, bas, gauche]
		left: 'center', // Distance between grid component and the left side of the container
		text: P_Titre,
		textStyle: {
			color: '#000',
			fontStyle: 'normal',
			fontWeight: 'bold',
			fontFamily: 'sans-serif',
			fontSize: 20,
		}
	},
	grid: {
		show: true,							// Whether to show the grid in rectangular coordinate
		backgroundColor: P_CoulFondGrpah, // fond du graphe
		top: 70,								// Distance between grid component and the top side of the container
		bottom: 85,								// Distance between grid component and the bottom side of the container
		left: 70,								// Distance between grid component and the left side of the container
		right: 30								// Distance between grid component and the right side of the container
	},
	legend: {
		show: true,
		type : 'plain',
		orient: 'horizontal',
		borderColor: '#95a5a6',
		borderWidth: 0, // Permet de ne pas avoir de bordure sans supprimer les paramètres.
		borderRadius: 7,
		shadowColor: 'rgba(0, 0, 0, 0.5)',
		shadowBlur: 10,
		itemWidth: 50,
		itemHeight: 20,
		left: 'center',
		top: 40
	},
	axisPointer: {
		show: true,
		lineStyle: {
			type: 'dashed',
			width: 1 // Epaisseur de la ligne verticale
		},
		label: {
			backgroundColor: '#777'
		}
	},
	xAxis: { // The X axis in Cartesian (rect.) coordinate
		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)']
			}
		},
		axisLine: {
			lineStyle: {
				color: 'rgb(105,105,105)',
				width: 2,
				onZero: true,
			}
		},
		type: 'category',
		name: 'Mois',
		nameLocation: 'center',
		nameTextStyle: {
			padding: 10, // Espace entre le libellé et la ligne de l'axe X
			fontWeight: 'bold',
			color: P_TextColor,
			fontSize: P_AxeTextSize
		},
		max: 'dataMax',
		position: 'bottom',
		boundaryGap: false, // IMPORTANT ! A Mettre à FALSE pour éviter le décalage
		// Affichage du trait repère
		axisTick: {
			/**
			 * Pour affichage du trait repère sur l'axe X le 1er du mois
			 * @param {object} index  - index du tableau de données traité
			 * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
			 */
			interval: function (index, valeur) {
				// récup du jour
				valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
				var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
				if (1 === jour) {
					return true;
				}
			}
		},
		// Affichage du label
		axisLabel: {
			/**
			 * Pour affichage du label au milieu du mois, on met 15 pour simplifier
			 * @param {object} index  - index du tableau de données traité
			 * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
			 * Nota : le return true entraine l'appel de la fonction de formatage
			 */
			align: "center",
			interval: function (index, valeur) {
				// récup du jour
				valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
				var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
				if (15 === jour) {
					return true;
				}
			},
			formatter: function (index, valeur) {
				// récup du mois pour affichage
				valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
				return valeur ? valeur.split(sepDate)[2] : "";
			}
		},
		splitLine: {
			show: true, // True => quadrillage VERTICAL sur le graphe
			lineStyle: {
				color: "#CCC",
				type: "dotted",
				width: 1
			},
			interval: function (index, valeur) {
				// récup du jour
				valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
				var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
				if (1 === jour) {
					return true;
				}
			}
		},
		axisPointer: {
			show: true,
			label: {
				formatter: function (params) {
					return DateMouv[parseInt(params.value)]; // 
				}
			},
		},
		data: Jours_X
	},
	yAxis: {
		axisLine: {
			lineStyle: {
				color: 'rgb(165,165,165)',
				width: 2
			}
		},
		axisTick: {
			length: 3,
		},
		axisLabel: { // Settings related to axis label
			color: 'rgb(070,070,070)',
			formatter: '{value}' // En mettant au format text, on enlève le formattage : 1,400 au lieu de 1400
		},
		splitLine: {
			lineStyle: {
				width: 1,
				type: "dotted"
			}
		},
		type: 'value',
		min: 'dataMin', //WMin,
		max: 'dataMax', //WMax'',
		name: 'Mouvements',
		nameLocation: 'center',
		nameRotate: 90,
		nameTextStyle: {
			padding: 35, // Décalage par rapport à l'axe des Y
			fontWeight: 'bold',
			color: P_TextColor,
			fontSize: P_AxeTextSize
		},
		axisPointer: {
			show: true,
			label: {
				formatter: function (params) {
					return parseInt(params.value) + "";
				}
			}
		}
	},
	dataZoom: [{
		type: "slider",
		showDetail: true, // Permet d'afficher ou pas les valeurs sur le dataZoom
		showDataShadow: 'auto',
		realtime: true,
		rangeMode: "percent",
		start: WDebZoom, // the left is located at 10% - DEFAUT = 0
		end: WFinZoom, // the right is located at 60% - DEFAUT = 33
		filterMode: "empty",
		/**
		 * @param {*} value If axis.type is 'category', `value` is the index of axis.data.
		 *                  else `value` is current value.
		 * @param {strign} valueStr Inner formatted string.
		 * @return {string} Returns the label formatted.
		 */
		labelFormatter: function (value) {
 
			return DateMouv[value]; // Permet d'afficher la date complète en début et en fin de dataZoom
		}
	},
	{
		type: "inside",
		filterMode: 'empty'
	}],
	toolbox: { // Cartouche en haut à droite
		show: true,
		padding: [5, 20, 0, 0], // [haut, droit, bas, gauche]
		itemSize: 15,
		itemGap: 10,
		showTitle: true,
		feature: {
			restore: {
				show: true,
				title: 'Rechargement'
			},
			magicType: {
				type: ['line', 'bar'],
				title: {
					line: 'Ligne',
					bar: 'Histo.'
				}
			},
			saveAsImage: {
				title: 'Sauvegarde\nPNG'
			},
			dataView: {
				show: true, // Affiche ou non l'icône pour afficher les données utilisées.
				readOnly: false,
				backgroundColor: '#88ABD9',
				title: 'Export\nCSV',
				lang: ['Données utilisées pour le graphique...', 'Retour', 'Export CSV'],
				optionToContent: function (opt) {
					var axisData = opt.xAxis[0].data;
					var series = opt.series;
					var WTable01 = '<div id="ID_Table_Data">';
					WTable01 = WTable01 + '<table class="table-fill">';
					WTable01 = WTable01 + '<thead><tr>';
					WTable01 = WTable01 + '<th class="text-center" style="width:200px">Dates</th>'
					WTable01 = WTable01 + '<th class="text-center" style="width:20%">' + series[2].name + '</th>';
					WTable01 = WTable01 + '<th class="text-center" style="width:20%">' + series[1].name + '</th>';
					WTable01 = WTable01 + '<th class="text-center" style="width:20%">' + series[0].name + '</th>';
					WTable01 = WTable01 + '</tr></thead>';
					WTable01 = WTable01 + '<tbody class="table-hover">';
					for (var i = 0, l = axisData.length; i < l; i++) {
						WLigneCSV = WLigneCSV + DateMouv[i] + ";" + series[2].data[i] + ";";
						WLigneCSV = WLigneCSV + series[1].data[i] + ";" + series[0].data[i];
						WLigneCSV = WLigneCSV + "\n";
						WTable01 += '<tr>' +
							'<td class="text-center" >' + DateMouv[i] + '</td>' +
							'<td class="text-center" >' + series[2].data[i] + '</td>' +
							'<td class="text-center" >' + series[1].data[i] + '</td>' +
							'<td class="text-center" >' + series[0].data[i] + '</td>' +
							'</tr>';
					}
					WTable01 += '</div></tbody></table>';
					return WTable01;
				},
				contentToOption: function (opt) { // Va permetrtre de gérer l'exportation en CSV
					var NomCSV = "TraficJournalier_" + P_Annee;
					var Ext = ".CSV";
					var FicCSV = NomCSV + Ext;
					// Ecrire le contenu de la variable WLigneCSV dans un fichier
					download(FicCSV, WLigneCSV);
				}
			}
		}
	},
	tooltip: {
		show: true,
		trigger: 'axis', // Triggered by axes.
		axisPointer: {
			type: 'cross',
//			label: {
//				formatter: function (params) {
//					return DateMouv[parseInt(params.value)]; // 
//				},
//			},
			lineStyle: {
				width: 1 // Epaisseur de la ligne verticale
			}
		}
	},
	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: 2,
			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
	}]
};

[psychadelic]

https://developer.mozilla.org/fr/doc...x/NumberFormat

[Zebulon777]

Merci, mais toujours impossible de trouver où appliquer cela à la bulle ?

[psychadelic]

ça restera toujours du javacript

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
   axisLabel: {
 
///...
      formatter: (function(value){
        let label;
///...
        return label;
      })
    }

[Zebulon777]

Pour qu'on soit bien sur la même longueur d'onde , ce sont les valeurs dans la bulle que je veux modifier et pour le moment, rien ne fonctionne les chiffres restent au format anglo-saxon : "1,500" au lieu de "1500".

Edit : pour l'axe des ordonnées, c'est bon, c'est corrigé.

[psychadelic]

Je ne suis pas sur ta longueur d'onde. et je ne connais rien à eCharts.

Par contre j'ai quelques prétentions en JavaScript, ce qui me permet de savoir comment un truc comme eCharts peut être fabriqué et fonctionner.

Comme je l'ai écrit, ça restera toujours du JavaScript, cad un langage ou tout est objet, que ce soit une simple variable ou une fonction.

Donc remplacer une valeur de sortie d'un objet de type variable par le résultat d'un retour de fonction traitant cette même variable, ça ne pose aucun souci en JS.

à toi d'écrire le contenu de cette fct pour obtenir le formatage de ton chiffre.

dans ton cas quelque chose dans le genre

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
formatter: (function(value){
        return new Intl.NumberFormat('fr-FR', { maximumSignificantDigits: 3 }).format(value);
      })

ou, si tu préfères plus concis :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

formatter: (value => new Intl.NumberFormat('fr-FR', { maximumSignificantDigits: 3 }).format(value) );

mais de mon coté e n'ai pas compris si cela fait le job ou non, et si, j'avoue, j'aimerai bien savoir quand même, histoire de voir au moins un [cette discussion est résolue].
a défaut d'une réponse plus claire de ta part.

[NoSmoking]

Bonjour,

Si j'ajoute formatter: '{value}' pour l'axe des Y, ça fonctionne, mais à mon avis, il y a mieux à faire.

tout d'abord restons dans le cadre de Echart et dans ce cadre là tu ne pourras pas faire plus simple.

En absence de « fonction formatter » Echart procède à son propre formatage interne dont fait partie la partie addCommas, méthode de l'objet echartsInstance.format, malheureusement cet objet est non modifiable.

En conclusion formatter: "{value}" reste la bonne solution à ton problème.

[Zebulon777]

Je ne suis pas sur ta longueur d'onde. et je ne connais rien à eCharts.

Par contre j'ai quelques prétentions en JavaScript, ce qui me permet de savoir comment un truc comme eCharts peut être fabriqué et fonctionner.

Comme je l'ai écrit, ça restera toujours du JavaScript, cad un langage ou tout est objet, que ce soit une simple variable ou une fonction.

Donc remplacer une valeur de sortie d'un objet de type variable par le résultat d'un retour de fonction traitant cette même variable, ça ne pose aucun souci en JS.

à toi d'écrire le contenu de cette fct pour obtenir le formatage de ton chiffre.

dans ton cas quelque chose dans le genre

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
formatter: (function(value){
        return new Intl.NumberFormat('fr-FR', { maximumSignificantDigits: 3 }).format(value);
      })

ou, si tu préfères plus concis :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

formatter: (value => new Intl.NumberFormat('fr-FR', { maximumSignificantDigits: 3 }).format(value) );

mais de mon coté e n'ai pas compris si cela fait le job ou non, et si, j'avoue, j'aimerai bien savoir quand même, histoire de voir au moins un [cette discussion est résolue].
a défaut d'une réponse plus claire de ta part.

Désolé, mais je n'ai pas été précis, mais non, ça n'a pas fonctionné et @Nosmoking en donne la raison.

Bonjour,

tout d'abord restons dans le cadre de Echart et dans ce cadre là tu ne pourras pas faire plus simple.

En absence de « fonction formatter » Echart procède à son propre formatage interne dont fait partie la partie addCommas, méthode de l'objet echartsInstance.format, malheureusement cet objet est non modifiable.

En conclusion formatter: "{value}" reste la bonne solution à ton problème.

Ok, merci, suis content d'avoir la bonne solution, pour une fois

Par contre, là, où j'ai besoin de ton aide, c'est que je n'arrive pas à modifier les infos dans la bulle. Je dois surement passer à côté de quelque chose, mais rien de ce que j'essaye ne fonctionne.
J'suis perdu, j'y ai passé une bonne partie de la journée hier.

[NoSmoking]

Concernant la « tooltip », le principe est le même il te faut déclarer formatter pour t'affranchir de cette fameuse virgule. Deux solutions s'offrent à toi

• Utilisation des templates internes à Echart

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

formatter: "{b0}<br>{a2} : {c2}<br>{a1} : {c1}<br>{a0} : {c0}"

où

• {b0} est la référence de l'axe des X, identiques pour toutes les séries
• {ax} est le nom de la série, donc différent pour chaque série
• {cx} est la valeur en Y pour la série concernée

Nota : toutes ces infos sont quelque part dans la documentation, je te laisse les retrouver ou pas
Cette méthode n'est pas très fun comparée à la « tooltip » par défaut.

• L'autre approche est de redéfinir, à travers une fonction, ce que tu souhaites mettre dedans et un petit console.log(data) en entrée de fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
formatter: function(data) {
  console.log("formatter : ", data);
}

Pour obtenir le même résultat, sans la virgule, on en arrive à un code pouvant ressembler à cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
formatter: function(data) {
  var html = [data[0].name];
  var p;
  var nb = data.length;
  while (p = data[--nb]) {
    html.push(p.marker + p.seriesName + " : " + p.value)
  }
  return html.join("<br>");
},

Je te laisse regarder à quoi correspond chaque paramètre.

[Zebulon777]

C'est exactement ce que j'ai fait (j'avais trouvé gnia gnia gnia ), mais je dois avoir un souci dans mon code, quelque part, car ça ne fonctionne pas.
J'ai même essayé de travailler au niveau de chaque série, sans plus de résultat.
Et le console.log n'affiche rien.
J'suis perdu !

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
 
Par ex:
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: 2,
		type: 'solid' //'dotted' / 'dashed'
	},
	smooth: false, // Permet de lisser ou non les courbes
	label: {
		formatter: '{a}:{c}'
	},
	data: NbMouvN_Y
},
 
ou
 
tooltip: {
	show: true,
	trigger: 'axis', // Triggered by axes.
	axisPointer: {
		type: 'cross',
		label: {
				formatter: '{b0}: {c0}<br />{b1}: {c1}',
			formatter: function (params) {
				return DateMouv[parseInt(params.value)]; // 
			},
		},
		lineStyle: {
			width: 1 // Epaisseur de la ligne verticale
		}
	}
},
 
ou
 
tooltip: {
	show: true,
	trigger: 'axis', // Triggered by axes.
	formatter: '{b0}: {c0}<br />{b1}: {c1}',
	axisPointer: {
		type: 'cross',
		label: {
			formatter: function (params) {
				return DateMouv[parseInt(params.value)]; // 
			},
		},
		lineStyle: {
			width: 1 // Epaisseur de la ligne verticale
		}
	}
},

Je te remets ce qui pourrait te faciliter les choses pour m'aider, j'espère que je n'ai rien oublié.

Code :

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
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
 
Jours_X=[0,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,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365]
 
NbMouvN_Y=[555,595,582,571,626,496,594,620,575,606,592,643,431,556,584,554,563,576,635,436,561,576,543,564,569,657,430,557,604,564,585,578,674,434,566,618,467,412,553,501,451,577,604,532,581,591,672,482,561,601,584,596,503,623,491,587,604,572,561,532,631,484,579,624,582,578,582,668,474,573,658,620,621,617,687,483,581,641,593,620,385,590,478,624,704,670,697,695,632,578,590,683,614,673,691,744,500,621,725,602,597,676,770,614,681,717,609,598,661,733,633,689,659,588,639,684,744,647,668,672,684,733,634,670,623,668,635,605,690,656,686,614,709,743,702,700,686,740,593,603,666,523,697,683,728,563,642,701,663,668,675,730,566,669,703,670,662,671,731,557,640,704,690,690,700,739,587,641,726,710,710,732,755,590,673,751,698,734,720,771,590,664,741,732,726,723,767,648,704,754,728,746,730,758,633,707,722,695,704,706,755,648,679,706,672,688,688,677,640,686,675,627,652,642,682,628,669,650,571,629,602,673,627,672,657,618,642,636,670,615,664,661,633,659,661,707,646,685,717,697]
 
NbMouvN1_Y=[567,684,615,578,571,623,446,568,597,546,566,563,624,423,531,602,541,550,577,622,417,533,597,542,565,582,616,425,541,599,548,561,585,652,464,557,646,599,595,626,666,488,571,639,615,610,625,669,501,602,648,612,605,614,675,497,603,650,621,632,641,683,482,577,571,489,505,558,652,478,581,666,623,619,658,690,299,574,614,641,643,662,659,495,624,696,659,687,697,763,604,673,695,650,659,667,695,589,684,718,661,670,688,752,627,621,726,704,678,694,757,612,669,714,678,669,701,768,616,610,701,715,712,724,758,605,603,705,719,704,713,760,602,670,733,698,692,722,758,600,672,731,694,719,649,627,565,692,739,672,669,693,736,588,591,673,668,653,694,735,590,663,708,650,667,698,750,601,660,741,688,710,723,781,639,689,751,708,735,741,784,649,715,771,734,744,744,767,648,709,754,742,744,742,683,635,687,706,664,692,697,720,640,675,690,647,654,662,694,619,660,655,604,614,613,656,621,657,639,598,595,609,653,625,647,622,603,615,616,653,614,660,658,618,630,627,673,631,662,677,644,650,647,679,632,690,734,686,699,699,734,613,665,734,683,711,711,753,603,668,724,667,699,705,739,592,669,724,665,689,701,751,600,678,710,659,675,681,733,561,636,715,381,660,669,720,573,657,709,661,679,692,761,623,682,709,670,684,685,742,626,618,621,583,571,599,667,528,628,659,612,605,609,657,422,539,610,565,578,568,642,412,531,596,546,562,574,640,401,532,597,551,563,579,640,430,546,596,548,580,564,649,426,531,563,553,574,602,662,445,547,639,584,625,627,697,540,502,452,551,552,554,617,503,514]
 
NbMouvN2_Y=[529,570,657,637,576,557,582,608,433,548,568,533,539,560,608,403,517,573,530,527,555,613,421,518,577,417,543,558,613,414,522,623,602,593,628,669,461,563,622,577,591,617,657,457,568,628,571,569,606,684,491,603,645,604,593,633,667,496,587,642,608,584,643,682,499,592,673,643,620,661,691,471,570,718,627,621,660,694,494,377,443,662,643,680,706,483,505,659,695,656,536,714,560,625,698,647,664,682,733,585,642,708,656,657,729,766,654,692,740,720,694,720,771,649,704,741,691,704,607,765,654,734,767,718,767,667,594,560,718,782,703,707,736,763,628,600,737,714,699,618,774,620,675,747,706,693,629,772,617,685,744,694,715,637,757,634,689,752,683,691,722,749,592,624,675,593,695,728,741,594,667,767,732,701,704,777,629,681,772,655,714,737,786,661,705,815,715,775,781,809,679,706,788,739,729,697,694,657,686,749,713,706,723,727,639,676,741,699,661,648,694,596,620,653,614,650,643,677,647,683,687,625,636,636,676,656,653,686,657,639,644,676,658,677,710,666,655,668,697,664,702,766,730,749,722,749,647,693,820,765,749,767,791,658,706,785,722,719,608,777,646,699,770,714,719,745,767,637,681,776,690,705,739,761,616,681,757,698,681,714,749,580,632,748,670,666,710,742,601,646,745,706,714,758,763,622,676,726,692,688,707,755,623,613,594,644,673,630,661,466,568,665,620,625,658,587,420,590,634,605,598,612,660,429,557,631,595,598,612,669,431,563,636,584,580,606,655,451,542,617,600,592,639,651,447,561,649,612,631,670,715,529,598,646,611,615,642,666,524,460,628,580,577,587,595,517]
 
...
...
...
/*----------------------------------------------------------------------------------------------*/
/* VARIABLES GLOBALES CONSTANTES POUR LES GRAPHES                                               */
/*----------------------------------------------------------------------------------------------*/
 
var WLigneCSV = "DATES;" + (Annee - 2) + ";" + (Annee - 1) + ";" + Annee + "\n";
 
var WPaddingTexte_xAxis = 20;
var WPaddingTexte_yAxis = 20;
var P_AxeTextSize = 15;
var P_TextColor = "#5d6d7e"; // gris légèrement foncé
var P_CoulFond = "#ffffff"; // blanc
var P_Colors = ["#FE0000"]; // rouge
var P_TAB_Colors = ['#ff0000', '#0000FF', '#008000']; // Couleur des courbes => ROUGE, BLEU, VERT
 
/*----------------------------------------------------------------------------------------------*/
/* Graph TRAFIC JOURNALIER - GRAND                                                              */
/*----------------------------------------------------------------------------------------------*/
function createGraph_TJ(P_Plateforme, P_Annee, jsonData_N, jsonData_N1, jsonData_N2) {
	var i = 0,
		sepDate = " ", // Séparateur utilisé dans les dates lues dans la BDD.
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WJourN2 = 0,
		WJourN1 = 0,
		WJourN = 0,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		SerieChoisie = "",
		QuadrillageVertical = [],
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	if (jsonData_N2.length > 0) {
		i = 0;
		SerieChoisie = "";
		WMax = 0;
		WMin = parseInt(jsonData_N2[0][4]);
		while (i < jsonData_N2.length) {
			var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
			WNbMouv_N2 = WNbMouv_N2 + parseInt(jsonData_N2[i + 1][4]);
			WMax = MinMax(WNbMouv_N2, WMax, "MAX");
			WMin = MinMax(WNbMouv_N2, WMin, "MIN");
			NbMouvN2_Y.push(WNbMouv_N2);
			WJourN2 = WJourN2 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		SerieChoisie = "N2";
	}
	if (jsonData_N1.length > 0) {
		i = 0;
		while (i < jsonData_N1.length) {
			var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
			WNbMouv_N1 = WNbMouv_N1 + parseInt(jsonData_N1[i + 1][4]);
			WMax = MinMax(WNbMouv_N1, WMax, "MAX");
			WMin = MinMax(WNbMouv_N1, WMin, "MIN");
			NbMouvN1_Y.push(WNbMouv_N1);
			WJourN1 = WJourN1 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N1.length >= jsonData_N2.length) {
			SerieChoisie = "N1";
		}
	}
	if (jsonData_N.length > 0) {
		i = 0;
		while (i < jsonData_N.length) {
			var WNbMouv_N = parseInt(jsonData_N[i][4]);
			WNbMouv_N = WNbMouv_N + parseInt(jsonData_N[i + 1][4]);
			WMax = MinMax(WNbMouv_N, WMax, "MAX");
			WMin = MinMax(WNbMouv_N, WMin, "MIN");
			NbMouvN_Y.push(WNbMouv_N);
			WJourN = WJourN + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N.length >= jsonData_N1.length) {
			SerieChoisie = "N";
		}
	}
 
	// Traitement pour l'axe des X
	// Il faut déterminer quelle série va servir pour l'axe des X.
	if (SerieChoisie == "N") {
		WNbJourTot = jsonData_N.length;
	}
	if (SerieChoisie == "N1") {
		WNbJourTot = jsonData_N1.length;
	}
	if (SerieChoisie == "N2") {
		WNbJourTot = jsonData_N2.length;
	}
	if (SerieChoisie == "") {
		WNbJourTot = 0;
	}
	i = 0;
	WNumJour = 0;
	while (i <= WNbJourTot - 1) {
		if (SerieChoisie == "N") {
			var WJour = jsonData_N[i][3].slice(8, 10);
			var WMois = jsonData_N[i][3].slice(5, 7);
			var WJourSemaine = JourEnLettres(jsonData_N[i][3]);
		}
		if (SerieChoisie == "N1") {
			var WJour = jsonData_N1[i][3].slice(8, 10);
			var WMois = jsonData_N1[i][3].slice(5, 7);
			var WJourSemaine = JourEnLettres(jsonData_N1[i][3]);
		}
		if (SerieChoisie == "N2") {
			var WJour = jsonData_N2[i][3].slice(8, 10);
			var WMois = jsonData_N2[i][3].slice(5, 7);
			var WJourSemaine = JourEnLettres(jsonData_N2[i][3]);
		}
		WMois = MoisEnLettres(WMois);
		QuadrillageVertical.push({
			xAxis: "01" + sepDate + WMois
		});
		//			var WDateMouv = WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		var WDateMouv = WJourSemaine + " " + WJour + " " + WMois; // + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		Jours_X.push(WNumJour);
		DateMouv.push(WDateMouv);
		MoisMouv_X.push(WMois);
		WNumJour = WNumJour + 1;
		i = i + 2;
	}
 
	// Récupération du dernier jour de l'année N traité pour placer le DataZoom
	WDerNumJour = WJourN;
	WDebZoom = ((WDerNumJour * 100) / 365) - 25;
	WFinZoom = ((WDerNumJour * 100) / 365) + 15;
	if (WDebZoom < 0) {
		WDebZoom = 0; // 0%
		WFinZoom = 33; // 33%
	}
 
	if (P_Plateforme == "LFPO") {
		var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj")); //
		val = ($("#lfpo_tj").width() / 37);
		padding_array = [0, 0, 0, val]; // [haut, droit, bas, gauche]
		P_Titre = "Trafic Journalier LFPO - " + WAnneeN + " - " + WAnneeN1 + " - " + WAnneeN2;
		var P_CoulFondGrpah = "#E1FFE9";
	}
	if (P_Plateforme == "LFPG") {
		var TJ_Chart_C2 = echarts.init(document.getElementById("lfpg_tj")); //
		val = ($("#lfpg_tj").width() / 37);
		padding_array = [0, 0, 0, val]; // [haut, droit, bas, gauche]
		P_Titre = "Trafic Journalier LFPG - " + WAnneeN + " - " + WAnneeN1 + " - " + WAnneeN2;
		var P_CoulFondGrpah = "#FFFFD8"; //"#FFF7FC"; //"#FFFFC8";
	}
	if (P_Plateforme == "LFPB") {
		var TJ_Chart_C3 = echarts.init(document.getElementById("lfpb_tj_left")); //
		val = ($("#lfpb_tj_left").width() / 37);
		padding_array = [0, 0, 0, val]; // [haut, droit, bas, gauche]
		P_Titre = "Trafic Journalier LFPB - " + WAnneeN + " - " + WAnneeN1 + " - " + WAnneeN2;
		var P_CoulFondGrpah = "#DDF6FF";
	}
	if (P_Plateforme == "LFOB") {
		var TJ_Chart_C4 = echarts.init(document.getElementById("lfob_tj_right")); //
		val = ($("#lfob_tj_right").width() / 37);
		padding_array = [0, 0, 0, val]; // [haut, droit, bas, gauche]
		P_Titre = "Trafic Journalier LFOB - " + WAnneeN + " - " + WAnneeN1 + " - " + WAnneeN2;
		var P_CoulFondGrpah = "#FEEDED";
	}
 
console.log("Jours_X="+JSON.stringify( Jours_X));
console.log("NbMouvN_Y="+JSON.stringify( NbMouvN_Y));
console.log("NbMouvN1_Y="+JSON.stringify( NbMouvN1_Y));
console.log("NbMouvN2_Y="+JSON.stringify( NbMouvN2_Y));
 
 
	var TJ_ChartOpt = {
		backgroundColor: P_CoulFond,
		color: P_TAB_Colors,
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true,
		title: {
			padding: [15, 0, 0, 0], // Title space around content // [haut, droit, bas, gauche]
			left: 'center', // Distance between grid component and the left side of the container
			text: P_Titre,
			textStyle: {
				color: '#000',
				fontStyle: 'normal',
				fontWeight: 'bold',
				fontFamily: 'sans-serif',
				fontSize: 20,
			}
		},
		grid: {
			show: true,							// Whether to show the grid in rectangular coordinate
			backgroundColor: P_CoulFondGrpah, // fond du graphe
			top: 70,								// Distance between grid component and the top side of the container
			bottom: 85,								// Distance between grid component and the bottom side of the container
			left: 70,								// Distance between grid component and the left side of the container
			right: 30								// Distance between grid component and the right side of the container
		},
		legend: {
			show: true,
			type : 'plain',
			orient: 'horizontal',
			borderColor: '#95a5a6',
			borderWidth: 0, // Permet de ne pas avoir de bordure sans supprimer les paramètres.
			borderRadius: 7,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			shadowBlur: 10,
			itemWidth: 30,
			itemHeight: 17,
			left: 'center',
			top: 40
		},
		axisPointer: {
			show: true,
			lineStyle: {
				type: 'dashed',
				width: 1 // Epaisseur de la ligne verticale
			},
			label: {
				backgroundColor: '#777'
			}
		},
		xAxis: { // The X axis in Cartesian (rect.) coordinate
			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)']
				}
			},
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
			type: 'category',
			name: 'Mois',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 10, // Espace entre le libellé et la ligne de l'axe X
				fontWeight: 'bold',
				color: P_TextColor,
				fontSize: P_AxeTextSize
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: false, // IMPORTANT ! A Mettre à FALSE pour éviter le décalage
			// Affichage du trait repère
			axisTick: {
				/**
				 * Pour affichage du trait repère sur l'axe X le 1er du mois
				 * @param {object} index  - index du tableau de données traité
				 * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
				 */
				interval: function (index, valeur) {
					// récup du jour
					valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
					var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
					if (1 === jour) {
						return true;
					}
				}
			},
			// Affichage du label
			axisLabel: {
				/**
				 * Pour affichage du label au milieu du mois, on met 15 pour simplifier
				 * @param {object} index  - index du tableau de données traité
				 * @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
				 * Nota : le return true entraine l'appel de la fonction de formatage
				 */
				align: "center",
				padding: padding_array, // [haut, droit, bas, gauche] -> centrage des mois dans chaque colonne
				interval: function (index, valeur) {
					// récup du jour
					valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
					var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
					if (15 === jour) {
						return true;
					}
				},
				formatter: function (index, valeur) {
					// récup du mois pour affichage
					valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
					return valeur ? valeur.split(sepDate)[2] : "";
				},
			},
			splitLine: {
				show: true, // True => quadrillage VERTICAL sur le graphe
				lineStyle: {
					color: "#CCC",
					type: "dotted",
					width: 1
				},
				interval: function (index, valeur) {
					// récup du jour
					valeur = DateMouv[index]; // contient PAR EX dimanche 23 juillet
					var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
					if (1 === jour) {
						return true;
					}
				}
			},
			axisPointer: {
				show: true,
				label: {
					formatter: function (params) {
						return DateMouv[parseInt(params.value)]; // 
					}
				},
			},
			data: Jours_X
		},
		yAxis: {
			axisLine: {
				lineStyle: {
					color: 'rgb(165,165,165)',
					width: 2
				}
			},
			axisTick: {
				length: 3,
			},
			axisLabel: { // Settings related to axis label
				color: 'rgb(070,070,070)',
				formatter: '{value}' // En mettant au format text, on enlève le formattage : 1,400 au lieu de 1400
			},
			splitLine: {
				lineStyle: {
					width: 1,
					type: "dotted"
				}
			},
			type: 'value',
			scale: true, // Permet d'avoir une échelle plus adaptée, tenant compte des min et max
//				min: 'dataMin', //WMin, // NON UTILISABLE AVEC scale
//				max: 'dataMax', //WMax, // NON UTILISABLE AVEC scale
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 35, // Décalage par rapport à l'axe des Y
				fontWeight: 'bold',
				color: P_TextColor,
				fontSize: P_AxeTextSize
			},
			axisPointer: {
				show: true,
				label: {
					formatter: function (params) {
						return parseInt(params.value) + "";
					}
				}
			}
		},
		dataZoom: [{
			type: "slider",
			showDetail: true, // Permet d'afficher ou pas les valeurs sur le dataZoom
			showDataShadow: 'auto',
			realtime: true,
			rangeMode: "percent",
			start: WDebZoom, // the left is located at 10% - DEFAUT = 0
			end: WFinZoom, // the right is located at 60% - DEFAUT = 33
			filterMode: "empty",
			/**
			 * @param {*} value If axis.type is 'category', `value` is the index of axis.data.
			 *                  else `value` is current value.
			 * @param {strign} valueStr Inner formatted string.
			 * @return {string} Returns the label formatted.
			 */
			labelFormatter: function (value) {
				return DateMouv[value]; // Permet d'afficher la date complète en début et en fin de dataZoom
			}
		},
		{
			type: "inside",
			filterMode: 'empty'
		}],
		toolbox: { // Cartouche en haut à droite
			show: true,
			padding: [5, 20, 0, 0], // [haut, droit, bas, gauche]
			itemSize: 15,
			itemGap: 10,
			showTitle: true,
			feature: {
				restore: {
					show: true,
					title: 'Rechargement'
				},
				magicType: {
					type: ['line', 'bar'],
					title: {
						line: 'Ligne',
						bar: 'Histo.'
					}
				},
				saveAsImage: {
					title: 'Sauvegarde\nPNG'
				},
				dataView: {
					show: true, // Affiche ou non l'icône pour afficher les données utilisées.
					readOnly: false,
					backgroundColor: '#88ABD9',
					title: 'Export\nCSV',
					lang: ['Données utilisées pour le graphique...', 'Retour', 'Export CSV'],
					optionToContent: function (opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var WTable01 = '<div id="ID_Table_Data">';
						WTable01 = WTable01 + '<table class="table-fill">';
						WTable01 = WTable01 + '<thead><tr>';
						WTable01 = WTable01 + '<th class="text-center" style="width:200px">Dates</th>'
						WTable01 = WTable01 + '<th class="text-center" style="width:20%">' + series[2].name + '</th>';
						WTable01 = WTable01 + '<th class="text-center" style="width:20%">' + series[1].name + '</th>';
						WTable01 = WTable01 + '<th class="text-center" style="width:20%">' + series[0].name + '</th>';
						WTable01 = WTable01 + '</tr></thead>';
						WTable01 = WTable01 + '<tbody class="table-hover">';
						for (var i = 0, l = axisData.length; i < l; i++) {
							WLigneCSV = WLigneCSV + DateMouv[i] + ";" + series[2].data[i] + ";";
							WLigneCSV = WLigneCSV + series[1].data[i] + ";" + series[0].data[i];
							WLigneCSV = WLigneCSV + "\n";
							WTable01 += '<tr>' +
								'<td class="text-center" >' + DateMouv[i] + '</td>' +
								'<td class="text-center" >' + series[2].data[i] + '</td>' +
								'<td class="text-center" >' + series[1].data[i] + '</td>' +
								'<td class="text-center" >' + series[0].data[i] + '</td>' +
								'</tr>';
						}
						WTable01 += '</div></tbody></table>';
						return WTable01;
					},
					contentToOption: function (opt) { // Va permetrtre de gérer l'exportation en CSV
						var NomCSV = "TraficJournalier_" + P_Annee;
						var Ext = ".CSV";
						var FicCSV = NomCSV + Ext;
						// Ecrire le contenu de la variable WLigneCSV dans un fichier
						download(FicCSV, WLigneCSV);
					}
				}
			}
		},
		tooltip: {
			show: true,
			trigger: 'axis', // Triggered by axes.
			formatter: '{b0}: {c0}<br />{b1}: {c1}',
			axisPointer: {
				type: 'cross',
				label: {
					formatter: function (params) {
						return DateMouv[parseInt(params.value)]; // 
					},
				},
				lineStyle: {
					width: 1 // Epaisseur de la ligne verticale
				}
			}
		},
		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: 2,
				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,
			tooltip: {
				formatter: '{b0}: {c0}<br />{b1}: {c1}'
			}
		},
		{
			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
		}]
	};
 
	if (P_Plateforme == "LFPO") {
		TJ_Chart_C1.setOption(TJ_ChartOpt);
		var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj")); //
	}
	if (P_Plateforme == "LFPG") {
		TJ_Chart_C2.setOption(TJ_ChartOpt);
		var TJ_Chart_C2 = echarts.init(document.getElementById("lfpg_tj")); //
	}
	if (P_Plateforme == "LFPB") {
		TJ_Chart_C3.setOption(TJ_ChartOpt);
		var TJ_Chart_C3 = echarts.init(document.getElementById("lfpb_tj_left")); //
	}
	if (P_Plateforme == "LFOB") {
		TJ_Chart_C4.setOption(TJ_ChartOpt);
		var TJ_Chart_C4 = echarts.init(document.getElementById("lfob_tj_right")); //
	}
}
...
...
...

En fait, pour être précis, j'arrive bien à avoir les chiffres comme je le veux, mais je pers les pastilles de couleurs et 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
tooltip: {
	show: true,
	trigger: 'axis', // Triggered by axes.
	formatter: '{a0} : {c0}<br/>{a1} : {c1}<br/>{a2} : {c2}',
	axisPointer: {
		type: 'cross',
//		label: {
//			formatter: function (params) {
//				return DateMouv[parseInt(params.value)]; // 
//			},
//		},
 		lineStyle: {
			width: 1 // Epaisseur de la ligne verticale
		}
	}
},

[NoSmoking]

C'est exactement ce que j'ai fait (j'avais trouvé gnia gnia gnia )

Euh !!! permet moi d'en douter fortement.

Tout d'abord une précision, c'est sur tooltip qu'il faut mettre la propriété formatter et non sur tooltip.axisPointer.

Donc

Code :

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
tooltip: {
    show: true,
    trigger: "axis", // Triggered by axes.
    formatter: function(data) {
        var html = [data[0].name];
        var p;
        var nb = data.length;
        while (p = data[--nb]) {
            html.push(p.marker + p.seriesName + " : " + p.value)
        }
        return html.join("<br>");
    },
    axisPointer: {
        type: "cross",
        lineStyle: {
            width: 1 // Epaisseur de la ligne verticale
        }
    }
},

devrait convenir !

[Zebulon777]

Euh !!! permet moi d'en douter fortement.

Si, si, promis, j'avais bien trouvé.
J'ai d'ailleurs modifié mon précédent message en fonction des différents tests (non concluants) que j'avais fait.

Tout d'abord une précision, c'est sur tooltip qu'il faut mettre la propriété formatter et non sur tooltip.axisPointer.

Oui, j'avais vu mon erreur d'où le dernier test.

Donc

Code :

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
tooltip: {
    show: true,
    trigger: "axis", // Triggered by axes.
    formatter: function(data) {
        var html = [data[0].name];
        var p;
        var nb = data.length;
        while (p = data[--nb]) {
            html.push(p.marker + p.seriesName + " : " + p.value)
        }
        return html.join("<br>");
    },
    axisPointer: {
        type: "cross",
        lineStyle: {
            width: 1 // Epaisseur de la ligne verticale
        }
    }
},

devrait convenir !

Quoi qu'il en soit, encore une fois, ta solution fonctionne...

Mais avec la date en tête c'est encore mieux (pour les gens qui pourraient s'en inspirer) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
    formatter: function(data) {
        var html = [DateMouv[parseInt(data[0].name)]];
        var p;
        var nb = data.length;
        while (p = data[--nb]) {
            html.push(p.marker + p.seriesName + " : " + p.value)
        }
        return html.join("<br>");
    },

Bon, par contre, je reconnais bien volontiers que je ne connaissais pas du tout le genre de code qui tu m'as donné.

Merci très très beaucoup
Encore une fois, tu me sors de la panade et j'apprends plein de choses.
Hop : résolu !