Bonjour,
Je suis en train de faire un graphique highcharts sur 24 heures. Je voudrais que xAxis affiche les 24 heures avec un intervalle de 1 heure qui commencerais à la date du jour à 0h et se terminerais à la date du jour + 1 jour à 0h. Mon graphique change de date de jour tout les jours à 0h. Pour déterminer la date dé début et la date de fin, j’ai créé deux variables PHP $début $fin. je pense que ça doit être possible en javascript, mais je ne sais pas comment faire. A savoir que me données sont extraites d’une base de données.
function comArr(unitsArray) {
var outarr = [];
for (var i = 0; i < DHT.length; i++) {
outarr[i] = [DHT[i], unitsArray[i]];
}
return outarr;
}
$(function() {
Highcharts.setOptions({
lang: {
months: ['Janvier', 'Fvrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc'],
decimalPoint: ',',
resetZoom: 'Reset zoom',
resetZoomTitle: 'Reset zoom 1:1',
contextButtonTitle: 'Menu contextuel du graphique',
viewFullscreen: 'Voir le graphique en plein écran',
downloadPNG: "Télécharger au format PNG image",
downloadJPEG: "Télécharger au format JPEG image",
downloadPDF: "Télécharger au format PDF document",
downloadSVG: "Télécharger au format SVG vector image",
printChart: "Imprimer le graphique",
loading: "Chargement en cours...",
rangeSelectorFrom: "Du",
rangeSelectorTo: "Au"
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'temperature',
zoomType: 'x',
type: 'spline',
marginRight: 10,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
},
title: {
text: '<?php echo " Radiation solaire du ". $date; ?>',
align: 'center',
},
subtitle: {
text: 'Source : Météo Jarny',
align: 'center',
},
credits: {
text: '© Météo Jarny',
href: ''
},
legend: {
align: 'center',
verticalAlign: 'center',
x: 0,
y: 515,
borderColor: 'royalblue',
borderWidth: 1,
borderRadius: 5,
backgroundColor: {
linearGradient: [0, 0, 0, 20],
stops: [
[0, '#FFFFDD'],
[1, '#CAEEFF'],
]
},
layout: 'horizontal',
shadow: true,
},
time: {
getTimezoneOffset: function(timestamp) {
var zone = 'Europe/Paris',
timezoneOffset = -moment.tz(timestamp, zone).utcOffset();
return timezoneOffset;
},
timezone: 'Europe/Paris',
//timezoneOffset:0
useUTC: false,
},
xAxis: {
type: 'datetime',
tickInterval: 3600 * 1000,
alternateGridColor: '',
gridLineColor: '#BDBDBD',
gridLineWidth: 0.5,
startOnTick: false,
},
yAxis: {
title: {
text: null,
},
labels: {
formatter: function() {
return this.value + ' W/m²';
},
},
plotLines: [{
value: 0,
width: 1.5,
color: '#FFFF00'
}]
},
tooltip: {
animation: true,
shared: true,
crosshairs: true,
enabled: true,
followPointer: true,
split: true,
valueDecimals: 1,
borderColor: 'royalblue',
borderWidth: 1,
backgroundColor: '#2E2E2E',
dateTimeLabelFormats: {
day: "%A %e %B %Y",
hour: "%A %e %B %Y à %Hh %Mmn",
millisecond: "%A %e %B %Y à %H:%M:%S.%L",
minute: "%a %e %B %Y à %Hh %Mmn",
month: "%B %Y",
second: "%A %e %B %Y à %Hh %Mmn %Ss",
week: "Semaine depuis %A %e %b %Y",
year: "%Y",
},
headerFormat: '<table cellspacing="2" cellpadding="0" style="font-size:12px"><tr><td colspan="4" class="TD_Header_Tooltip">{point.x:%A %e %B %Y à %Hh %Mmn}</td></tr>',
xDateFormat: "%A %e %B à %Hh %Mmn",
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'Radiation solaire',
type: 'areaspline',
color: '#FF0000',
lineWidth: 0.5,
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, 'rgb(255, 0, 0)'],
[1, 'rgb(255,255,0)']
]
},
data: comArr(solar),
tooltip: {
pointFormatter: function() {
var s = '<tr><td align="left"><br /><span style="color:' + [this.color] + '">u25CF </span>' + [this.series.name] + '</td>'
s = s + '<td align="center">: </td>'
s = s + '<td align="right"><b>' + Highcharts.numberFormat(this.y, 1, ",", " ") + '</b></td>'
s = s + '<td align="left"> W/m²</td></tr>';
return s;
},
},
}, ]
},
function(chart) { // on complete
chart.renderer.image('', 8, 8, 102, 50)
.add()
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>