Discussion :

[Zebulon777]

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]

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 !

[Zebulon777]

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.


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]

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]

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]

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);