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

Version imprimable

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:

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:

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:

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?

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

Code:

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
        }]
    });
});

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:

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?

20/10/2016, 18h55
NoSmoking

:koi: ne serais tu pas en train de mélanger tes deux discussions ?
20/10/2016, 20h44
GUL75

Oui je me rends compte de l'enchevêtrement mais je ne sais plus comment avancer. Je vais décomposer de nouveau les problèmes.