Salut à tous
Bien JP les tableaux sont la solutions
Pour les apostrophes c'est une solution que tu as trouvé.
Ma solution est d'écrire les mois normalement en PHP mais la différence ce fait lors de l'encodage json. Voici la ligne de commande
Code : Tout sélectionner
eval(<?php echo "'var tabmois1 = ".json_encode($tabmois1, JSON_HEX_QUOT | JSON_HEX_APOS)."'" ?>);
Pour les 1er du mois, c'est la bonne solution.
Pour le nombre de jours à afficher en fonction du mois, je ne sait pas si ta solution fonctionne, mais je ne procède pas comme cela.
Je créer une variable avec mktime, ensuite je la teste avec la fonction PHP date("L") qui teste si l'année est bissextile ou non. La fonction retourne 1 si l'année est bissextile et 0 dans le cas contraire.
En fonction de cela, je défini un tableau. duquel j’extrais le nombre de jour à tracer ($nbjat)
Code : Tout sélectionner
$moisanselect=mktime(0, 0, 0, $moisencours, 1, $anencours);
if(date("L",$moisanselect)==1){
$nbjm=array('01'=>31,'02'=>29,'03'=>31,'04'=>30,'05'=>31,'06'=>30,'07'=>31,'08'=>31,'09'=>30,'10'=>31,'11'=>30,'12'=>31);
}
else{$nbjm=array('01'=>31,'02'=>28,'03'=>31,'04'=>30,'05'=>31,'06'=>30,'07'=>31,'08'=>31,'09'=>30,'10'=>31,'11'=>30,'12'=>31);
}
$nbjat=$nbjm[$moisencours];
J'encode en json cette variable $nbjat puis comme tu l'a fait dans ton code Highchart, je défini la valeur max de l'xAxis.
Attention cependant, lorsque l'on encode cette variable, il faut lui retirer 1 (l'xAxis commence à 0 et non pas à 1)
Code : Tout sélectionner
eval(<?php echo "'var nbjat = ".json_encode($nbjat-1)."'" ?>);
Code : Tout sélectionner
xAxis: {
categories: dLabelj,
max:nbjat,
labels: {
rotation: 0,
align: 'center',
style: {
fontSize: '6px',
fontFamily: 'Verdana, sans-serif'
}
}
},
Pour le tooltip, ce sont des balises HTML (c'est un tableau) insérés dans du javascript et avec les mots clés propre à Highcharts.
Je m'explique
useHTML: true, : On dit à Highcharts que l'on va utiliser du HTML (sinon, ça marche pas)
formatter: function() { : c'est une fonction javaScript qui s'appelle formatter dont le but est de mettre en forme la bulle. Çà fait partie du code Highcharts.
var s = '<span style="font-size:10px">' + xlabel_j_ord[this.x]+' '+tabmois2[moisencours-1]+ '</span><table width="110px">';
On déclare ici la variable s (ça peut être n'importe quoi d'autre). En fait, cette variable s contient tout le code HTML du tooltip.
Dans le code on voit s = s+ ; C'est simplement pour scinder le code pour qu'il soit plus lisible. On peut très bien écrire tous le code d'un coup
Ensuite,
<span></span> style <table> width sont des balises HTML
xlabel_j_ord[this.x] pointe dans le tableau
xlabel_j_ord l'intitulé du jour (1er ou 2 ... 31). l'index est donné par
[this.x]
Dans un tooltip normal on utilise dans le header {point.key}. [this.x] est son équivalent dans les tooltips utilisant le HTML
tabmois2[moisencours-1] pointe dans le tableau tabmois2 le nom du mois en cours
$.each(this.points, function(i, point) {
Ça, c'est du jQuery. C'est un itérateur qui remplace une boucle for next.
En clair, ça veut dire, pour chaque point y de chaque point x (il peut y avoir plusieurs points y pour chaque point x car il peut y avoir plusieurs courbes (température, windchill, etc..) ayant en commun le même point x), exécuter la fonction (de mise en forme du texte). C'est expliqué ici
https://learn.jquery.com/using-jquery-core/iterating/
La couleur du point avant le nom de la série de données sont déterminé par les mot clés Highcharts
point.serie.color et
point.serie.name
A savoir, que sur un graphique en colonne avec un dégradé de couleur (comme c'est le cas ici sur le graphique de JP) le point de couleur avant le nom de la série n'apparait pas.
Highcharts.numberFormat(point.y,1,","," ") : Ceci est une fonction Highcharts pour limiter l'affichage de la valeur à 1 chiffre après la virgule.
Ensuite on retrouve les balises HTML
<tr> (ligne), <td> (colonne) <b> (bold(gras))
Dans ce genre de tooltip, l'on peut utiliser toutes sortes de balise HTML. Regardez dans le code des rapports NOAA, je trace des lignes dans les tooltips.
Enfin dans les 2 dernières lignes, l'on retrouve la balse HTML de fermeture du tableau
</table> et return s qui est le code JavaScript qui renvoie le résultat à afficher
Alors pourquoi utiliser ce type de tooltip bien plus compliqué que l'autre? Tout simplement parce-que c'est bien plus flexible que l'autre.
Dans ce genre de tooltip, l'on peut personnaliser la bulle à souhait, ce qui n'est pas le cas avec l'autre .
Avec un tooltip normal, il y a un headerFormat, un pointFormat et un footerFormat. Le footerFormat n'accepte que des chaines de caractères. on ne peut pas y passer de variables
Le headerFormat n'accepte que 3 variables point.key, series.name et series.color. Pour en utiliser d'autres, c'est la croix et la bannière et il faut utiliser d'autres options comme xDateFormat
Pour le pointFormat, c'est pareil. Le nombre de variables est très limité. Il accepte généreusement tooltip.valuePrefix et tooltip.valueSuffix
Voila, j'epère avoir été clair
A+
Pascal