|
1 | 1 | ; |
2 | 2 |
|
3 | 3 | (function($) { |
4 | | - // définition du plugin jQuery |
5 | 4 | $.fn.highchartTable = function() { |
6 | 5 |
|
7 | 6 | var allowedGraphTypes = ['column', 'line', 'area', 'spline', 'pie']; |
|
23 | 22 | var $table = $(table); |
24 | 23 | var nbYaxis = 1; |
25 | 24 |
|
26 | | - // Récupération du titre du graphique à partir du caption |
| 25 | + // Retrieve graph title from the table caption |
27 | 26 | var captions = $('caption', table); |
28 | 27 | var graphTitle = captions.length ? $(captions[0]).text() : ''; |
29 | 28 |
|
30 | 29 | var graphContainer; |
31 | 30 | if ($table.data('graph-container-before') != 1) { |
32 | | - // Récupération de la cible d'affichage du graphique |
| 31 | + // Retrieve where the graph must be displayed from the graph-container attribute |
33 | 32 | var graphContainerSelector = $table.data('graph-container'); |
34 | 33 | if (!graphContainerSelector) { |
35 | 34 | throw "graph-container data attribute is mandatory"; |
|
59 | 58 | graphContainer = graphContainer[0]; |
60 | 59 | } |
61 | 60 |
|
62 | | - // Récupération du type de graphique |
| 61 | + // Retrieve graph type from graph-type attribute |
63 | 62 | var globalGraphType = $table.data('graph-type'); |
64 | 63 | if (!globalGraphType) { |
65 | 64 | throw "graph-type data attribute is mandatory"; |
|
75 | 74 |
|
76 | 75 | var isGraphInverted = $table.data('graph-inverted') == 1; |
77 | 76 |
|
78 | | - // Récupération des titres des séries de données à afficher sur le graphique |
| 77 | + // Retrieve series titles |
79 | 78 | var ths = $('thead th', table); |
80 | 79 | var columns = []; |
81 | 80 | var vlines = []; |
|
254 | 253 | } |
255 | 254 |
|
256 | 255 | var defaultColors = [ |
257 | | - '#4572A7', //bleu |
258 | | - '#AA4643', //rouge |
259 | | - '#89A54E', //vert |
260 | | - '#80699B', //mauve |
261 | | - '#3D96AE', //bleu clair |
262 | | - '#DB843D', //orange |
263 | | - '#92A8CD', //bleu encore plus clair |
264 | | - '#A47D7C', //marron |
265 | | - '#B5CA92' //vert clair |
| 256 | + '#4572A7', |
| 257 | + '#AA4643', |
| 258 | + '#89A54E', |
| 259 | + '#80699B', |
| 260 | + '#3D96AE', |
| 261 | + '#DB843D', |
| 262 | + '#92A8CD', |
| 263 | + '#A47D7C', |
| 264 | + '#B5CA92' |
266 | 265 | ]; |
267 | 266 | var colors = []; |
268 | 267 |
|
|
272 | 271 | var dataname = 'graph-color-' + (i+1); |
273 | 272 | colors.push(typeof $table.data(dataname) != 'undefined' ? $table.data(dataname) : typeof themeColors[i] != 'undefined' ? themeColors[i] : defaultColors[i]); |
274 | 273 | } |
275 | | - // Configuration de HighChart |
| 274 | + |
276 | 275 | var highChartConfig = { |
277 | 276 | colors: colors, |
278 | 277 | chart: { |
|
305 | 304 | opposite: $table.data('graph-xaxis-opposite') == '1', |
306 | 305 | showLastLabel: true, |
307 | 306 | tickInterval: $table.data('graph-xaxis-tick-interval') || null, |
308 | | - dateTimeLabelFormats: { //par défaut on affiche numéro jour mois sur les graphs datetime |
| 307 | + dateTimeLabelFormats: { //by default, we display the day and month on the datetime graphs |
309 | 308 | second: '%e. %b', |
310 | 309 | minute: '%e. %b', |
311 | 310 | hour: '%e. %b', |
|
384 | 383 | } |
385 | 384 | }; |
386 | 385 |
|
387 | | - // Affichage du graphique |
388 | 386 | new Highcharts.Chart(highChartConfig); |
389 | 387 |
|
390 | | - // Permettre le chaînage par jQuery |
| 388 | + //for fluent api |
391 | 389 | return this; |
392 | 390 | }); |
393 | 391 | }; |
|
0 commit comments