Tooltip
Posté : 03 nov. 2022, 18:16
Bonjour,
J'ai fait un graphique qui classe les températures moyennes mensuelles par ordre décroissant. A l'aide d'un menu déroulant on peut choisir le mois que l'on veut. Mon graphique fonctionne, mais j'ai un problème avec mon tooltip.
Le graphique:
https://www.meteo-jarny.com/Graphiques ... r=Valider
Dans mon tooltip j'ai actuellement le rang, le mois, l'année et la température moyenne. Le mois est en numérique (11) et moi je voudrais en lettre (Novembre) avec la première lettre en majuscule. Le problème est que dans yAxis je n'ai pas les dates comme les graphiques que je fais couramment, j'ai les rangs. J'ai ajouté un point.key pour affiché les mois et année dans le tooltip mais impossible de transformer les mois numérique et lettre. J'ai testé plusieurs choses mais sans résultats, du coup je me demande si ma solution est bonne (j'en doute). Je pense qu'il doit y avoir une autre solution, mais je ne vois pas trop comment.
Ma requête php:
Le code JS:
J'ai fait un graphique qui classe les températures moyennes mensuelles par ordre décroissant. A l'aide d'un menu déroulant on peut choisir le mois que l'on veut. Mon graphique fonctionne, mais j'ai un problème avec mon tooltip.
Le graphique:
https://www.meteo-jarny.com/Graphiques ... r=Valider
Dans mon tooltip j'ai actuellement le rang, le mois, l'année et la température moyenne. Le mois est en numérique (11) et moi je voudrais en lettre (Novembre) avec la première lettre en majuscule. Le problème est que dans yAxis je n'ai pas les dates comme les graphiques que je fais couramment, j'ai les rangs. J'ai ajouté un point.key pour affiché les mois et année dans le tooltip mais impossible de transformer les mois numérique et lettre. J'ai testé plusieurs choses mais sans résultats, du coup je me demande si ma solution est bonne (j'en doute). Je pense qu'il doit y avoir une autre solution, mais je ne vois pas trop comment.
Ma requête php:
Code : Tout sélectionner
$sql = "SELECT Mois, Annee, Moy_T FROM noaa_mois WHERE mois=$Jahre GROUP BY 1 DESC, 2 ASC";
$query = mysqli_query($conn, $sql);
$i=0;
$Mois = array();
$Annee = array();
$Moy_T = array();
while ($list = mysqli_fetch_assoc($query)) {
$Mois[$i]=$list['Mois']*1;
$Annee[$i]=$list['Annee']*1;
$date[$i] =$Mois[$i]." ". $Annee[$i];
$Moy_T[$i]=$list['Moy_T']*1;
$Donnee[] = array($date[$i],(float)$Moy_T[$i]);
$i++;
}
mysqli_close($conn);
<script type="text/javascript">
eval(<?php echo "'var Donnee = ".json_encode($Donnee)."'" ?>);
</script>
Code : Tout sélectionner
Highcharts.setOptions({
lang: {
months: ['Janvier', 'Février', '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"
}
});
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
zoomType: 'x',
alignTicks: true,
plotBorderColor: '#346691',
plotBorderWidth: 1,
},
title: {
text: 'Classement des températures moyennes des mois <?php
if ($month == 0)
{
echo "";
}
elseif ($month == 1)
{
echo "de janvier";
}
elseif ($month == 2)
{
echo "de février";
}
elseif ($month == 3)
{
echo "de mars";
}
elseif ($month == 4)
{
echo "d\'avril";
}
elseif ($month == 5)
{
echo "de mai";
}
elseif ($month == 6)
{
echo "de juin";
}
elseif ($month == 7)
{
echo "de juillet";
}
elseif ($month == 8)
{
echo "d\'août";
}
elseif ($month == 9)
{
echo "de septembre";
}
elseif ($month == 10)
{
echo "d\'octobre";
}
elseif ($month == 11)
{
echo "de novembre";
}
elseif ($month == 12)
{
echo "de décembre";
}
?> ',
},
subtitle: {
text: 'Source : Météo-Jarny',
align: 'center',
x: 0
},
credits: {
text: '© Météo Jarny',
href: ''
},
legend: {
enabled: true,
align: 'top',
layout: 'horizontal',
align: 'center',
y: 10,
shadow: true
},
xAxis: {
categories:
['1er','2ème','3ème','4ème','5ème','6ème','7ème','8ème','9ème','10ème','11ème','12ème','13ème','14ème','15ème','16ème','17ème','18ème','19ème'],
reversed: false,
labels: {
rotation: -90
}
},
yAxis: {
title: {
text: 'Température moyenne'
},
plotLines: [{
value: 0,
width: 1,
color: '#FF0000'
}]
},
tooltip: {
animation: true,
enabled: true,
borderColor: 'royalblue',
borderWidth: 1,
backgroundColor: '#2e2e2e',
headerFormat:'<table cellspacing="2" cellpadding="0" style="font-size:12px"><tr><td colspan="4" class="TD_Header_Tooltip">
{point.x} - {point.key}</td></tr>',
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: [{
dataSorting: {
enabled: true
},
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.2f}°C',
y: 10, // 10 pixels down from the top
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
}
},
name: 'Température moyenne',
data: Donnee,
pointPadding: 0,
yAxis: 0,
type: 'column',
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y1: 1 },
stops: [
[0, 'rgba(189, 195, 199, .7)'],
[1, 'rgba(255, 0, 0, .8)']
]
},
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,2,","," ")+'</b></td>'
s = s +'<td align="left"> °C</td></tr>';
return s;
},
},
},
]
},
function(chart) { // on complete
chart.renderer.image('../Images/logo-graphique/logo-jarny.gif', 8, 8, 102, 50)
.add();
});
});