Les graphiques sont déclarés dans les fichiers
traceH.php et traceH1.php
par exemple voici le graphique pour la température max, après tu peux tout modifier, par exemple la couleur de la bordure "plotBorderColor" tu peux aussi rajouter ce que tu veux, mais il faut consulter l'api
http://docs.highcharts.com/#home
http://api.highcharts.com/highcharts
Il y a beaucoup d'exemples et tu peux les modifier en ligne pour voir le résultat des modifications directement
http://jsfiddle.net/gh/get/jquery/1.7.2 ... le-margin/
J'ai fait tous mes graphiques avec cette librairie, voici quelques exemples
http://www.boock.ch/meteo/temperature_moyenne.php
http://www.boock.ch/meteo/graphiques_dy ... _jours.php
http://www.boock.ch/meteo/graphiques_dy ... minmax.php
http://www.boock.ch/meteo/graphiques_dy ... re_48h.php
etc....
// chart1 Températures Maxima
chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'spline',
marginRight: 10,
marginBottom: 30,
plotBorderColor: '#346691',
plotBorderWidth: 2
},
navigation: {
buttonOptions:
{
enabled: false
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 50,
floating: true,
borderWidth: 1
},
title: {
text: 'Températures maximum',
x: -20 //center
},
subtitle: {
text: nomsite,
x: -20
},
credits: {
text: 'Météo Villarzel',
href: 'http://www.boock.ch/meteo-villarzel.php'
},
xAxis: {
categories: dXlab,
labels:
{
step: MonStep
}
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 0.5,
color: '#ffffff'
}]
},
tooltip: { formatter: function() {
var s = '<b><span style="color:#ffffff;font-size:small; font-weight:800">'+ this.x+'</span></b>';
$.each(this.points, function(i, point) {
s += '<br/><span style="color:'+ point.series.color +'">'+
point.series.name +':</span><span style="color:#ffffff;font-size:small; font-weight:800">'+ point.y+'</span>°C' ;
});
return s;
},
shared: true
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [
{
name: 'Maxima '+date1,
data: dTmax[1]},{
name: 'Maxima '+date2,
data: dTmax[2]}
]
});