Axe des X et libellé

**Zebulon777** · 31/08/2018, 15h28

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 :

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,*…]

Voila, j'espère vous avoir tout donné pour que vous puissiez m'aider, car là, je suis coincé.
Merci d'avance.

**oooopppp** · 02/09/2018, 00h39

Salut,
moi aussi je suis dans les stats et moi aussi ... je m'arrache les cheveux (enfin ce qu'il en reste)

Alors perso je suis passé par un tas de tests de framework et le plus simple (et gratuit - tant pis pour highcharts) que j'ai trouvé
est chartjs ne pas se fier à leur exemples (qui sont hideux-rouge-pourrit) mais essayer de styliser un peut,
y'a beaucoup de sujets et tutoriels sur cet outil sur le web.

Je sais qu'il prend en charge plusieurs jeu de données en même temps (plusieurs graphiques en un)
cela pourrait être une solution pour toi, je suis allé voir la doc de echart et ça m'a paru assez fastidieux à appréhender.

Toutefois pour chart.js il vaut mieux chercher des exemples sur le web (en english) que de se tourner uniquement vers la documentation,
qui est assez peu claire (je leur ai fait savoir), enfin bon, on arrive quand même vite à afficher ce qu'on veut et les datas reprennent des tableaux comme les tiens,
ne pas hésiter à styliser :
un exemple (le code est dans la page et n'est pas minifié) sur Mon site web en bas de la page

p.s: on voit tout de suite que je ne suis pas un grand designer

mais le graph fait son taf !

Nom : Capture.JPG
Affichages : 1622
Taille : 71,4 Ko

**Zebulon777** · 03/09/2018, 10h21

Merci de ta réponse.
Malheureusement ECharts est imposé, je n'ai pas le choix.

Avec du mal, j'ai réussit à faire ce que je voulais faire, mais j'ai un nouveau problème que je n'arrive pas à résoudre : les tirets de l'axe des X ne tombent pas pile
en face.

Voici mon code modifié :

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
 
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() / 60);
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: 10,							// Espace entre le libellé et la ligne de l'axe X
			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,
			alignWithLabel: true,
			length: 3
		},
		axisLabel: {
			show: true,
			formatter: function (params) {
				return MoisMouv_X[params]
			},
			interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
			rotate:0,
			margin: 10,
			showMaxLabel: true,
			showMinLabel: true,
			align : 'auto',
			padding: padding_array, 			// [haut, droit, bas, gauche]
//					padding:[0,0,0,20],
			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)]; // 
				}
			},
			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: 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
		}
	],
	textStyle: {
		fontFamily: 'sans-serif'
	},
	animation: true
};
 
TJ_Chart_C1.setOption(TJ_ChartOpt);

Heu... voici une petite capture pour se rendre compte du problème.
Nom : Echarts.png
Affichages : 1435
Taille : 30,4 Ko

Sur l'image, on se rend bien compte que la souris affiche des valeurs du mois d'avril alors qu'elle n'est pas dans la "section" avril.

Un coup d'mains, siouplé ?

**oooopppp** · 03/09/2018, 22h51

Salut, ça c'est peut être un problème de padding / margin quelque part,
j'ai regardé les settings du xAxis mais je ne vois pas,
ça fait une semaine que je teste des frameworks de graph et j'en ai la nausée de leur settings pourris
et incompréhensible ...

Franchement si c'est toi le dev., impose ta techno, si le client a un peu d'argent,
tourne toi vers highcharts, payant sous différentes formes mais plus simple à mettre en place,
sinon y'a google chart ou je ne sais plus comment ça s'appelle le service de graphs de ggle,
aussi incompréhensible mais sûrement bien documenté ...

Désolé de ne pas pouvoir t'aider plus, j'ai énormément de travail,
ma stratégie (qui n'est pas la meilleure) dans ces cas là, c'est de "taper" jusqu'à épuisement sur le clavier
jusqu'à ce qu'il en sorte quelque chose ...

Donc : -> Retour dans la doc, exemples, tests, ça marche pas, retour dans la doc ... etc

Courage, on finit toujours par y arriver, une fois ça m'a pris 3 mois ...

p.s:

Code javascript :

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

1
2
3
4
 nameTextStyle: {
			padding: 10,	// Espace entre le libellé et la ligne de l'axe X
			fontWeight: 'bold'
		},

déjà c'est bizarre mais le font-weight ne semble pas fonctionner, le nom de tes mois n'est pas en gras,
essaye de passer à false certaine fonctionnalités, n'ajoute que les fonctionnalités vraiment nécessaires,
perso j'ai eu un gros bug hier en rechargeant le graph. dynamiquement, il reprenait ses anciennes valeurs au survol de la souris,
j'ai du me replonger dans la doc ... les autres faisaient les bourrins en détruisant la div du DOM et en la reconstruisant.

**Zebulon777** · 04/09/2018, 08h08

Ok, merci, je vais continuer à me plonger dans la doc et le net

Je suis bien d'accord avec toi, c'est un proglème de margin / padding, mais impossible de trouver lequel... Et il ne me reste de moins en moins de cheveux

Impossible de prendre autre chose Echarts, malheureusement, et puis ce serait une trop grosse perte de temps de tout recommencer avec une autre librairie.

Si, si, c'est bien en gras : cette partie concerne le nom de l'axe des abscisses uniquement ; ça n'apparait pas sur l'image.

Ce qui m'étonne, c'est qu'il n'y aie pas plus de personnes qui utilisent ECharts sur le forum...

**oooopppp** · 04/09/2018, 21h20

Salut, changer de tech. en cour de route n'est pas forcément un mauvais calcul,
perso. j'en suis à mon 3eme framework de graph. depuis la semaine dernière

C'est pas grave je préfère partir sur une techno que je maîtrise à peut près et qui un temps soit peu
configurable sans trop de peine ...
Regarde à cette page,
ouvre une console,
regarde les scripts, tu n'as plus qu'à adapter, tu rajoutes ta ligne supplémentaire de datas

La configuration
var config = { ... ETC ... voir script};

cf: datasets: [{
label: 'My First dataset', .. ETC ..
)]

pour lancer le graph ('ctx' c'est le div id="ctx" vide qui va accueillir le graph

Code :

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

1
2
3
4
window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
		};

Si tu veux ma config. :

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
 
/*
    * 
    * Placido shop - licence GNU Affero
    * function render_chart().
    * char_type
    * labels
    * datas
    * title
		*/
		var render_chart = function(char_type, labels, datas, title){
 
						// CHART.js ________________________________________________________
						// retire le carré couleur légende sous le titre
						Chart.defaults.global.legend.display = false;
 
						// OBJ Chart.js
						var MyChart = new Chart($('#visitors'), {
						// The type of chart we want to create // alter "line"
						type: char_type,
 
						// The data for our dataset
						data: {
								// ->  !!!!!!!!      DATAS for x axis     -> dates    !!!!!!!!!!!
								labels: labels,
 
								datasets: [{
										lineTension: 0.2,
										pointStyle: 'circle',
										pointRadius: 6,
										pointHoverRadius: 6,
										borderWidth: 1,
										//backgroundColor: 'rgba(51, 107, 165, 0.4)',
										borderColor: '#349bde',
										// hoverBackgroundColor: "darkorange",
 
										// --> !!!!!!      DATAS for y axis   !!!!!!!!
										data: datas
 
								}]
						},
 
						// Configuration options go here
						options: {
 
								responsive: true,
								// title
								title: {
										display: true,
										fontSize: 16,
										fontFamily: "Open Sans, Verdana, Arial",
										padding: 16,
										text: title
								},
								// info bulles settings
								tooltips: {
 
										// mode: 'label',
										backgroundColor: 'rgba(60, 60, 60, 0.5)',
										bodyFontColor: '#fff',
										bodyFontSize: 14,
										bodyFontStyle: 'normal',
										bodyFontFamily: "Open Sans, sans-serif",
										yPadding: 8,
										xPadding: 12,
										yAlign: "bottom",
										caretSize: 10,
										cornerRadius: 0,
										// ne pas voir la légende de couleur dans le tooltip
										displayColors: false,
 
										callbacks: {
 
												title: function() {},
 
												label: function(tooltipItem, data) {
 
													return "Le "+data['labels'][tooltipItem['index']]+"  "+data['datasets'][0]['data'][tooltipItem['index']]+" visites";
												}
 
										}
 
								},
								// hover: {
						    //   mode: 'nearest',
						    //   intersect: true
						    // },
								// orientation texte axe X
								scales: {
											xAxes: [{
												ticks: {
													autoSkip: false,
													maxRotation: 90,
													minRotation: 0
												},
												gridLines: {
													display: true // grid lines to x axis
												}
 
 
 
											}],
											// end  X axes
 
											yAxes: [{
													display: true,
													ticks: {
															 // minimum value will be 0.
															beginAtZero: true,
															//stepSize : 1,
															padding: 5, 
 
													}
											}]
								}
								// end scales
						}
				});
				// END CHART
 
	},
	/*
	 * END function render_chart().
	 */

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// tu peux rendre ces données dynamiques
// CHART.js ________________________________________________________
var char_type = 'line';
var render_date = [array de tes dates];
var render_visits = [array de tes données numériques];
var title_chart = 'Le super titre du graph.'; 
 
				// lanch function render chart
				render_chart( char_type,
				                               render_date,
				                               render_visits,
			                                       title_chart);

**Zebulon777** · 05/09/2018, 08h12

Salut et merci, c'est sympa et intéressant.

Mais comme je te l'ai dit, la librairie Echarts m'est imposée et je ne peux pas en déroger.

J'ai pas mal avancé sur mes graph, mais j'ai toujours mon problème de décalage ; pour le moment, j'ai juste changé ma philo pour ne plus afficher les tirets, ainsi ça se voit moins.
Mais, j'ai bien conscience que c'est une "rustine" dans l'attente de trouver mieux

**oooopppp** · 06/09/2018, 00h13

Salut, coller des rustines, j'ai tout le temps l'impression de le faire aussi,
tout le problème des frameworks de chart, un tas de fonctionnalités et au
final tu galères pour en sortir un truc simple,
au fait c'est quoi le projet sur lequel tu bosses ?

**Zebulon777** · 06/09/2018, 07h55

Une présentation de différents stat sur notre intranet et toi ?

**oooopppp** · 09/09/2018, 23h44

Salut, j'avais pas vu ta réponse,
houlà avec intranet, ils ont pas de quoi se payer une licence highcharts ?

C'est dommage ils sont super bien leur graphs et assez facile à mettre en place,
ce que j'ai fait pour mon framework de boutique en ligne puis je me suis aperçu qu'ils n'étaient pas sous licence libre ...
Bref, je les ai contactés pour leur demander d'exploiter leur appli. de base gratuitement car moi-même en
open source et ils m'ont envoyé ch...
Donc, me voilà sur chart js pour offrir un petit service de stats pas trop vilain sur Placido Shop (c'est mon projet)

Une capture du back-office :

Nom : Capture STATS.JPG
Affichages : 1522
Taille : 92,2 Ko

Nom : Capture STATS.JPG
Affichages : 1522
Taille : 92,2 Ko

**Zebulon777** · 10/09/2018, 08h02

Sympa aussi et non, la politique interne est l'open source dés que c'est possible

**NoSmoking** · 10/09/2018, 11h21

Bonjour,
ton soucis vient de ces lignes

Code :

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

1
2
3
4
5
6
axisLabel: {
    show: true,
    formatter: function (params) {
      return MoisMouv_X[params]
    },
    interval: 30, // c'est cette instruction qui coince

Je m'explique (je tente plutôt) :
La position des 1^er du mois sont, pour une année non bissextile,

Code :

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

// posJours    = 1, 32, 60, 91, 121, 152, 182, 213, 244, 274, 305, 335

soit avec un index démarrant à 0

Code :

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

// posJours    = 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334

En plaçant les repères avec comme interval: 30, cela signifie qu'il y a 30 axisTick entre 2 repères donc, ceux ci seront placés aux index

Code :

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

// interval 30 = 0, 31, 62, 93, 124, 155, 186, 217, 248, 279, 310, 341

on voit tout de suite qu'il y a un décalage qui s’opère, c'est plus fragrant en écrivant les 2 lignes l'une sous l'autre

Code :

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

1
2
// posJours    = 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334
// interval 30 = 0, 31, 62, 93, 124, 155, 186, 217, 248, 279, 310, 341

donc compte tenu de ta façon de procéder l'écart est tout à fait normal.
Fait un essai avec un interval: 29 pour voir le nouveau décalage

Code :

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

1
2
// posJours    = 0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334
// interval 29 = 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 360

Une solution à ton problème est de passer par le positionnement de tes xAxis.axisTick et de tes xAxis.axisLabel en utilisant non pas un interval: 30 mais un interval : function (index, valeur) {...} qui va te permettre d'ajuster au mieux la position de tes repères et de tes labels.

Les explications plus détaillées étant un peu longues à décrire je te joins un fichier exemple de cette mise en application

Code html :

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
<!DOCTYPE HTML>
<html lang="FR">
<head>
<meta charset="UTF-8">
<title>Exemple ECharts</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1889223">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js"></script>
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
main, #main {
  display: block;
  margin: 0 auto;
  max-width: 60em;
}
h1, h2, h3 {
  color: #069;
  margin: .25em 0;
}
section, .section {
  margin: 0 2em 1em;
  position: relative;
}
#graphe {
  width: 800px;
  height: 400px;
  margin: auto;
}
</style>
</head>
<body>
<header class="bandeau">
</header>
<main>
<header>  <h1>[ECharts] Graph-line</h1></header>
  <section>
    <h2>Graphique</h2>
    <div id="graphe"></div>
  </section>
  <section>
    <h2>Ressources</h2>
    <ul>
      <li><a target="new-page" href="https://www.developpez.net/forums/d1889223/javascript/general-javascript/echarts-4-axe-x-libelle/">Discussion sur DVP -> [Echarts 4] Axe des X et libellé</a>
      <li><a target="new-page" href="https://ecomfe.github.io/echarts-doc/public/en/option.html" >ECharts documentation</a>
      <li><a target="new-page" href="https://ecomfe.github.io/echarts-examples/public/index.html">ECharts exemples</a>
    </ul>
  </section>
</main>
<script>
"use strict";
/**
 * Création des données
 */
var joursMois = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var nomMois = "Jan.,Fév.,Mars,Avril,Mai,Juin,Juil.,Août,Sept.,Oct.,Nov.,Déc.".split(",");
var sepDate = " ";  // séparateur jour mois
var dateJours = []; // données axe des X
var dataMark = [];  // quadrillage vertical
var mois;
var nbrMois = joursMois.length;
var jour;
var nbrJours;
var valTmp;
for (mois = 0; mois < nbrMois; mois += 1) {
  nbrJours = joursMois[mois];
  // sauve données pour quadrillage vertical
  dataMark.push({
      xAxis: "01" +sepDate +nomMois[mois]
    });
  for (jour = 1; jour < nbrJours + 1; jour += 1) {
    valTmp = (jour < 10 ? "0" + jour : jour) + sepDate + nomMois[mois];
    dateJours.push(valTmp);
  }
}
// supprime 1st pas utile
dataMark.shift();
 
var data2018 = [];
var data2017 = [];
var data2016 = [];
for (jour = 0; jour < 365; jour += 1) {
  data2016.push(Math.round((Math.random()) * 150) + 150);
  data2017.push(Math.round((Math.random()) * 150) + 200);
  data2018.push(Math.round((Math.random()) * 150) + 250);
}
 
/**
 * Options du graphique
 */
// options quadrillage vertical
var oMarkLine = {
  silent: true,
  symbol: "none",
  label: {
    show: false
  },
  lineStyle: {
    color: "#CCC",
    type: "dotted",
    width: 1
  },
  animation: false,
  data: dataMark
};
// options graphique
var option = {
  title: {
    text: "Titre graphique"
  },
  color: ["#9AF", "#F9A", "#AF9"],
        textStyle: {
                fontFamily: "Verdana"
        },
  legend: {
    data: ["2018", "2017", "2016"]
  },
  // traitement Axe des X
  xAxis: {
    type: "category",
    name: "xAxis",
    nameLocation: "center",
    nameTextStyle: {
      padding: 10,
      color: "#069",
      fontWeight: "bold"
    },
    max: "dataMax",
    position: "bottom",
    boundaryGap: false,  // ! important de mettre à false
 
    // 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
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;
        if (1 === jour) {
          return true;
        }
      }
    },
 
    // Affichage du label
    axisLabel: {
      align: "center",
      /**
       * 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
       */
      interval: function (index, valeur) {
        // récup du jour
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15;
        if (15 === jour) {
          return true;
        }
      },
      formatter: function (valeur, index) {
        // récup du mois pour affichage
        return valeur ? valeur.split(sepDate)[1] : "";
      }
    },
 
    data: dateJours
  },
  // traitement Axe des Y
  yAxis: {
                name: "yAxis",
    nameTextStyle: {
      color: "#069",
      fontWeight: "bold"
    },
    splitLine: {
      lineStyle:{
        width: 1,
        type: "dotted"
      }
    },
    max: 500
  },
 
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      type: "line",
      label: {
      },
      lineStyle: {
        color: "#F00",
        width: 1
      }
    }
  },
 
  series: [{
      type: "line",
      name: "2016",
      symbol: "none",
      lineStyle: {
        width: 1
      },
      markLine: oMarkLine,
      data: data2016
    },
    {
      type: "line",
      name: "2017",
      symbol: "none",
      lineStyle: {
        width: 1
      },
      markLine: oMarkLine,
      data: data2017
    },
    {
      type: "line",
      name: "2018",
      symbol: "none",
      lineStyle: {
        width: 1
      },
      markLine: oMarkLine,
      data: data2018
    }
 
  ]
};
/**
 * Création du graphique
 */
var oEchart = echarts.init(document.getElementById("graphe"));
oEchart.setOption(option);
</script>
</body>
</html>

n'hésite pas si il y a des points qui te semblent obscurs.

Nota: je n'ai pas regardé plus avant toutes les options possibles pour l'axe des X mais une autre solution consisterait peut être à passer par un format date sur cette axe.

**Zebulon777** · 10/09/2018, 13h14

Merci de t'être penché sur mon souci.

En fait, nous avions essayé en forçant intervalle à 29, mais dans ce cas, on voyait apparaitre 2 fois le mois de mai !
Par contre, je n'ai pas creusé plus en avant en passant par une fonction.

Voici le nouveau code, car pas mal de petites choses ont changé, comme par exemple, l'utilisation d'un Datazoom.
Le fait d'utiliser un Datazoom, nous permet d'avoir une graphique plus aéré et, donc, de s’affranchir (plus ou moins) de ce problème de décalage.

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
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
 
...
...
...
/*----------------------------------------------------------------------------------------------*/		
/* 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 = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	i = 0;
	WNumJour = 1;
	WMax = 0;
	WMin = parseInt(jsonData_N2[0][4]);
	while (i < jsonData_N2.length){
		var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
		WMax = MinMax(WNbMouv_N2, WMax, "MAX");
		WMin = MinMax(WNbMouv_N2, WMin, "MIN");
		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 + " (Jour N° " + WNumJour + ")";
		Jours_X.push(WNumJour);
		NbMouvN2_Y.push(WNbMouv_N2);
		DateMouv.push(WDateMouv);
		MoisMouv_X.push(WMois);
		WNumJour = WNumJour + 1;
		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_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]);
		WMax = MinMax(WNbMouv_N1, WMax, "MAX");
		WMin = MinMax(WNbMouv_N1, WMin, "MIN");
//			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]);
		WMax = MinMax(WNbMouv_N, WMax, "MAX");
		WMin = MinMax(WNbMouv_N, WMin, "MIN");
//			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"
	}
 
// Récupération du dernier jour de l'année N traité pour placer le DataZoom
	WDerNumJour = i / 2;
	WDebZoom = ((WDerNumJour * 100) / 365) - 25;
	WFinZoom = ((WDerNumJour * 100) / 365) + 15;
	if (WDebZoom < 0)
		{
			WDebZoom = 0; // 0%
			WFinZoom = 33; // 33%
		}
 
	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() / 37);
	padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
	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
//				containlabel: false,
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 80,								// Distance between grid component and the bottom side of the container
			left: 110,								// 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: 'Mois',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 10,							// Espace entre le libellé et la ligne de l'axe X
				fontWeight: 'bold'
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: true,
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
			axisTick: {
				show: false,					 		// Whether to show the axis tick
				inside: false,
				alignWithLabel: false,
				length: 3
			},
			axisLabel: {
				show: true,
				formatter: function (params) {
					return MoisMouv_X[params];
				},
				interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
				rotate:0,
				margin: 10,
				showMaxLabel: true,
				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',
			min: WMin,
			max: WMax,
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 20,
				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)'
			}
		},
		dataZoom: [
			{   // This dataZoom component controls x-axis by dafault
				type: 'slider', // this dataZoom component is dataZoom component of slider
				showDetail: true,
				showDataShadow: 'auto',
				start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
				end: WFinZoom         // the right is located at 60% - DEFAUT = 33
//					startValue:230,
//					endValue:250
			}
		],
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return DateMouv[parseInt(params.value)]; // 
					}
				},
				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.'
						  }
				},
				dataview: {
					show: true,
					title: 'data view'
				},
				dataView: {
					readOnly: false,
					show: true,
					title: 'Données',
					lang: ['Données', 'Retour', ''],
					optionToContent: function(opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
console.log(opt.series);
console.log(series[2]);
console.log(series[1]);
console.log(series[0]);
						var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
									 + '<td>N° Jour:</td>'
									 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
									 + '</tr>';
						for (var i = 0, l = axisData.length; i < l; i++) {
							table += '<tr>'
									 + '<td>' + DateMouv[i] + '</td>'
									 + '<td>' + series[2].data[i] + '</td>'
									 + '<td>' + series[1].data[i] + '</td>'
									 + '<td>' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						table += '</tbody></table>';
						return table;
					}
				},
				restore: {
					show: true,
					title: 'Rechargement'
				},
				saveAsImage: {title:'Sauvegarde Image'}
			}
		},
		legend: {
			show: true,
			type : 'plain',
			orient: 'vertical',
			borderColor: '#000000',
			borderWidth: 2,
			borderRadius: 10,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			shadowBlur: 10,
//				bottom: 3,
			left: 3,
//				right: 3,
			top:15
		},
		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
			}
		],
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true
	};
 
	TJ_Chart_C1.setOption(TJ_ChartOpt);
 
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}
...
...
...

La seule chose qui devrait partir maintenant est l'affichage DATAVIEW qui semble buggé, car lorsqu'on clique sur le bouton "Rafraichir", on perd la dernière série qui passe à undefined tant qu'on a pas cliqué sur le bouton "Actualisé", mais ça c'est une autre histoire, que je soumettrai peut-être à la communauté?

Pour en revenir au problème de décalage, il n'est pas solutionné car je n'arrive pas à mettre au point une fonction qui fonctionnerait dans tout les cas.
En fait, il y a 2 choses : 1 - je n'avais pas vu qu'il était possible de mettre un intervalle dans pour les AxisTick (aie) et 2 - je n'arrive pas à adapter tes fonctions d'intervalle à mon code.
Je continue de creuser.

En tout cas, merci pour ton aide, ça fait plaisir de ne pas être tout seul

**NoSmoking** · 11/09/2018, 11h24

Pas sûr que tu ais pris le temps de regarder attentivement le code fourni

Pour en revenir au problème de décalage, il n'est pas solutionné car je n'arrive pas à mettre au point une fonction qui fonctionnerait dans tout les cas.

C'est pourtant assez trivial comme mise en application.

Pour les données de l'xAxis :

Celles-ci sont au format texte et crées dynamiquement afin d'obtenir un array comme ceci

Code :

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

var dateJour = ["01 Jan.", "02 Jan.", "03 Jan.", "04 Jan.", "05 Jan.", "06 Jan.", "07 Jan.", "08 Jan.", "09 Jan.", "10 Jan.", "11 Jan.", "12 Jan.", "13 Jan.", "14 Jan.", "15 Jan.", "16 Jan.", "17 Jan.", "18 Jan.", "19 Jan.", "20 Jan.", "21 Jan.", "22 Jan.", "23 Jan.", "24 Jan.", "25 Jan.", "26 Jan.", "27 Jan.", "28 Jan.", "29 Jan.", "30 Jan.", "31 Jan.", "01 Fév.", "02 Fév.", "...

Pour les repères axisTick :

Dans la fonction affectée à la propriété interval, on récupère la valeur pour traitement via un split(sepDate) où sepDate est une variable valant " ", "-", "/" ou autre suivant les besoins.
Si la valeur commence par "01" alors on trace le repère

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
    // 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
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;
        if (1 === jour) {
          return true;
        }
      }
    },

Pour les labels axisLabel :

Le principe est le même mais au lieu de vérifier si on est le 1^er on vérifie si on est le 15 ("15") et si oui on affiche le label centré à cette position

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
    // Affichage du label
    axisLabel: {
      align: "center",
      /**
       * 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
       */
      interval: function (index, valeur) {
        // récup du jour
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15;
        if (15 === jour) {
          return true;
        }
      },
      formatter: function (valeur, index) {
        // récup du mois pour affichage
        return valeur ? valeur.split(sepDate)[1] : "";
      }
    },

Nota 1 : L'appel à formatter est fait pour chaque interval qui retourne true.
Nota 2 : La propriété boundaryGap doit être mise à false pour que le centrage soit correct.

Voici le nouveau code, car pas mal de petites choses ont changé, comme par exemple, l'utilisation d'un Datazoom.
Le fait d'utiliser un Datazoom, nous permet d'avoir une graphique plus aéré et, donc, de s’affranchir (plus ou moins) de ce problème de décalage.

Il m'a suffit de rajouter ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
  dataZoom: [{
      type: "slider",
      realtime: false,
      rangeMode: "value",      
      startValue: dateJours[59],  // "01 Mars",
      endValue: dateJours[211],   // "31 Juil.",
      filterMode: "empty"
    },
    {
      type: "inside",
      filterMode: 'empty'
    }    
  ],

pour que cela soit immédiatement opérationnel.

Le fichier exemple en ligne : https://nosmoking.developpez.com/dem.../d1889223.html

Il y a surement des adaptations à faire pour que cela colle parfaitement à ce que tu souhaites réaliser mais le principe est là, à toi de jouer.

**oooopppp** · 12/09/2018, 03h17

Salut, c'est bien vu NoSmoking !
-> suivre son exemple avec attention.

P.s : chart.js, pour leur faire un peut de pub, c'est aussi de l'open-source.

**Zebulon777** · 12/09/2018, 07h39

J'avais mal lu, trop rapidement, mais ce n'est pas une excuse

Bon, en lisant, ça m'a l'air plus que bien, maintenant, il faut que je mettre tout ça en place.

Comme d'habitude, une bonne aide de la part du Non Fumeur

Par contre, je ne comprends pas pourquoi tu ajoutes un Datazoom de type "Inside" ?

Je ne suis pas sur ce projet pendant quelques jours, mais dés que je peux, je mets ça en place et je reviens vers vous.

**NoSmoking** · 13/09/2018, 10h29

Par contre, je ne comprends pas pourquoi tu ajoutes un Datazoom de type "Inside" ?

Il s'agit juste d'autoriser le glisse/déplacer en cliquant directement sur le graphique, ou le zoom/dezoom avec la molette, ce qui peut s'avérer pratique (ou pas d'ailleurs).

• All you need is on this page : dataZoom[i]-inside

**Zebulon777** · 13/09/2018, 10h43

Merci.
Ha bah oui, je n'avais pas creusé car cette fonctionnalité ne nous intéresse pas.

**Zebulon777** · 14/09/2018, 10h21

Bon, ben pas glop.

J'ai pas dû tout comprendre.
Ce que j'ai fait ne fonctionne pas alors que ce que tu montres en exemple est exactement ce que je voudrai avoir.

Si ça peut aider, voici ce que contiennent les tableaux :

(A noter que c'est bien Jours_X qui est utilisé pour les données de xAxis)

Code :

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

1
2
3
4
5
6
7
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,*…]

DateMouv[] : 
 (366)*["01 Janvier (Jour N° 1)", "02 Janvier (Jour N° 2)", "03 Janvier (Jour N° 3)", "04 Janvier (Jour N° 4)", "05 Janvier (Jour N° 5)", "06 Janvier (Jour N° 6)", "07 Janvier (Jour N° 7)", "08 Janvier (Jour N° 8)", "09 Janvier (Jour N° 9)", "10 Janvier (Jour N° 10)", "11 Janvier (Jour N° 11)", "12 Janvier (Jour N° 12)", "13 Janvier (Jour N° 13)", "14 Janvier (Jour N° 14)", "15 Janvier (Jour N° 15)", "16 Janvier (Jour N° 16)", "17 Janvier (Jour N° 17)", "18 Janvier (Jour N° 18)", "19 Janvier (Jour N° 19)", "20 Janvier (Jour N° 20)", "21 Janvier (Jour N° 21)", "22 Janvier (Jour N° 22)", "23 Janvier (Jour N° 23)", "24 Janvier (Jour N° 24)", "25 Janvier (Jour N° 25)", "26 Janvier (Jour N° 26)", "27 Janvier (Jour N° 27)", "28 Janvier (Jour N° 28)", "29 Janvier (Jour N° 29)", "30 Janvier (Jour N° 30)", "31 Janvier (Jour N° 31)", "01 Février (Jour N° 32)", "02 Février (Jour N° 33)", "03 Février (Jour N° 34)", "04 Février (Jour N° 35)", "05 Février (Jour N° 36)", "06 Février (Jour N° 37)", "07 Février (Jour N° 38)", "08 Février (Jour N° 39)", "09 Février (Jour N° 40)", "10 Février (Jour N° 41)", "11 Février (Jour N° 42)", "12 Février (Jour N° 43)", "13 Février (Jour N° 44)", "14 Février (Jour N° 45)", "15 Février (Jour N° 46)", "16 Février (Jour N° 47)", "17 Février (Jour N° 48)", "18 Février (Jour N° 49)", "19 Février (Jour N° 50)", "20 Février (Jour N° 51)", "21 Février (Jour N° 52)", "22 Février (Jour N° 53)", "23 Février (Jour N° 54)", "24 Février (Jour N° 55)", "25 Février (Jour N° 56)", "26 Février (Jour N° 57)", "27 Février (Jour N° 58)", "28 Février (Jour N° 59)", "29 Février (Jour N° 60)", "01 Mars (Jour N° 61)", "02 Mars (Jour N° 62)", "03 Mars (Jour N° 63)", "04 Mars (Jour N° 64)", "05 Mars (Jour N° 65)", "06 Mars (Jour N° 66)", "07 Mars (Jour N° 67)", "08 Mars (Jour N° 68)", "09 Mars (Jour N° 69)", "10 Mars (Jour N° 70)", "11 Mars (Jour N° 71)", "12 Mars (Jour N° 72)", "13 Mars (Jour N° 73)", "14 Mars (Jour N° 74)", "15 Mars (Jour N° 75)", "16 Mars (Jour N° 76)", "17 Mars (Jour N° 77)", "18 Mars (Jour N° 78)", "19 Mars (Jour N° 79)", "20 Mars (Jour N° 80)", "21 Mars (Jour N° 81)", "22 Mars (Jour N° 82)", "23 Mars (Jour N° 83)", "24 Mars (Jour N° 84)", "25 Mars (Jour N° 85)", "26 Mars (Jour N° 86)", "27 Mars (Jour N° 87)", "28 Mars (Jour N° 88)", "29 Mars (Jour N° 89)", "30 Mars (Jour N° 90)", "31 Mars (Jour N° 91)", "01 Avril (Jour N° 92)", "02 Avril (Jour N° 93)", "03 Avril (Jour N° 94)", "04 Avril (Jour N° 95)", "05 Avril (Jour N° 96)", "06 Avril (Jour N° 97)", "07 Avril (Jour N° 98)", "08 Avril (Jour N° 99)", "09 Avril (Jour N° 100)",*…][0 … 99][100 … 199][200 … 299][300 … 365]length: 366__proto__: Array(0)

MoisMouv[] : *["Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Janvier", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Février", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Mars", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril", "Avril",*…]

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
 
...
...
...
// 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%
	}
 
var TJ_Colors = ["#FE0000"];
var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
var sepDate = "-"; // Séparateur utilisé dans les dates lues dans la BDD.
 
val = ($("#lfpo_tj").width() / 37);
padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
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
//				containlabel: false,
		top: 50,								// Distance between grid component and the top side of the container
		bottom: 80,								// Distance between grid component and the bottom side of the container
		left: 110,								// 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: 'Mois',
		nameLocation: 'center',
		nameTextStyle: {
			padding: 10,							// Espace entre le libellé et la ligne de l'axe X
			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,
			alignWithLabel: false,
			length: 3,
////					interval: 30
/**
* 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
var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;
if (1 === jour) {
  return true;
}
}
		},
		axisLabel: {
			show: true,
			rotate:0,
			margin: 10,
			showMaxLabel: true,
			showMinLabel: true,
//					align : 'left',
			padding: padding_array, 			// [haut, droit, bas, gauche]
			color: 'rgb(050,050,050)',
////					interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
////					formatter: function (params) {
////						return MoisMouv_X[params];
////					}
align: "center",
/**
* 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
*/
interval: function (index, valeur) {
// récup du jour
var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15;
if (15 === jour) {
  return true;
}
},
formatter: function (valeur, index) {
// récup du mois pour affichage
return valeur ? valeur.split(sepDate)[1] : "";
}
 
		},
		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',
		min: WMin,
		max: WMax,
		name: 'Mouvements',
		nameLocation: 'center',
		nameRotate: 90,
		nameTextStyle: {
			padding: 20,
			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)'
		}
	},
////			dataZoom: [
////				{   // This dataZoom component controls x-axis by dafault
////					type: 'slider', // this dataZoom component is dataZoom component of slider
////					showDetail: true,
////					showDataShadow: 'auto',
////					start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
////					end: WFinZoom         // the right is located at 60% - DEFAUT = 33
//////					startValue:230,
//////					endValue:250
////				}
////			],
dataZoom: [{
type: "slider",
realtime: false,
rangeMode: "value",      
startValue: WDebZoom,  // "01 Mars",
endValue: WFinZoom,   // "31 Juil.",
filterMode: "empty"
},
{
type: "inside",
filterMode: 'empty'
}    
],
	tooltip: {
		show: true,
		trigger: 'axis', 						// Triggered by axes.
		axisPointer: {
			type: 'line',
			label : {
				formatter: function (params) {
				return DateMouv[parseInt(params.value)]; // 
				}
			},
			lineStyle: {
				width: 1 						// Epaisseur de la ligne verticale
			}
		}
	},
	toolbox: {									// Cartouche en haut à droite
		show: true,
		padding: [5, 10, 0, 0],	// [haut, droit, bas, gauche]
		feature: {
			restore: {
				show: true,
				title: 'Rechargement'
			},
			magicType: {
				type: ['line', 'bar'],
				title: {
						line: 'Ligne',
						bar: 'Histo.'
					  }
			},
			dataview: {
				show: true,
				title: 'data view'
			},
			dataView: {
				show: false, // Affiche ou non l'icône pour afficher les données utilisées.
				readOnly: false,
				title: 'Données',
				lang: ['Données', 'Retour', 'Rafraîchir'], // Bug sur le bouton rafraichir qui supprime la dernière série !
				optionToContent: function(opt) {
					var axisData = opt.xAxis[0].data;
					var series = opt.series;
					var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
								 + '<td>N° Jour:</td>'
								 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
								 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
								 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
								 + '</tr>';
					for (var i = 0, l = axisData.length; i < l; i++) {
						table += '<tr>'
								 + '<td>' + DateMouv[i] + '</td>'
								 + '<td>' + series[2].data[i] + '</td>'
								 + '<td>' + series[1].data[i] + '</td>'
								 + '<td>' + series[0].data[i] + '</td>'
								 + '</tr>';
					}
					table += '</tbody></table>';
					return table;
				}
			},
			saveAsImage: {title:'Sauvegarde Image'}
		}
	},
	legend: {
		show: true,
		type : 'plain',
		orient: 'vertical',
		borderColor: '#000000',
		borderWidth: 2,
		borderRadius: 10,
		shadowColor: 'rgba(0, 0, 0, 0.5)',
		shadowBlur: 10,
//				bottom: 3,
		left: 3,
//				right: 3,
		top:15
	},
	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
		}
	],
	textStyle: {
		fontFamily: 'sans-serif'
	},
	animation: true
};
 
TJ_Chart_C1.setOption(TJ_ChartOpt);
 
var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}
...
...
...

Question en rab :
Oups, j'ai trouvé

~~Je ne connais pas cette syntaxe "var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;" et je n'arrive pas à trouver sur le net ?~~

**Zebulon777** · 14/09/2018, 15h27

Bon, j'ai pas mal avancé, grâce à NoSmoking... Un grand merci à toi. Ca, c'est de l'entraide géniale

J'ai les tirets au bons endroits.
Les mois s'affichent correctement.

Mais :
- Pas de quadrillage verticale et je ne trouve pas pourquoi ?
- Pas de Datazoom, car quand je l'active, tout est faussé et lorsque je le déplace, ce sont toujours les même mois que l'on vois affichés !

J'ai du oublier quelque chose, mais je ne vois pas.

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
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
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WJourN2 = 0,
		WJourN1 = 0,
		WJourN = 0,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		QuadVert = [],
		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]);
			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]);
			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]);
			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;
	}
	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); 														////////////////////////////
		}
		if (SerieChoisie == "N1")
		{
			var WJour = jsonData_N1[i][3].slice(8,10);														////////////////////////////
			var WMois = jsonData_N1[i][3].slice(5,7); 														////////////////////////////
		}
		if (SerieChoisie == "N2")
		{
			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 + " (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%
		}
 
	var TJ_Colors = ["#FE0000"];
	var TJ_TAB_Colors = ['#FF0000', '#00FF00', '#0000FF'];
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
	var sepDate = " "; // Séparateur utilisé dans les dates lues dans la BDD.
 
	val = ($("#lfpo_tj").width() / 37);
	padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
 
// options quadrillage vertical
	var joursMois = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	var nbrMois = joursMois.length;
	for (mois = 0; mois < nbrMois; mois += 1) {
	  // sauve données pour quadrillage vertical
	  QuadVert.push({
		  xAxis: "01" + sepDate + MoisEnLettres(mois)
		});
	}
	// supprime 1st pas utile (Pas de graduation pour le tout premier)
	QuadVert.shift();
 
	console.log(QuadVert);
 
	var oMarkLine = {
		silent: true,
		symbol: "none",
		label: {
			show: false
		},
		lineStyle: {
			color: "#CCC",
			type: "dotted",
			width: 1
		},
		animation: true,
		data: QuadVert
	};		
 
	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
//				containlabel: false,
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 80,								// Distance between grid component and the bottom side of the container
			left: 110,								// 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: 'Mois',
			nameLocation: 'center',
			nameTextStyle: {
				padding: 10,							// Espace entre le libellé et la ligne de l'axe X
				fontWeight: 'bold'
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: false, // IMPORTANT ! A Mettre à FALSE pour éviter le décalage
			axisLine: {
				lineStyle: {
					color: 'rgb(105,105,105)',
					width: 2,
					onZero: true,
				}
			},
//				axisTick: {
//					show: true,					 		// Whether to show the axis tick
//					inside: false,
//					alignWithLabel: false,
//					length: 3,
//					interval: 30
//				},
// 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];
	var jour = valeur ? valeur.split(sepDate)[0] * 1 : 1;
	if (1 === jour) {
	  return true;
	}
  }
},
//				axisLabel: {
//					show: true,
//					rotate:0,
//					margin: 10,
//					showMaxLabel: true,
//					showMinLabel: true,
//					padding: padding_array, 			// [haut, droit, bas, gauche]
//					color: 'rgb(050,050,050)',
//					interval: 30, 						// Définit le nombre d'intervals sur xAxis => 59 car 60 val. par heure
//					formatter: function (params) {
//						return MoisMouv_X[params];
//					}
//				},
	// Affichage du label
	    // Affichage du label
    axisLabel: {
      align: "center",
      /**
       * 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
       */
      interval: function (index, valeur) {
        // récup du jour
		  valeur = DateMouv[index];
        var jour = valeur ? valeur.split(sepDate)[0] * 1 : 15;
        if (15 === jour) {
          return true;
        }
      },
      formatter: function (valeur, index) {
        // récup du mois pour affichage
		  valeur = DateMouv[index];
        return valeur ? valeur.split(sepDate)[1] : "";
      }
    },
			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',
			min: WMin,
			max: WMax,
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: 20,
				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)'
			},
			splitLine: {
				lineStyle:{
					width: 1,
					type: "dotted"
				}
			}
		},
////			dataZoom: [
////				{   // This dataZoom component controls x-axis by dafault
////					type: 'slider', // this dataZoom component is dataZoom component of slider
////					showDetail: true,
////					showDataShadow: 'auto',
////					start: WDebZoom,      // the left is located at 10% - DEFAUT = 0
////					end: WFinZoom         // the right is located at 60% - DEFAUT = 33
////				}
////			],
 
	  dataZoom: [{
      type: "slider",
		showDetail: true,
		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
//      startValue: WDebZoom,  
 //     endValue: WFinZoom,   
      filterMode: "empty"
    },
    {
      type: "inside",
      filterMode: 'empty'
    }    
  ],
 
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return DateMouv[parseInt(params.value)]; // 
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			padding: [5, 10, 0, 0],	// [haut, droit, bas, gauche]
			feature: {
				restore: {
					show: true,
					title: 'Rechargement'
				},
				magicType: {
					type: ['line', 'bar'],
					title: {
							line: 'Ligne',
							bar: 'Histo.'
						  }
				},
				dataview: {
					show: true,
					title: 'data view'
				},
				dataView: {
					show: false, // Affiche ou non l'icône pour afficher les données utilisées.
					readOnly: false,
					title: 'Données',
					lang: ['Données', 'Retour', 'Rafraîchir'], // Bug sur le bouton rafraichir qui supprime la dernière série !
					optionToContent: function(opt) {
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var table = '<table style="width:70%;text-align:center;background-color:#fcf3cf "><tbody><tr>'
									 + '<td>N° Jour:</td>'
									 + '<td>' + "Nb. Mvts. " + series[2].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[1].name + '</td>'
									 + '<td>' + "Nb. Mvts. " + series[0].name + '</td>'
									 + '</tr>';
						for (var i = 0, l = axisData.length; i < l; i++) {
							table += '<tr>'
									 + '<td>' + DateMouv[i] + '</td>'
									 + '<td>' + series[2].data[i] + '</td>'
									 + '<td>' + series[1].data[i] + '</td>'
									 + '<td>' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						table += '</tbody></table>';
						return table;
					}
				},
				saveAsImage: {title:'Sauvegarde Image'}
			}
		},
		legend: {
			show: true,
			type : 'plain',
			orient: 'vertical',
			borderColor: '#000000',
			borderWidth: 2,
			borderRadius: 10,
			shadowColor: 'rgba(0, 0, 0, 0.5)',
			shadowBlur: 10,
//				bottom: 3,
			left: 3,
//				right: 3,
			top:15
		},
		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
				markLine: oMarkLine,
				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
				markLine: oMarkLine,
				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
				markLine: oMarkLine,
				data: NbMouvN2_Y
			}
		],
		textStyle: {
			fontFamily: 'sans-serif'
		},
		animation: true
	};
 
	TJ_Chart_C1.setOption(TJ_ChartOpt);
 
	var TJ_Chart_C1 = echarts.init(document.getElementById("lfpo_tj"));  //
 
}

Bref, NoSmoking, si tu as 5 minutes pour te pencher sur mes 2 derniers soucis ?

Axe des X et libellé [ECharts]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager