Modifier format affichage date d'un axe (graph highcharts)

**GUL75** · 18/10/2016, 16h40

Bonjour à tous,

J'ai un graphique affichant une courbe de températures sur une année. Les jours (abscisse) sont affichés de 1 à 365 mais je dois afficher sur l'axe x du graph en jours calendaires genre "1 mars 2013".

Code :

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

1
2
3
4
5
var listeJour = new Array(365);                               // je veux que le graph affiche cela en format "JJ-MM-AAAA"
	for(x=1;x <= listeJour.length;x++){
		listeJour[x-1]=x;
	}
	var listeValeur= courbeTemp(listeJour, parametresCourbe);

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function (listeJour,listeValeur,titre) {
	$('#graph_GAI_div').highcharts({
		title: {
			text: titre
		},
		xAxis: { 
			categories: listeJour,
 
			}
		},
		yAxis: {
			title: {
				text: ''
			},
			labels: {
				formatter: function () {
					return this.value + '';
				}
			}
		},
		plotOptions: {
 
			marker: {
				radius: 2,
				lineColor: '#666666',
				lineWidth: 0.5
			}
		},
		tooltip: {
		    crosshairs: {
		        color: 'red',
		        dashStyle: 'solid'
		    },
		    shared:false
		},	
		series: [{
			name: 'temp',
			lineColor: 'green',
			marker: {
				symbol: 'diamond'                
			},
			data: listeValeur
		}]
	});
}

J'ai décidé d'intégrer

Code :

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

1
2
3
4
5
labels: {
	formatter: function () {
		return listeJour(this.value).format("JJ-MM-AAAA");
	}
}

dans XAxis mais cela ne fonctionne toujours pas. Comment faire. Ai-je oublié une variable de transformation?

**NoSmoking** · 19/10/2016, 18h49

Bonjour,
tu devrais te pencher sur dateTimeLabelFormats et regarder leur exemple

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
$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%d/%m/%y'            // <- Modifié ICI
            }
        },
 
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2016, 0, 1),
            pointInterval: 24 * 3600 * 1000 // one day
        }]
    });
});

**GUL75** · 20/10/2016, 15h29

Bonjour à tous,

J'ai avancé un peu en reconsidérant les termes mal employés qui me perturber (jours julien qui ne sont que des jours ISO8601 version simplifiée!)
Je vais donc simplifier dans un premier temps.
voici le code avec commentaires

l'idée serait de faire correspondre l'affichage que SpaceFrog m'a fourni avec le tableau numero_date. Il y a peut-être des redondances.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 
var numero_jour = new array (365); //simple tableau (d'une ligne pour mes abscisses) de 1 à 365 sensés correspondre aux jours d'une année (avec 1 pour 1 janv 2013)
	var date_deb = new Date(2013,0,1);// c'est le code de SpaceFrog qui me permet d'afficher les dates que je veux en abscisses
	var date_fin= new Date(2013,5,30);
	var current=date_deb;
	var i=0;
	while ( current != date_fin){
	i++
	 curMonth=current.getMonth();
	 curDate=current.getDate();
	 joursCalendaires.push(curDate + " " +tabMonths[curMonth]);
	 current=new Date(2013,curMonth, curDate+1);
	 if (curMonth==11 && curDate==31 ){break;}
	 if (current > date_fin) {break;}
    }
 
// l'idée serait de faire correspondre l'affichage avec le tableau numero_date 
// j'ai donc voulu faire un affichage avec dates en faisant la boucle suivante mais il manque des éléments pour fonctionner
 
	var dates = new DateTime ("d"); //dates qui doivent remplacer numero_jour pour avoir une date affichee dans mon graph
	for (var i = 1; i <= numero_jour.Length; i++) {
	    Console.WriteLine(dates.ToString(numero_jour[i-1]=i, CultureInfo.CreateSpecificCulture("fr-FR")));
	}

Une idée?