IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Axe des X et libellé [ECharts]


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut Axe des X et libellé
    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,*…][099][100199][200299][300365]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.

  2. #2
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    111
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 111
    Par défaut
    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

  3. #3
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    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é ?

  4. #4
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    111
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 111
    Par défaut
    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.

  5. #5
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    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...

  6. #6
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    111
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 111
    Par défaut
    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);

  7. #7
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    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

  8. #8
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    111
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 111
    Par défaut
    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 ?

  9. #9
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    Une présentation de différents stat sur notre intranet et toi ?

  10. #10
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    111
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 111
    Par défaut
    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

  11. #11
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    Sympa aussi et non, la politique interne est l'open source dés que c'est possible

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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 1er 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.

  13. #13
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    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

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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)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 1er 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.

  15. #15
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2014
    Messages
    111
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2014
    Messages : 111
    Par défaut
    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.

  16. #16
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    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.

  17. #17
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    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

  18. #18
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    Merci.
    Ha bah oui, je n'avais pas creusé car cette fonctionnalité ne nous intéresse pas.

  19. #19
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    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 ?

  20. #20
    Membre éprouvé Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 327
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 327
    Par défaut
    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 ?

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. Plusieurs libellés sur l'axe des abscisses
    Par ileana24 dans le forum R
    Réponses: 6
    Dernier message: 17/06/2014, 11h09
  2. Orientation libelle axe des X fiji
    Par clubist dans le forum JSF
    Réponses: 0
    Dernier message: 09/10/2012, 12h31
  3. Modifier le Mini et le maxi de l'axe des ordonnées
    Par Jeannot45 dans le forum Access
    Réponses: 2
    Dernier message: 04/11/2005, 15h49
  4. Normes pour taille des champs (obs, libellé...)
    Par Kozher dans le forum Décisions SGBD
    Réponses: 2
    Dernier message: 13/08/2005, 23h46
  5. [TChart] [Gantt] Comment mettre l'axe des X en heures ?
    Par tipiweb dans le forum Composants VCL
    Réponses: 3
    Dernier message: 18/06/2005, 17h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo