Axe des X et libellé

**NoSmoking** · 15/09/2018, 11h28

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

Tu es gentil mais c'est le temps qu'il me faut pour copier ton code, ouvrir un éditeur et coller le code

Ceci étant

#1 « Pas de quadrillage verticale et je ne trouve pas pourquoi ? »
Le format de tes données dans series :

Code :

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

1
2
markLine: oMarkLine,
data: NbMouvN_Y

doit être le même

#2 « 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 ! »
Difficile de répondre sans connaître les valeurs que tu injectes, essaie simplement de laisser les valeurs par défaut pour commencer.

Nota : lorsque tu nous mets les valeurs de tes variables fait plutôt un console.log(JSON.stringify( tonObjet)) pour récupérer leur valeur, c'est plus lisible et directement exploitable par qui voudrait tester avec tes valeurs.

**Zebulon777** · 17/09/2018, 10h48

Envoyé par NoSmoking

Tu es gentil mais c'est le temps qu'il me faut pour copier ton code, ouvrir un éditeur et coller le code

Mais je connais ta sagacité

et je t'en remercie d'ailleurs, ainsi que pour ta patience

Envoyé par NoSmoking

Ceci étant

#1 « Pas de quadrillage verticale et je ne trouve pas pourquoi ? »
Le format de tes données dans series :

Code :

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

1
2
markLine: oMarkLine,
data: NbMouvN_Y

doit être le même

Je ne comprends pas, la séparation se fait à chaque changement de mois, c'est pour cela que j'ai mis la même chose que pour les tirets ???

Envoyé par NoSmoking

#2 « 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 ! »
Difficile de répondre sans connaître les valeurs que tu injectes, essaie simplement de laisser les valeurs par défaut pour commencer.

Voir plus bas les valeurs utilisées.

Envoyé par NoSmoking

Nota : lorsque tu nous mets les valeurs de tes variables fait plutôt un console.log(JSON.stringify( tonObjet)) pour récupérer leur valeur, c'est plus lisible et directement exploitable par qui voudrait tester avec tes valeurs.

C'est noté...

Donc :

Voici les données utilisées (J'espère, que je n'ai rien oublié) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
"nbmouvn_y=555,595,582,571,626,496,594,620,575,606,592,643,431,556,584,554,563,576,635,436,561,576,543,564,569,657,430,557,604,564,585,578,674,434,566,618,467,412,553,501,451,577,604,532,581,591,672,482,561,601,584,596,503,623,491,587,604,572,561,532,631,484,579,624,582,578,582,668,474,573,658,620,621,617,687,483,581,641,593,620,385,590,478,624,704,670,697,695,632,578,590,683,614,673,691,744,500,621,725,602,597,676,770,614,681,717,609,598,661,733,633,689,659,588,639,684,744,647,668,672,684,733,634,670,623,668,635,605,690,656,686,614,709,743,702,700,686,740,593,603,666,523,697,683,728,563,642,701,663,668,675,730,566,669,703,670,662,671,731,557,640,704,690,690,700,739,587,641,726,710,710,732,755,590,673,751,698,734,720,771,590,664,741,732,726,723,767,648,704,754,728,746,730,758,633,707,722,695,704,706,755,648,679,706,672,688,688,677,640,686,675,627,652,642,682,628,669,650,571,629,602,673,627,672,657,618,642,636,670,615,664,661,633,659,661,707,646,685,717,697"
 
"nbmouvn1_y=567,684,615,578,571,623,446,568,597,546,566,563,624,423,531,602,541,550,577,622,417,533,597,542,565,582,616,425,541,599,548,561,585,652,464,557,646,599,595,626,666,488,571,639,615,610,625,669,501,602,648,612,605,614,675,497,603,650,621,632,641,683,482,577,571,489,505,558,652,478,581,666,623,619,658,690,299,574,614,641,643,662,659,495,624,696,659,687,697,763,604,673,695,650,659,667,695,589,684,718,661,670,688,752,627,621,726,704,678,694,757,612,669,714,678,669,701,768,616,610,701,715,712,724,758,605,603,705,719,704,713,760,602,670,733,698,692,722,758,600,672,731,694,719,649,627,565,692,739,672,669,693,736,588,591,673,668,653,694,735,590,663,708,650,667,698,750,601,660,741,688,710,723,781,639,689,751,708,735,741,784,649,715,771,734,744,744,767,648,709,754,742,744,742,683,635,687,706,664,692,697,720,640,675,690,647,654,662,694,619,660,655,604,614,613,656,621,657,639,598,595,609,653,625,647,622,603,615,616,653,614,660,658,618,630,627,673,631,662,677,644,650,647,679,632,690,734,686,699,699,734,613,665,734,683,711,711,753,603,668,724,667,699,705,739,592,669,724,665,689,701,751,600,678,710,659,675,681,733,561,636,715,381,660,669,720,573,657,709,661,679,692,761,623,682,709,670,684,685,742,626,618,621,583,571,599,667,528,628,659,612,605,609,657,422,539,610,565,578,568,642,412,531,596,546,562,574,640,401,532,597,551,563,579,640,430,546,596,548,580,564,649,426,531,563,553,574,602,662,445,547,639,584,625,627,697,540,502,452,551,552,554,617,503,514"
 
"nbmouvn2_y=529,570,657,637,576,557,582,608,433,548,568,533,539,560,608,403,517,573,530,527,555,613,421,518,577,417,543,558,613,414,522,623,602,593,628,669,461,563,622,577,591,617,657,457,568,628,571,569,606,684,491,603,645,604,593,633,667,496,587,642,608,584,643,682,499,592,673,643,620,661,691,471,570,718,627,621,660,694,494,377,443,662,643,680,706,483,505,659,695,656,536,714,560,625,698,647,664,682,733,585,642,708,656,657,729,766,654,692,740,720,694,720,771,649,704,741,691,704,607,765,654,734,767,718,767,667,594,560,718,782,703,707,736,763,628,600,737,714,699,618,774,620,675,747,706,693,629,772,617,685,744,694,715,637,757,634,689,752,683,691,722,749,592,624,675,593,695,728,741,594,667,767,732,701,704,777,629,681,772,655,714,737,786,661,705,815,715,775,781,809,679,706,788,739,729,697,694,657,686,749,713,706,723,727,639,676,741,699,661,648,694,596,620,653,614,650,643,677,647,683,687,625,636,636,676,656,653,686,657,639,644,676,658,677,710,666,655,668,697,664,702,766,730,749,722,749,647,693,820,765,749,767,791,658,706,785,722,719,608,777,646,699,770,714,719,745,767,637,681,776,690,705,739,761,616,681,757,698,681,714,749,580,632,748,670,666,710,742,601,646,745,706,714,758,763,622,676,726,692,688,707,755,623,613,594,644,673,630,661,466,568,665,620,625,658,587,420,590,634,605,598,612,660,429,557,631,595,598,612,669,431,563,636,584,580,606,655,451,542,617,600,592,639,651,447,561,649,612,631,670,715,529,598,646,611,615,642,666,524,460,628,580,577,587,595,517"
 
"Jours_X=0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365"
 
"DateMouv=Jeudi 01 Janvier (Jour N° 1),Vendredi 02 Janvier (Jour N° 2),Samedi 03 Janvier (Jour N° 3),Dimanche 04 Janvier (Jour N° 4),Mardi 05 Janvier (Jour N° 5),Mercredi 06 Janvier (Jour N° 6),Jeudi 07 Janvier (Jour N° 7),Vendredi 08 Janvier (Jour N° 8),Dimanche 09 Janvier (Jour N° 9),Lundi 10 Janvier (Jour N° 10),Mardi 11 Janvier (Jour N° 11),Mercredi 12 Janvier (Jour N° 12),Vendredi 13 Janvier (Jour N° 13),Samedi 14 Janvier (Jour N° 14),Dimanche 15 Janvier (Jour N° 15),Lundi 16 Janvier (Jour N° 16),Mercredi 17 Janvier (Jour N° 17),Jeudi 18 Janvier (Jour N° 18),Vendredi 19 Janvier (Jour N° 19),Samedi 20 Janvier (Jour N° 20),Lundi 21 Janvier (Jour N° 21),Mardi 22 Janvier (Jour N° 22),Mercredi 23 Janvier (Jour N° 23),Jeudi 24 Janvier (Jour N° 24),Samedi 25 Janvier (Jour N° 25),Dimanche 26 Janvier (Jour N° 26),Lundi 27 Janvier (Jour N° 27),Mardi 28 Janvier (Jour N° 28),Jeudi 29 Janvier (Jour N° 29),Vendredi 30 Janvier (Jour N° 30),Samedi 31 Janvier (Jour N° 31),Jeudi 01 Février (Jour N° 32),Vendredi 02 Février (Jour N° 33),Samedi 03 Février (Jour N° 34),Lundi 04 Février (Jour N° 35),Mardi 05 Février (Jour N° 36),Mercredi 06 Février (Jour N° 37),Jeudi 07 Février (Jour N° 38),Samedi 08 Février (Jour N° 39),Dimanche 09 Février (Jour N° 40),Lundi 10 Février (Jour N° 41),Mardi 11 Février (Jour N° 42),Jeudi 12 Février (Jour N° 43),Vendredi 13 Février (Jour N° 44),Samedi 14 Février (Jour N° 45),Dimanche 15 Février (Jour N° 46),Mardi 16 Février (Jour N° 47),Mercredi 17 Février (Jour N° 48),Jeudi 18 Février (Jour N° 49),Vendredi 19 Février (Jour N° 50),Dimanche 20 Février (Jour N° 51),Lundi 21 Février (Jour N° 52),Mardi 22 Février (Jour N° 53),Mercredi 23 Février (Jour N° 54),Vendredi 24 Février (Jour N° 55),Samedi 25 Février (Jour N° 56),Dimanche 26 Février (Jour N° 57),Lundi 27 Février (Jour N° 58),Mercredi 28 Février (Jour N° 59),Jeudi 29 Février (Jour N° 60),Dimanche 01 Mars (Jour N° 61),Lundi 02 Mars (Jour N° 62),Mardi 03 Mars (Jour N° 63),Jeudi 04 Mars (Jour N° 64),Vendredi 05 Mars (Jour N° 65),Samedi 06 Mars (Jour N° 66),Dimanche 07 Mars (Jour N° 67),Mardi 08 Mars (Jour N° 68),Mercredi 09 Mars (Jour N° 69),Jeudi 10 Mars (Jour N° 70),Vendredi 11 Mars (Jour N° 71),Dimanche 12 Mars (Jour N° 72),Lundi 13 Mars (Jour N° 73),Mardi 14 Mars (Jour N° 74),Mercredi 15 Mars (Jour N° 75),Vendredi 16 Mars (Jour N° 76),Samedi 17 Mars (Jour N° 77),Dimanche 18 Mars (Jour N° 78),Lundi 19 Mars (Jour N° 79),Mercredi 20 Mars (Jour N° 80),Jeudi 21 Mars (Jour N° 81),Vendredi 22 Mars (Jour N° 82),Samedi 23 Mars (Jour N° 83),Lundi 24 Mars (Jour N° 84),Mardi 25 Mars (Jour N° 85),Mercredi 26 Mars (Jour N° 86),Jeudi 27 Mars (Jour N° 87),Samedi 28 Mars (Jour N° 88),Dimanche 29 Mars (Jour N° 89),Lundi 30 Mars (Jour N° 90),Mardi 31 Mars (Jour N° 91),Mardi 01 Avril (Jour N° 92),Mercredi 02 Avril (Jour N° 93),Jeudi 03 Avril (Jour N° 94),Samedi 04 Avril (Jour N° 95),Dimanche 05 Avril (Jour N° 96),Lundi 06 Avril (Jour N° 97),Mardi 07 Avril (Jour N° 98),Jeudi 08 Avril (Jour N° 99),Vendredi 09 Avril (Jour N° 100),Samedi 10 Avril (Jour N° 101),Dimanche 11 Avril (Jour N° 102),Mardi 12 Avril (Jour N° 103),Mercredi 13 Avril (Jour N° 104),Jeudi 14 Avril (Jour N° 105),Vendredi 15 Avril (Jour N° 106),Dimanche 16 Avril (Jour N° 107),Lundi 17 Avril (Jour N° 108),Mardi 18 Avril (Jour N° 109),Mercredi 19 Avril (Jour N° 110),Vendredi 20 Avril (Jour N° 111),Samedi 21 Avril (Jour N° 112),Dimanche 22 Avril (Jour N° 113),Lundi 23 Avril (Jour N° 114),Mercredi 24 Avril (Jour N° 115),Jeudi 25 Avril (Jour N° 116),Vendredi 26 Avril (Jour N° 117),Samedi 27 Avril (Jour N° 118),Lundi 28 Avril (Jour N° 119),Mardi 29 Avril (Jour N° 120),Mercredi 30 Avril (Jour N° 121),Vendredi 01 Mai (Jour N° 122),Samedi 02 Mai (Jour N° 123),Dimanche 03 Mai (Jour N° 124),Mardi 04 Mai (Jour N° 125),Mercredi 05 Mai (Jour N° 126),Jeudi 06 Mai (Jour N° 127),Vendredi 07 Mai (Jour N° 128),Dimanche 08 Mai (Jour N° 129),Lundi 09 Mai (Jour N° 130),Mardi 10 Mai (Jour N° 131),Mercredi 11 Mai (Jour N° 132),Vendredi 12 Mai (Jour N° 133),Samedi 13 Mai (Jour N° 134),Dimanche 14 Mai (Jour N° 135),Lundi 15 Mai (Jour N° 136),Mercredi 16 Mai (Jour N° 137),Jeudi 17 Mai (Jour N° 138),Vendredi 18 Mai (Jour N° 139),Samedi 19 Mai (Jour N° 140),Lundi 20 Mai (Jour N° 141),Mardi 21 Mai (Jour N° 142),Mercredi 22 Mai (Jour N° 143),Jeudi 23 Mai (Jour N° 144),Samedi 24 Mai (Jour N° 145),Dimanche 25 Mai (Jour N° 146),Lundi 26 Mai (Jour N° 147),Mardi 27 Mai (Jour N° 148),Jeudi 28 Mai (Jour N° 149),Vendredi 29 Mai (Jour N° 150),Samedi 30 Mai (Jour N° 151),Dimanche 31 Mai (Jour N° 152),Dimanche 01 Juin (Jour N° 153),Lundi 02 Juin (Jour N° 154),Mardi 03 Juin (Jour N° 155),Jeudi 04 Juin (Jour N° 156),Vendredi 05 Juin (Jour N° 157),Samedi 06 Juin (Jour N° 158),Dimanche 07 Juin (Jour N° 159),Mardi 08 Juin (Jour N° 160),Mercredi 09 Juin (Jour N° 161),Jeudi 10 Juin (Jour N° 162),Vendredi 11 Juin (Jour N° 163),Dimanche 12 Juin (Jour N° 164),Lundi 13 Juin (Jour N° 165),Mardi 14 Juin (Jour N° 166),Mercredi 15 Juin (Jour N° 167),Vendredi 16 Juin (Jour N° 168),Samedi 17 Juin (Jour N° 169),Dimanche 18 Juin (Jour N° 170),Lundi 19 Juin (Jour N° 171),Mercredi 20 Juin (Jour N° 172),Jeudi 21 Juin (Jour N° 173),Vendredi 22 Juin (Jour N° 174),Samedi 23 Juin (Jour N° 175),Lundi 24 Juin (Jour N° 176),Mardi 25 Juin (Jour N° 177),Mercredi 26 Juin (Jour N° 178),Jeudi 27 Juin (Jour N° 179),Samedi 28 Juin (Jour N° 180),Dimanche 29 Juin (Jour N° 181),Lundi 30 Juin (Jour N° 182),Mercredi 01 Juillet (Jour N° 183),Jeudi 02 Juillet (Jour N° 184),Vendredi 03 Juillet (Jour N° 185),Dimanche 04 Juillet (Jour N° 186),Lundi 05 Juillet (Jour N° 187),Mardi 06 Juillet (Jour N° 188),Mercredi 07 Juillet (Jour N° 189),Vendredi 08 Juillet (Jour N° 190),Samedi 09 Juillet (Jour N° 191),Dimanche 10 Juillet (Jour N° 192),Lundi 11 Juillet (Jour N° 193),Mercredi 12 Juillet (Jour N° 194),Jeudi 13 Juillet (Jour N° 195),Vendredi 14 Juillet (Jour N° 196),Samedi 15 Juillet (Jour N° 197),Lundi 16 Juillet (Jour N° 198),Mardi 17 Juillet (Jour N° 199),Mercredi 18 Juillet (Jour N° 200),Jeudi 19 Juillet (Jour N° 201),Samedi 20 Juillet (Jour N° 202),Dimanche 21 Juillet (Jour N° 203),Lundi 22 Juillet (Jour N° 204),Mardi 23 Juillet (Jour N° 205),Jeudi 24 Juillet (Jour N° 206),Vendredi 25 Juillet (Jour N° 207),Samedi 26 Juillet (Jour N° 208),Dimanche 27 Juillet (Jour N° 209),Mardi 28 Juillet (Jour N° 210),Mercredi 29 Juillet (Jour N° 211),Jeudi 30 Juillet (Jour N° 212),Vendredi 31 Juillet (Jour N° 213),Samedi 01 Août (Jour N° 214),Dimanche 02 Août (Jour N° 215),Lundi 03 Août (Jour N° 216),Mercredi 04 Août (Jour N° 217),Jeudi 05 Août (Jour N° 218),Vendredi 06 Août (Jour N° 219),Samedi 07 Août (Jour N° 220),Lundi 08 Août (Jour N° 221),Mardi 09 Août (Jour N° 222),Mercredi 10 Août (Jour N° 223),Jeudi 11 Août (Jour N° 224),Samedi 12 Août (Jour N° 225),Dimanche 13 Août (Jour N° 226),Lundi 14 Août (Jour N° 227),Mardi 15 Août (Jour N° 228),Jeudi 16 Août (Jour N° 229),Vendredi 17 Août (Jour N° 230),Samedi 18 Août (Jour N° 231),Dimanche 19 Août (Jour N° 232),Mardi 20 Août (Jour N° 233),Mercredi 21 Août (Jour N° 234),Jeudi 22 Août (Jour N° 235),Vendredi 23 Août (Jour N° 236),Dimanche 24 Août (Jour N° 237),Lundi 25 Août (Jour N° 238),Mardi 26 Août (Jour N° 239),Mercredi 27 Août (Jour N° 240),Vendredi 28 Août (Jour N° 241),Samedi 29 Août (Jour N° 242),Dimanche 30 Août (Jour N° 243),Lundi 31 Août (Jour N° 244),Lundi 01 Septembre (Jour N° 245),Mardi 02 Septembre (Jour N° 246),Mercredi 03 Septembre (Jour N° 247),Vendredi 04 Septembre (Jour N° 248),Samedi 05 Septembre (Jour N° 249),Dimanche 06 Septembre (Jour N° 250),Lundi 07 Septembre (Jour N° 251),Mercredi 08 Septembre (Jour N° 252),Jeudi 09 Septembre (Jour N° 253),Vendredi 10 Septembre (Jour N° 254),Samedi 11 Septembre (Jour N° 255),Lundi 12 Septembre (Jour N° 256),Mardi 13 Septembre (Jour N° 257),Mercredi 14 Septembre (Jour N° 258),Jeudi 15 Septembre (Jour N° 259),Samedi 16 Septembre (Jour N° 260),Dimanche 17 Septembre (Jour N° 261),Lundi 18 Septembre (Jour N° 262),Mardi 19 Septembre (Jour N° 263),Jeudi 20 Septembre (Jour N° 264),Vendredi 21 Septembre (Jour N° 265),Samedi 22 Septembre (Jour N° 266),Dimanche 23 Septembre (Jour N° 267),Mardi 24 Septembre (Jour N° 268),Mercredi 25 Septembre (Jour N° 269),Jeudi 26 Septembre (Jour N° 270),Vendredi 27 Septembre (Jour N° 271),Dimanche 28 Septembre (Jour N° 272),Lundi 29 Septembre (Jour N° 273),Mardi 30 Septembre (Jour N° 274),Jeudi 01 Octobre (Jour N° 275),Vendredi 02 Octobre (Jour N° 276),Samedi 03 Octobre (Jour N° 277),Lundi 04 Octobre (Jour N° 278),Mardi 05 Octobre (Jour N° 279),Mercredi 06 Octobre (Jour N° 280),Jeudi 07 Octobre (Jour N° 281),Samedi 08 Octobre (Jour N° 282),Dimanche 09 Octobre (Jour N° 283),Lundi 10 Octobre (Jour N° 284),Mardi 11 Octobre (Jour N° 285),Jeudi 12 Octobre (Jour N° 286),Vendredi 13 Octobre (Jour N° 287),Samedi 14 Octobre (Jour N° 288),Dimanche 15 Octobre (Jour N° 289),Mardi 16 Octobre (Jour N° 290),Mercredi 17 Octobre (Jour N° 291),Jeudi 18 Octobre (Jour N° 292),Vendredi 19 Octobre (Jour N° 293),Dimanche 20 Octobre (Jour N° 294),Lundi 21 Octobre (Jour N° 295),Mardi 22 Octobre (Jour N° 296),Mercredi 23 Octobre (Jour N° 297),Vendredi 24 Octobre (Jour N° 298),Samedi 25 Octobre (Jour N° 299),Dimanche 26 Octobre (Jour N° 300),Lundi 27 Octobre (Jour N° 301),Mercredi 28 Octobre (Jour N° 302),Jeudi 29 Octobre (Jour N° 303),Vendredi 30 Octobre (Jour N° 304),Samedi 31 Octobre (Jour N° 305),Samedi 01 Novembre (Jour N° 306),Dimanche 02 Novembre (Jour N° 307),Lundi 03 Novembre (Jour N° 308),Mercredi 04 Novembre (Jour N° 309),Jeudi 05 Novembre (Jour N° 310),Vendredi 06 Novembre (Jour N° 311),Samedi 07 Novembre (Jour N° 312),Lundi 08 Novembre (Jour N° 313),Mardi 09 Novembre (Jour N° 314),Mercredi 10 Novembre (Jour N° 315),Jeudi 11 Novembre (Jour N° 316),Samedi 12 Novembre (Jour N° 317),Dimanche 13 Novembre (Jour N° 318),Lundi 14 Novembre (Jour N° 319),Mardi 15 Novembre (Jour N° 320),Jeudi 16 Novembre (Jour N° 321),Vendredi 17 Novembre (Jour N° 322),Samedi 18 Novembre (Jour N° 323),Dimanche 19 Novembre (Jour N° 324),Mardi 20 Novembre (Jour N° 325),Mercredi 21 Novembre (Jour N° 326),Jeudi 22 Novembre (Jour N° 327),Vendredi 23 Novembre (Jour N° 328),Dimanche 24 Novembre (Jour N° 329),Lundi 25 Novembre (Jour N° 330),Mardi 26 Novembre (Jour N° 331),Mercredi 27 Novembre (Jour N° 332),Vendredi 28 Novembre (Jour N° 333),Samedi 29 Novembre (Jour N° 334),Dimanche 30 Novembre (Jour N° 335),Mardi 01 Décembre (Jour N° 336),Mercredi 02 Décembre (Jour N° 337),Jeudi 03 Décembre (Jour N° 338),Samedi 04 Décembre (Jour N° 339),Dimanche 05 Décembre (Jour N° 340),Lundi 06 Décembre (Jour N° 341),Mardi 07 Décembre (Jour N° 342),Jeudi 08 Décembre (Jour N° 343),Vendredi 09 Décembre (Jour N° 344),Samedi 10 Décembre (Jour N° 345),Dimanche 11 Décembre (Jour N° 346),Mardi 12 Décembre (Jour N° 347),Mercredi 13 Décembre (Jour N° 348),Jeudi 14 Décembre (Jour N° 349),Vendredi 15 Décembre (Jour N° 350),Dimanche 16 Décembre (Jour N° 351),Lundi 17 Décembre (Jour N° 352),Mardi 18 Décembre (Jour N° 353),Mercredi 19 Décembre (Jour N° 354),Vendredi 20 Décembre (Jour N° 355),Samedi 21 Décembre (Jour N° 356),Dimanche 22 Décembre (Jour N° 357),Lundi 23 Décembre (Jour N° 358),Mercredi 24 Décembre (Jour N° 359),Jeudi 25 Décembre (Jour N° 360),Vendredi 26 Décembre (Jour N° 361),Samedi 27 Décembre (Jour N° 362),Lundi 28 Décembre (Jour N° 363),Mardi 29 Décembre (Jour N° 364),Mercredi 30 Décembre (Jour N° 365),Jeudi 31 Décembre (Jour N° 366)"
 
"MoisMouv_X=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,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Avril,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Mai,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juin,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Juillet,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Août,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Septembre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Octobre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Novembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre,Décembre"
 
"QuadrillageVertical.length=366"
 
"SerieChoisie=N2"
 
"WMois=Décembre"
 
{xAxis: "01 Décembre"}xAxis: "01 Décembre"__proto__: constructor: ƒ Object()arguments: (...)assign: ƒ assign()caller: (...)create: ƒ create()defineProperties: ƒ defineProperties()defineProperty: ƒ defineProperty()entries: ƒ entries()freeze: ƒ freeze()getOwnPropertyDescriptor: ƒ getOwnPropertyDescriptor()getOwnPropertyDescriptors: ƒ getOwnPropertyDescriptors()getOwnPropertyNames: ƒ getOwnPropertyNames()getOwnPropertySymbols: ƒ getOwnPropertySymbols()getPrototypeOf: ƒ getPrototypeOf()is: ƒ is()isExtensible: ƒ isExtensible()isFrozen: ƒ isFrozen()isSealed: ƒ isSealed()keys: ƒ keys()length: 1name: "Object"preventExtensions: ƒ preventExtensions()prototype: {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,*…}seal: ƒ seal()setPrototypeOf: ƒ setPrototypeOf()values: ƒ values()__proto__: ƒ ()[[Scopes]]: Scopes[0]hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

Le nouveau code :

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
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		sepDate = " ", // Séparateur utilisé dans les dates lues dans la BDD.
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WJourN2 = 0,
		WJourN1 = 0,
		WJourN = 0,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		QuadrillageVertical = [],
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	if (jsonData_N2.length > 0)		
	{	
		i = 0;
		SerieChoisie = "";
		WMax = 0;
		WMin = parseInt(jsonData_N2[0][4]);
		while (i < jsonData_N2.length){
			var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
			WNbMouv_N2 = WNbMouv_N2 + parseInt(jsonData_N2[i+1][4]);
			WMax = MinMax(WNbMouv_N2, WMax, "MAX");
			WMin = MinMax(WNbMouv_N2, WMin, "MIN");
			NbMouvN2_Y.push(WNbMouv_N2);
			WJourN2 = WJourN2 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		SerieChoisie = "N2";
	}
	if (jsonData_N1.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N1.length){
			var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
			WNbMouv_N1 = WNbMouv_N1 + parseInt(jsonData_N1[i+1][4]);
			WMax = MinMax(WNbMouv_N1, WMax, "MAX");
			WMin = MinMax(WNbMouv_N1, WMin, "MIN");
			NbMouvN1_Y.push(WNbMouv_N1);
			WJourN1 = WJourN1 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N1.length >= jsonData_N2.length)
		{
			SerieChoisie = "N1";
		}
	}
	if (jsonData_N.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N.length){
			var WNbMouv_N = parseInt(jsonData_N[i][4]);
			WNbMouv_N = WNbMouv_N + parseInt(jsonData_N[i+1][4]);
			WMax = MinMax(WNbMouv_N, WMax, "MAX");
			WMin = MinMax(WNbMouv_N, WMin, "MIN");
			NbMouvN_Y.push(WNbMouv_N);
			WJourN = WJourN + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N.length >= jsonData_N1.length)
		{
			SerieChoisie = "N";
		}
	}
 
console.log(JSON.stringify("nbmouvn_y="+NbMouvN_Y));
console.log(JSON.stringify("nbmouvn1_y="+NbMouvN1_Y));
console.log(JSON.stringify("nbmouvn2_y="+NbMouvN2_Y));
 
// 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);
			var WJourSemaine = JourEnLettres(jsonData_N[i][3]);
		}
		if (SerieChoisie == "N1")
		{
			var WJour = jsonData_N1[i][3].slice(8,10);
			var WMois = jsonData_N1[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N1[i][3]);
		}
		if (SerieChoisie == "N2")
		{
			var WJour = jsonData_N2[i][3].slice(8,10);
			var WMois = jsonData_N2[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N2[i][3]);
		}
		WMois = MoisEnLettres(WMois);
		QuadrillageVertical.push({
			xAxis: "01" + sepDate + WMois
		});
//			var WDateMouv = WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		var WDateMouv = WJourSemaine + " " + WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		Jours_X.push(WNumJour);
		DateMouv.push(WDateMouv);
		MoisMouv_X.push(WMois);
		WNumJour = WNumJour + 1;
		i=i+2;
	}
 
console.log(JSON.stringify("Jours_X="+Jours_X));
console.log(JSON.stringify("DateMouv="+DateMouv));
console.log(JSON.stringify("MoisMouv_X="+MoisMouv_X));
console.log(JSON.stringify("QuadrillageVertical.length="+QuadrillageVertical.length));
console.log("SerieChoisie="+SerieChoisie);
console.log("WMois="+WMois);
console.log({xAxis: "01" + sepDate + WMois});
 
 
// 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"));  //
 
	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
//		  QuadrillageVertical.push({
//			  xAxis: "01" + sepDate + MoisEnLettres(mois)
//			});
//		}
//		// supprime 1st pas utile (Pas de graduation pour le tout premier)
//		QuadrillageVertical.shift();
 
	var oMarkLine = {
		silent: true,
		symbol: "none",
		label: {
			show: false
		},
		lineStyle: {
			color: "#CCC",
			type: "dotted",
			width: 1
		},
		animation: true,
		data: QuadrillageVertical
	};		
 
	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];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 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
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];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
	if (15 === jour) {
	  return true;
	}
  },
  formatter: function (valeur, index) {
	// récup du mois pour affichage
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	return valeur ? valeur.split(sepDate)[2] : "";
  }
},
			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"));  //
 
}

Pour le dataZoom, voici une petite image qui illustre bien le souci : on voit que le dataZoom est placé grosso-modo au milieu du graphique, ce qui correspond au mois d'août or il reste toujours sur "janvier, février, mars, etc...)

Nom : Echarts.png
Affichages : 87
Taille : 108,0 Ko

Nom : Echarts.png
Affichages : 87
Taille : 108,0 Ko

J'espère que tout ça pourra t'aider à me trouver le pourquoi du comment ça ne fonctionne pas et encore une fois, merci pour ta patience.

**Zebulon777** · 18/09/2018, 10h15

@NoSmoking :
j'ai essayé tout plein de chose, mais j'en suis toujours à mes 2 soucis : les barres verticales qui n'apparaissent pas et le nom des mois qui ne changent pas quand on bouge le dataZoom.

J'espère que tu pourras prendre un peu de temps pour te pencher sur "moi", car je craque.

Ps : j'ai tenu à jour le message précédent avec le code à jour et le plus possible d'information pour essayer de te "faciliter" les choses, j'espère que ça suffira...

Ps2 : j'ai remarqué que lorsque le dataZoom fait tout l'espace du graphique (donc 365 jours), tous les mois sont correctement affichés ; c'est seulement avec un plus petit zoom que ça pose problème.

Merci d'avance, m'sieur.

YES ! J'ai réussit pour les séparations verticales !

Voici ce que ça donne :

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
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph TRAFIC JOURNALIER LFPO - GRAND                                                         */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_TJ_LFPO(P_Annee, jsonData_N, jsonData_N1, jsonData_N2){
	var i = 0,
		sepDate = " ", // Séparateur utilisé dans les dates lues dans la BDD.
		WAnneeN = parseInt(P_Annee),
		WAnneeN1 = P_Annee - 1,
		WAnneeN2 = P_Annee - 2,
		WJourN2 = 0,
		WJourN1 = 0,
		WJourN = 0,
		WMin = 0,
		WMax = 0,
		WDerNumJour = 0,
		QuadrillageVertical = [],
		DateMouv = [],
		MoisMouv_X = [],
		Jours_X = [],
		NbMouvN_Y = [],
		NbMouvN1_Y = [],
		NbMouvN2_Y = [];
 
	// Remplissage des tableaux
	if (jsonData_N2.length > 0)		
	{	
		i = 0;
		SerieChoisie = "";
		WMax = 0;
		WMin = parseInt(jsonData_N2[0][4]);
		while (i < jsonData_N2.length){
			var WNbMouv_N2 = parseInt(jsonData_N2[i][4]);
			WNbMouv_N2 = WNbMouv_N2 + parseInt(jsonData_N2[i+1][4]);
			WMax = MinMax(WNbMouv_N2, WMax, "MAX");
			WMin = MinMax(WNbMouv_N2, WMin, "MIN");
			NbMouvN2_Y.push(WNbMouv_N2);
			WJourN2 = WJourN2 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		SerieChoisie = "N2";
	}
	if (jsonData_N1.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N1.length){
			var WNbMouv_N1 = parseInt(jsonData_N1[i][4]);
			WNbMouv_N1 = WNbMouv_N1 + parseInt(jsonData_N1[i+1][4]);
			WMax = MinMax(WNbMouv_N1, WMax, "MAX");
			WMin = MinMax(WNbMouv_N1, WMin, "MIN");
			NbMouvN1_Y.push(WNbMouv_N1);
			WJourN1 = WJourN1 + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N1.length >= jsonData_N2.length)
		{
			SerieChoisie = "N1";
		}
	}
	if (jsonData_N.length > 0)		
	{	
		i = 0;
		while (i < jsonData_N.length){
			var WNbMouv_N = parseInt(jsonData_N[i][4]);
			WNbMouv_N = WNbMouv_N + parseInt(jsonData_N[i+1][4]);
			WMax = MinMax(WNbMouv_N, WMax, "MAX");
			WMin = MinMax(WNbMouv_N, WMin, "MIN");
			NbMouvN_Y.push(WNbMouv_N);
			WJourN = WJourN + 1;
			i += 2; // Il faut avancer de 2 car il y a 1 ligne pour sens="A" et 1 ligne pour sens="D"
		}
		if (jsonData_N.length >= jsonData_N1.length)
		{
			SerieChoisie = "N";
		}
	}
 
console.log(JSON.stringify("nbmouvn_y="+NbMouvN_Y));
console.log(JSON.stringify("nbmouvn1_y="+NbMouvN1_Y));
console.log(JSON.stringify("nbmouvn2_y="+NbMouvN2_Y));
 
// 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);
			var WJourSemaine = JourEnLettres(jsonData_N[i][3]);
		}
		if (SerieChoisie == "N1")
		{
			var WJour = jsonData_N1[i][3].slice(8,10);
			var WMois = jsonData_N1[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N1[i][3]);
		}
		if (SerieChoisie == "N2")
		{
			var WJour = jsonData_N2[i][3].slice(8,10);
			var WMois = jsonData_N2[i][3].slice(5,7);
			var WJourSemaine = JourEnLettres(jsonData_N2[i][3]);
		}
		WMois = MoisEnLettres(WMois);
		QuadrillageVertical.push({
			xAxis: "01" + sepDate + WMois
		});
//			var WDateMouv = WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		var WDateMouv = WJourSemaine + " " + WJour + " " + WMois;// + " (Jour N° " + (parseInt(WNumJour) + 1) + ")"; 
		Jours_X.push(WNumJour);
		DateMouv.push(WDateMouv);
		MoisMouv_X.push(WMois);
		WNumJour = WNumJour + 1;
		i=i+2;
	}
 
console.log(JSON.stringify("Jours_X="+Jours_X));
console.log(JSON.stringify("DateMouv="+DateMouv));
console.log(JSON.stringify("MoisMouv_X="+MoisMouv_X));
console.log(JSON.stringify("QuadrillageVertical="+QuadrillageVertical.length));
console.log("SerieChoisie="+SerieChoisie);
console.log("WMois="+WMois);
console.log({xAxis: "01" + sepDate + WMois});
 
 
// 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"));  //
 
	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
//		  QuadrillageVertical.push({
//			  xAxis: "01" + sepDate + MoisEnLettres(mois)
//			});
//		}
//		// supprime 1st pas utile (Pas de graduation pour le tout premier)
//		QuadrillageVertical.shift();
 
	var oMarkLine = {
		silent: true,
		symbol: "none",
		label: {
			show: false
		},
		lineStyle: {
			color: "#CCC",
			type: "dotted",
			width: 1
		},
		animation: true,
		data: QuadrillageVertical
	};		
 
	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];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 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
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];// contient PAR EX dimanche 23 juillet
	var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
	if (15 === jour) {
	  return true;
	}
  },
  formatter: function (valeur, index) {
	// récup du mois pour affichage
	  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
	return valeur ? valeur.split(sepDate)[2] : "";
  }
},
			splitLine: {
				show: true, // True => quadrillage sur le graphe
				lineStyle: {
					color: "#CCC",
					type: "dotted",
					width: 1
				},
				  interval: function (index, valeur) {
					// récup du jour
					  valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
					var jour = valeur ? valeur.split(sepDate)[1] * 1 : 1;
					if (1 === jour) {
					  return true;
					}
				  }
			},				
			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"));  //
 
}

Par contre, en fait, du coup, je ne comprends pas du tout à quoi sert la partie "oMarkLine" que tu m'as fait ajouté dans les séries de l'axe Y ?

**Zebulon777** · 18/09/2018, 13h54

RE RE YES !
J'ai trouvé et je dois avouer que ce n'était pas de ma faute

Dans la partie formatter, index et valeur était inversé.

Dans le code, il y a

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
axisLabel: {
	/**
	* Pour affichage du label au milieu du mois, on met 15 pour simplifier
	* @param {object} index  - index du tableau de données traité
	* @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
	* Nota : le return true entraine l'appel de la fonction de formatage
	*/
	align: "center",
	interval: function (index, valeur) {
	// récup du jour
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
		if (15 === jour) {
			return true;
		}
	},
	formatter: function (valeur, index) {
		// récup du mois pour affichage
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		return valeur ? valeur.split(sepDate)[2] : "";
	}
},

au lieu de

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
axisLabel: {
	/**
	* Pour affichage du label au milieu du mois, on met 15 pour simplifier
	* @param {object} index  - index du tableau de données traité
	* @param {object} valeur - valeur correspondante du tableau de données au format xx-mois
	* Nota : le return true entraine l'appel de la fonction de formatage
	*/
	align: "center",
	interval: function (index, valeur) {
	// récup du jour
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		var jour = valeur ? valeur.split(sepDate)[1] * 1 : 15;
		if (15 === jour) {
			return true;
		}
	},
	formatter: function (index, valeur) {
		// récup du mois pour affichage
		valeur = DateMouv[index];// contient PAR EX dimanche 23 juillet
		return valeur ? valeur.split(sepDate)[2] : "";
	}
},

Fallait le trouver celui-là.
Je passais et repassais devant sans le voir.

Bon, mais je ne vais pas trop la ramener, non plus, car pour les barres verticales, j'avais oublié de mettre le show à true

En résumé un grand, grand merci à @NoSmoking pour son aide et sa patience.

Et je passe en "résolu".

**NoSmoking** · 18/09/2018, 15h23

Youpi !! tu m'épargnes l'analyse de ton code

Dans la partie formatter, index et valeur était inversé.

J'avais noté cette particularité de la lib. dans le passage des paramètres entre les méthodes interval et formatter, c'est une erreur de conception pour moi.

Fallait le trouver celui-là.

Il fallait mieux lire le code fourni

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
      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] : "";
      }
    },

Par contre, en fait, du coup, je ne comprends pas du tout à quoi sert la partie "oMarkLine" que tu m'as fait ajouté dans les séries de l'axe Y ?

Soit on utilise les markLine, soit on utilise splitLine.

Dans ton cas il est effectivement préférable d'utiliser les splitLine plutôt que les markLine si c'est pour particulariser le quadrillage de ton graphe.

xAxis.split line : ligne d'axe du graphique (SplitLine of axis in grid area.) ;
series[i]-line.markLine : marquage de données particulières sur le graphe (Use a line in the chart to illustrate.).

Et je passe en "résolu".

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

Ok, merci pour ce complément d'informations.
(Et en plus, j'ai appris à paramétrer mes graphes, ce qui ne gâche rien

)

**Zebulon777** · 10/10/2018, 11h29

Bonjour tout le monde,

je relance le sujet car je me trouve confronter à un truc bizarre : tout fonctionne, mais bizarrement en modifiant la taille de la div d'un des graphes, certaines valeurs de l'axe des Y ne s'affichent plus.

Voici ce que ça donne :

Nom : eCharts10.png
Affichages : 66
Taille : 147,9 Ko

Nom : eCharts10.png
Affichages : 66
Taille : 147,9 Ko

Données X et Y pour LFOB :
(C'est normal qu'il y aie autant de valeurs, il y a 1440 valeurs (minutes glissantes) mais on affiche que les tranches horaires en X)

Code data :

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

1
2
3
4
 
TranchesHoraires_X=["00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","00","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","01","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","02","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","03","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","04","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","05","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","06","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","07","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","08","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","09","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23"]
 
SommeTH_Y=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,3,3,3,3,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,3,3,3,3,3,4,4,4,4,5,5,4,4,4,4,4,4,5,5,5,6,6,5,5,5,6,6,6,6,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,6,7,7,7,7,7,7,7,7,7,7,7,6,7,7,6,6,6,6,6,5,5,6,6,6,5,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,6,6,6,5,5,5,5,5,5,5,6,6,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,3,3,4,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,4,3,3,3,3,3,3,3,4,4,4,4,4,4,4,4,4,4,4,5,4,4,4,4,5,4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,7,7,7,6,6,6,6,6,6,6,6,6,7,7,7,6,6,6,6,6,6,6,7,7,7,7,6,6,6,6,6,5,5,5,5,5,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,4,4,4,4,4,4,4,4,4,5,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,4,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,5,5,5,4,4,4,4,4,4,4,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]

Mon code :

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
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
 
...
...
...
if (jsonData[3].length > 0) {
	update = true;
	if ($("#LIG_HG_LFPB_LFOB").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_HG_LFPB_LFOB", ["lfpb_hg_left","lfob_hg_right"], ["6","6"]); // Graph de gauche=LFPB / Graph de droite=LFOB
	}
	createGraph_HG("LFPB", jsonData[3], WdayInit);
} else {
	$("#LIG_HG_LFPB_LFOB").empty();
}
 
if (jsonData[0].length > 0) {
	update = true;
	if ($("#LIG_HG_LFPB_LFOB").children().length == 0) {
// Laligne pour LFOB est déjà ajoutée.					
//					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_HG_LFPB", ["lfpb_hg_left","lfob_hg_right"], ["12","12"]); // Graph de gauche=LFPB / Graph de droite=LFOB
		addHTML("LIG_HG_LFPB_LFOB", ["lfpb_hg_left","lfob_hg_right"], ["6","6"]); // Graph de gauche=LFPB / Graph de droite=LFOB
	}
	createGraph_HG("LFOB", jsonData[0], WdayInit);
} else {
	$("#LIG_HG_LFPB_LFOB").empty();
}
if (update){
	$(".graph-loading").hide();
	$("#btn-save-pdf").attr("disabled", false);
	$("#div-info").children('.message-p-info').html('');
	$("#div-info").children('.icon-p-info').html('');
} else {
	$(".graph-loading").hide();
	$("#div-info").children('.message-p-info').html('<strong>Certaines données sont indisponibles...</strong>');
	$("#div-info").children('.icon-p-info').html('<i class="fa fa-exclamation-triangle fa-lg"></i>');
}
...
...
...
/*----------------------------------------------------------------------------------------------*/		
/* VARIABLES GLOBALES CONSTANTES POUR LES GRAPHES                                               */		
/*----------------------------------------------------------------------------------------------*/		
 
var WLigneCSV = "TRANCHES HORAIRES;INTERVALES;NB DEPART;NB ARRIVEE;TOTAL" + "\n";
 
var WPaddingTexte_xAxis = 30;
var WPaddingTexte_yAxis = 35;
var P_AxeTextSize = 15;
var P_CoulFond = "#ffffff"; // blanc
var P_TextColor = "#5d6d7e";
var P_Colors = ["#FE0000"];
var P_TAB_Colors = ['#008000', '#ff0000', '#0000FF']; // Couleur des courbes.
 
var P_Debut = {
	textStyle: {
		fontFamily: 'sans-serif'
	},
	animation: true,
};
var P_Title_textStyle =	{
	color: '#000',
	fontStyle: 'normal',
	fontWeight: 'bold',
	fontFamily: 'sans-serif',
	fontSize: 20,
};
var P_Legend = {
	show: true,
	type : 'plain',
	orient: 'vertical',
	borderColor: '#95a5a6',
	borderWidth: 2,
	borderRadius: 7,
	shadowColor: 'rgba(0, 0, 0, 0.5)',
	shadowBlur: 10,
	itemWidth: 25,
	itemHeight: 14,
	left: 3,
	top: 15
};
var P_Toolbox = {									// Cartouche en haut à droite
	show: true,
	padding: [5, 25, 0, 0],	// [haut, droit, bas, gauche]
	itemSize: 17,
	itemGap: 10,
	showTitle: true,		
	feature: {
		restore: {
			show: true,
			title: 'Rechargement'
		},
		magicType: {
			type: ['line', 'bar'],
			title: {
				line: 'Ligne',
				bar: 'Histo.'
			}
		},
		saveAsImage: {title:'Sauvegarde PNG'}
	}
};
var P_XSplitLine = {
	show: true, // True => quadrillage VERTICAL sur le graphe
	lineStyle: {
		color: "#CCC",
		type: "dotted",
		width: 1
	},
};				
var P_XSplitArea = { 							// 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)']
	},
};
var P_XAxisLine = {
	lineStyle: {
		color: 'rgb(105,105,105)',
		width: 2,
		onZero: true,
	}
};
var P_XAxisTick = {
	show: true,					 		// Whether to show the axis tick
	inside: false,
	length: 3
};
var P_YAxisLine = {
	lineStyle: {
		color: 'rgb(165,165,165)',
		width: 2
	}
};
var P_YAxisTick = {
	length: 3,
};
 
 
/*----------------------------------------------------------------------------------------------*/		
/* Graph HEURES GLISSANTES - GRAND                                                              */		
/*----------------------------------------------------------------------------------------------*/		
function createGraph_HG(P_Plateforme, jsonData, P_dayInit){
 
	var i = 0,
		WTot_Gen = 0,
		WTot_Dep = 0,
		WTot_Arr = 0,
		TranchesHoraires_X = [],
		SommeTH_Y = [],
		TotalARR_Y = [],
		TotalDEP_Y = [],
		Interv = [];
 
	if (P_Plateforme == "LFPO")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][18]);
				var WTotARR = parseInt(jsonData[i][10]);
				var WTotDEP = parseInt(jsonData[i][17]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				SommeTH_Y.push(WTotal);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfpo_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C1 = echarts.init(document.getElementById("lfpo_hg"));  //
			val = ($("#lfpo_hg").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFPO - " + P_dayInit;
			var P_CoulFondGrpah = "#E1FFE9";
		}
	if (P_Plateforme == "LFPG")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][22]);
				var WTotARR = parseInt(jsonData[i][12]);
				var WTotDEP = parseInt(jsonData[i][21]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				SommeTH_Y.push(WTotal);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfpg_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C2 = echarts.init(document.getElementById("lfpg_hg"));  //
			val = ($("#lfpg_hg").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFPG - " + P_dayInit;
			var P_CoulFondGrpah = "#FFFFD8"; //"#FFF7FC"; //"#FFFFC8";
		}
	if (P_Plateforme == "LFPB")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][16]);
				var WTotARR = parseInt(jsonData[i][9]);
				var WTotDEP = parseInt(jsonData[i][15]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				SommeTH_Y.push(WTotal);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfpb_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C3 = echarts.init(document.getElementById("lfpb_hg_left"));  //
			val = ($("#lfpb_hg_left").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFPB - " + P_dayInit;
			var P_CoulFondGrpah = "#DDF6FF";
		}
 
	if (P_Plateforme == "LFOB")
		{
			// Remplissage des tableaux SANS somme par heure
			while (i < jsonData.length){
				var hdeb = jsonData[i][2].slice(0,2);
				var WTotal = parseInt(jsonData[i][6]);
				var WTotARR = parseInt(jsonData[i][4]);
				var WTotDEP = parseInt(jsonData[i][5]);
				var WDebInt = jsonData[i][2].slice(0,5); // Pour ne pas prendre les secondes
				var WFinInt = jsonData[i][3].slice(0,5); // Pour ne pas prendre les secondes
				var WInterval = WDebInt + " - " + WFinInt;
				TranchesHoraires_X.push(hdeb);
				Interv.push(WInterval);
				SommeTH_Y.push(WTotal);
				TotalARR_Y.push(WTotARR);
				TotalDEP_Y.push(WTotDEP);
				if (jsonData[i][2].slice(3,5) == "00")
					{
						WTot_Arr = WTot_Arr + WTotARR;
						WTot_Dep = WTot_Dep + WTotDEP;
						WTot_Gen = WTot_Gen + WTotal;
					}
				i += 1;
			}
			var WTexteInfo = "Total Mvts = " + WTot_Gen + " - Total Arr = " + WTot_Arr + " - Total Dep = " + WTot_Dep;
//				$("#Info_lfob_hg").html('<strong>' + WTexteInfo + '</strong>');
			var HG_Chart_C4 = echarts.init(document.getElementById("lfob_hg_right"));  //
			val = ($("#lfob_hg_right").width() / 60);
			padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]
			P_Titre = "Heures Glissantes LFOB - " + P_dayInit;
			var P_CoulFondGrpah = "#FEEDED";
		}
 
console.log("TranchesHoraires_X="+JSON.stringify( TranchesHoraires_X));
 
	var HG_ChartOpt = {
		backgroundColor: P_CoulFond,
		color: P_TAB_Colors,
 
		P_Debut, // Début du paramètrage des graphique (police, animation, etc...)
//			grid: P_Grid,		// Distance between grid component and the right side of the container
//			toolbox: P_Toolbox,
		legend: P_Legend,
 
		title: {
			padding: [15, 0, 0, 0],					// Title space around content // [haut, droit, bas, gauche]
			left: 'center',							// Distance between grid component and the left side of the container
			text: P_Titre,
			textStyle: P_Title_textStyle
		},
		grid: {
			show: true,							// Whether to show the grid in rectangular coordinate
			backgroundColor: P_CoulFondGrpah, // fond du graphe
			top: 50,								// Distance between grid component and the top side of the container
			bottom: 120,								// Distance between grid component and the bottom side of the container
			left: 150,								// 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
			axisLine: P_XAxisLine,
			axisTick: P_XAxisTick,
			splitLine: P_XSplitLine,		// True => quadrillage sur le graphe
			splitArea: P_XSplitArea, 	// Permet de mettre un fond de couleurs différentes
			type: 'category',
			name: 'Tranches Horaires (TU)' + '\n\n' + WTexteInfo,
			nameLocation: 'center',
			nameTextStyle: {
				padding: WPaddingTexte_xAxis,
				fontWeight: 'bold',
				color: P_TextColor,
				fontSize : P_AxeTextSize
			},
			max: 'dataMax',
			position: 'bottom',
			boundaryGap: true,
			axisLabel: {
				interval: 59, 						// 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)'
			},
			data: TranchesHoraires_X
		},
		yAxis: {
			axisLine: P_YAxisLine,
			axisTick: P_YAxisTick,
			type: 'value',
			name: 'Mouvements',
			nameLocation: 'center',
			nameRotate: 90,
			nameTextStyle: {
				padding: WPaddingTexte_yAxis,
				fontWeight: 'bold',
				color: P_TextColor,
				fontSize : P_AxeTextSize
			},
			axisLabel: { 							// Settings related to axis label
				color: 'rgb(070,070,070)'
			}
		},
		toolbox: {									// Cartouche en haut à droite
			show: true,
			padding: [5, 25, 0, 0],	// [haut, droit, bas, gauche]
			itemSize: 17,
			itemGap: 10,
			showTitle: true,		
			feature: {
				restore: {
					show: true,
					title: 'Rechargement'
				},
				magicType: {
					type: ['line', 'bar'],
					title: {
						line: 'Ligne',
						bar: 'Histo.'
					}
				},
				saveAsImage: {
					title:'Sauvegarde PNG'
				},
//            myTool1: {
//                show: true,
//                title: 'Infos masquées',
//                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
//                onclick: function () {
//						if (P_Plateforme == "LFPO")
//							{
//								$('#Info_lfpo_hg').css('display','grid'); // Effacement de la DIV Info_lfpo_hg
//							}
//						if (P_Plateforme == "LFPG")
//							{
//								$('#Info_lfpg_hg').css('display','grid'); // Effacement de la DIV Info_lfpo_hg
//							}
//						if (P_Plateforme == "LFPB")
//							{
//								$('#Info_lfpb_hg').css('display','grid'); // Effacement de la DIV Info_lfpo_hg
//							}
//                }
//            },
				dataView: {
					show: true, // Affiche ou non l'icône pour afficher les données utilisées.
					readOnly: false,
					backgroundColor: '#88ABD9',
					title: 'Données',
					lang: ['Données utilisées pour le graphique...', 'Retour', 'Export CSV'], 
					optionToContent: function(opt) {
//							if (P_Plateforme == "LFPO")
//								{
//									$('#Info_lfpo_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
//							if (P_Plateforme == "LFPG")
//								{
//									$('#Info_lfpg_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
//							if (P_Plateforme == "LFPB")
//								{
//									$('#Info_lfpb_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
//							if (P_Plateforme == "LFOB")
//								{
//									$('#Info_lfob_hg').css('display','none'); // Effacement de la DIV Info_lfpo_hg
//								}
						var axisData = opt.xAxis[0].data;
						var series = opt.series;
						var WTable01 = '<div id="ID_Table_Data">';
						WTable01 = WTable01 + '<table class="table-fill">';
						WTable01 = WTable01 + '<thead><tr>';
						WTable01 = WTable01 + '<th class="text-center" style="width:120px">Tranches Horaires</th>'
						WTable01 = WTable01 + '<th class="text-center" style="width:120px">Intervales</th>'
						WTable01 = WTable01 + '<th class="text-center">' + series[1].name + '</th>';
						WTable01 = WTable01 + '<th class="text-center">' + series[2].name + '</th>';
						WTable01 = WTable01 + '<th class="text-center">' + series[0].name + '</th>';
						WTable01 = WTable01 + '</tr></thead>';
						WTable01 = WTable01 + '<tbody class="table-hover">';
						for (var i = 0, l = axisData.length; i < l; i++) {
							WLigneCSV = WLigneCSV + TranchesHoraires_X[i] + ";" + Interv[parseInt(i)] + ";";
							WLigneCSV = WLigneCSV + series[1].data[i] + ";" + series[2].data[i] + ";" + series[0].data[i];
							WLigneCSV = WLigneCSV + "\n";
							WTable01 += '<tr>'
									 + '<td class="text-center">' + TranchesHoraires_X[i] + '</td>'
									 + '<td class="text-center">' + Interv[parseInt(i)] + '</td>'
									 + '<td class="text-center">' + series[1].data[i] + '</td>'
									 + '<td class="text-center">' + series[2].data[i] + '</td>'
									 + '<td class="text-center">' + series[0].data[i] + '</td>'
									 + '</tr>';
						}
						WTable01 += '</div></tbody></table>';
						return WTable01;
					},
					contentToOption: function(){ // Va permetrtre de gérer l'exportation en CSV
						var NomCSV = "HeuresGlissantes_" + P_dayInit;
						var Ext = ".CSV";
						var FicCSV = NomCSV + Ext;
// Ecrire le contenu de la variable WLigneCSV dans un fichier
						download(FicCSV, WLigneCSV);
					}
				}
			}
		},
		tooltip: {
			show: true,
			trigger: 'axis', 						// Triggered by axes.
			axisPointer: {
				type: 'line',
				label : {
					formatter: function (params) {
					return Interv[parseInt(params.value) * 60]; // * 60 => on se déplace de 60 dans le tableau de 1440 items
					}
				},
				lineStyle: {
					width: 1 						// Epaisseur de la ligne verticale
				}
			}
		},
		series : [
			{
				type: 'line',
				name: 'Nb Total',					// 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: SommeTH_Y
			},
			{
				type: 'line',
				name: 'Nb Arrivée',					// 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: TotalARR_Y
			},
			{
				type: 'line',
				name: 'Nb Départ',					// 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: TotalDEP_Y
			}
		]
	};
 
	if (P_Plateforme == "LFPO")
		{
			HG_Chart_C1.setOption(HG_ChartOpt);
			var HG_Chart_C1 = echarts.init(document.getElementById("lfpo_hg"));  //
		}
	if (P_Plateforme == "LFPG")
		{
			HG_Chart_C2.setOption(HG_ChartOpt);
			var HG_Chart_C2 = echarts.init(document.getElementById("lfpg_hg"));  //
		}
	if (P_Plateforme == "LFPB")
		{
			HG_Chart_C3.setOption(HG_ChartOpt);
			var HG_Chart_C3 = echarts.init(document.getElementById("lfpb_hg_left"));  //
		}
	if (P_Plateforme == "LFOB")
		{
			HG_Chart_C4.setOption(HG_ChartOpt);
			var HG_Chart_C4 = echarts.init(document.getElementById("lfob_hg_right"));  //
		}
}

Merci d'avance.

**Zebulon777** · 10/10/2018, 14h41

Heu...
Va m'faire taper sur les doigts, moué

J'ai trouvé, il suffisait de modifier le padding afin d'augmenter le pas en divisant par 120 au lieu de 60, puisque la zone de graphique est 2 fois plus petite :

Code javascript :

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

1
2
3
 
val = ($("#lfob_hg_right").width() / 120);
padding_array = [0, 0, 0, val];					// [haut, droit, bas, gauche]

Axe des X et libellé [ECharts]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager