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
|
var HG_Chart_C2 = echarts.init(document.getElementById("lfpo_hg")); //
val = ($("#lfpo_hg").width() / 60);
padding_array = [0, 0, 0, val];
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: 'Heures Glissantes LFPO - ' + P_dayInit,
textStyle : {
color: '#000',
fontStyle: 'italic',
fontWeight: 'bold',
fontFamily: 'sans-serif',
fontSize: 20,
},
},
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)',
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'
},
dataView: {
show: true, // 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>' + "" + '</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;
}
}
}
},
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 :' + "\n" + WTot_Gen, // 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 :' + "\n" + WTot_Arr, // 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 :' + "\n" + WTot_Dep, // 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
}
]
};
HG_Chart_C2.setOption(HG_ChartOpt);
var HG_Chart_C2 = echarts.init(document.getElementById("lfpo_hg")); // |
Comportement du Dataview
Répondre avec citation
Partager