Gauge

Ce forum est dédié aux discussions qui concernent les graphiques réalisés avec la librairie Highcharts, Une question, un bug ?

Modérateurs : jturlier, Météo Villarzel

Répondre
JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Gauge

Message par JP54 » 13 janv. 2022, 16:50

Bonjour,
J'ai créé une gauge qui indique la tendance de la pression atmosphérique.
J'aurai voulu afficher le signe + dans le tooltip et dans le petit rectangle en dessous de l'aiguille quand la tendance de la pression est positive donc quand elle est est à la hausse.
J'ai essayé dans le fichier php en faisant une condition, ça ne fonctionne pas, J'ai également essayé avec une fonction JS, mais sans succès.
Quelqu'un aurait-il une idée.
Mon code JS

Code : Tout sélectionner

<script type="text/javascript">

                              $(function () {
                              $.getJSON('data-pression-tendance-gauge.php' , function(data) {
	
                                  $('#gaugetemp').highcharts({
	
	                                  chart: {
	                                      type: 'gauge',
	                                      plotBackgroundColor: null,
		                                  plotBackgroundImage: 'jauge_1.png',
	                                      plotBorderWidth: 0,
	                                      plotShadow: false
	                                  },
	    
	                                  title: {
	                                      text: undefined

	                                  },
		                              credits: {
                                          text: '© Météo Jarny',
                                          href: '',
			                              position: {
	                              align: 'center',
	                              x: 0,
	                              verticalAlign: 'bottom',
	                              y: -35
                              }
			                              },
	    
	                                  pane: {
	                                      startAngle: -150,
	                                      endAngle: 150,
	                                      background: [{
	                                          backgroundColor: {
	                                              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                                              stops: [
	                                                  [0, '#FFF'],
	                                                  [1, '#333']
	                                              ]
	                                          },
	                                          borderWidth: 0,
	                                          outerRadius: '109%'
	                                      }, {
	                                          backgroundColor: {
	                                              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                                              stops: [
	                                                  [0, '#333'],
	                                                  [1, '#FFF']
	                                              ]
	                                          },
	                                          borderWidth: 1,
	                                          outerRadius: '107%'
	                                      }, {
	                                        // default background
	                                      }, {
	                                          backgroundColor: {
	                                              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                                              stops: [
	                                                  [0, '#acafb1'],
	                                                  [1, '#e0e3e6']
	                                              ]
	                                          },
	                                          borderWidth: 0,
	                                          outerRadius: '105%',
	                                          innerRadius: '0%'
	                                      }]
	                                   },	      
	                                     // the value axis
	                                  yAxis: {
	                                      min: -10,
	                                      max: 10,
		                                style:{
			                              color: '#000000'
										  },
										  
	                                      minorTickInterval: 'auto',
	                                      minorTickWidth: 1,
	                                      minorTickLength: 10,
	                                      minorTickPosition: 'inside',
	                                      minorTickColor: '#666',	
	                                      tickPixelInterval: 50,
	                                      tickWidth: 2,
	                                      tickPosition: 'inside',
	                                      tickLength: 10,
	                                      tickColor: '#666',
	                                      labels: {
	                                          step: 1,
	                                          rotation: 'auto'
	                                      },
	                                      title: {
	                                          text: '',
				                              verticalAlign: 'bottom',
                                          y: 2
				
	                                      },
	                                      plotBands: [{
	                                    //      from: -15,
	                                    //      to: -14.5,
	                                    //      color: 'rgba(204, 0, 0, 0.8)'
	                                    //  },{
	                                    //      from: -14.5,
	                                    //      to: -14,
	                                    //      color: 'rgba(204, 9, 0, 0.8)'
	                                    //  },{
	                                    //      from: -14,
	                                    //      to: -13.5,
	                                    //      color: 'rgba(204, 19, 0, 0.8)'
	                                    //  },{
	                                    //      from: -13.5,
	                                    //      to: -13,
	                                    //      color: 'rgba(204, 28, 0, 0.8)'
	                                    //  },{
	                                    //      from: -13,
	                                    //      to: -12.5,
	                                    //     color: 'rgba(204, 37, 0, 0.8)'
	                                    //  },{
	                                    //     from: -12.5,
	                                    //      to: -12,
	                                    //      color: 'rgba(204, 46, 0, 0.8)'
	                                    //  },{
	                                    //      from: -12,
	                                    //      to: -11.5,
	                                    //      color: 'rgba(204, 56, 0, 0.8)'
	                                    //  },{
	                                    //      from: -11.5,
	                                    //      to: -11,
	                                    //      color: 'rgba(204, 65, 0, 0.8)'
	                                    //  },{
	                                    //      from: -11,
	                                    //      to: -10.5,
	                                    //      color: 'rgba(204, 74, 0, 0.8)'
	                                    //  },{
	                                    //      from: -10.5,
	                                    //      to: -10,
	                                    //      color: 'rgba(204, 83, 0, 0.8)'
	                                    //  },{
	                                          from: -10,
	                                          to: -9.5,
	                                          color: 'rgba(204, 93, 0, 0.8)'
	                                      },{
	                                          from: -9.5,
	                                          to: -9,
	                                          color: 'rgba(204, 102, 0, 0.8)'
	                                      },{
	                                          from: -9,
	                                          to: -8.5,
	                                          color: 'rgba(204, 111, 0, 0.8)'
	                                      },{
	                                          from: -8.5,
	                                          to: -8,
	                                          color: 'rgba(204, 121, 0, 0.8)'
	                                      },{
	                                          from: -8,
	                                          to: -7.5,
	                                          color: 'rgba(204, 130, 0, 0.8)'
	                                      },{
	                                          from: -7.5,
	                                          to: -7,
	                                          color: 'rgba(204, 139, 0, 0.8)'
	                                      },{
	                                          from: -7,
	                                          to: -6.5,
	                                          color: 'rgba(204, 148, 0, 0.8)'
	                                      },{
	                                          from: -6.5,
	                                          to: -6,
	                                          color: 'rgba(204, 158, 0, 0.8)'
	                                      },{
	                                          from: -6,
	                                          to: -5.5,
	                                          color: 'rgba(204, 167, 0, 0.8)'
	                                      },{
	                                          from: -5.5,
	                                          to: -5,
	                                          color: 'rgba(204, 176, 0, 0.8)'
	                                      },{
	                                          from: -5,
	                                          to: -4.5,
	                                          color: 'rgba(204, 185, 0, 0.8)'
	                                      },{
	                                          from: -4.5,
	                                          to: -4,
	                                          color: 'rgba(204, 195, 0, 0.8)'
	                                      },{
	                                          from: -4,
	                                          to: -3.5,
	                                          color: 'rgba(204, 204, 0, 0.8)'
	                                      },{
	                                          from: -3.5,
	                                          to: -3,
	                                          color: 'rgba(204, 209, 5, 0.8)'
	                                      },{
	                                          from: -3,
	                                          to: -2.5,
	                                          color: 'rgba(204, 213, 9, 0.8)'
	                                      },{
	                                          from: -2.5,
	                                          to: -2,
	                                          color: 'rgba(204, 218, 14, 0.8)'
	                                      },{
	                                          from: -2,
	                                          to: -1.5,
	                                          color: 'rgba(204, 223, 19, 0.8)'
	                                      },{
	                                          from: -1.5,
	                                          to: -1,
	                                          color: 'rgba(204, 227, 23, 0.8)'
	                                      },{
	                                          from: -1,
	                                          to: -0.5,
	                                          color: 'rgba(204, 232, 28, 0.8)'
	                                      },{
	                                          from: -0.5,
	                                          to: 0,
	                                          color: 'rgba(204, 236, 32, 0.8)'
	                                      },{
	                                          from: 0,
	                                          to: 0.5,
	                                          color: 'rgba(190, 238, 29, 0.8)'
	                                      },{
	                                          from: 0.5,
	                                          to: 1,
	                                          color: 'rgba(176, 239, 26, 0.8)'
	                                      },{
	                                          from: 1,
	                                          to: 1.5,
	                                          color: 'rgba(162, 241, 23, 0.8)'
	                                      },{
	                                          from: 1.5,
	                                          to: 2,
	                                          color: 'rgba(148, 243, 20, 0.8)'
	                                      },{
	                                          from: 2,
	                                          to: 2.5,
	                                          color: 'rgba(134, 245, 17, 0.8)'
	                                      },{
	                                          from: 2.5,
	                                          to: 3,
	                                          color: 'rgba(121, 246, 15, 0.8)'
	                                      },{
	                                          from: 3,
	                                          to: 3.5,
	                                          color: 'rgba(107, 248, 12, 0.8)'
	                                      },{
	                                          from: 3.5,
	                                          to: 4,
	                                          color: 'rgba(93, 250, 9, 0.8)'
	                                      },{
	                                          from: 4,
	                                          to: 4.5,
	                                          color: 'rgba(79, 252, 6, 0.8)'
	                                      },{
	                                          from: 4.5,
	                                          to: 5,
	                                          color: 'rgba(65, 253, 3, 0.8)'
	                                      },{
	                                          from: 5,
	                                          to: 5.5,
	                                          color: 'rgba(51, 255, 0, 0.8)'
	                                      },{
	                                          from: 5.5,
	                                          to: 6,
	                                          color: 'rgba(51, 246, 0, 0.8)'
	                                      },{
	                                          from: 6,
	                                          to: 6.5,
	                                          color: 'rgba(51, 236, 0, 0.8)'
	                                      },{
	                                          from: 6.5,
	                                          to: 7,
	                                          color: 'rgba(51, 227, 0, 0.8)'
	                                      },{
	                                          from: 7,
	                                          to: 7.5,
	                                          color: 'rgba(51, 218, 0, 0.8)'
	                                      },{
	                                          from: 7.5,
	                                          to: 8,
	                                          color: 'rgba(51, 209, 0, 0.8)'
	                                      },{
	                                          from: 8,
	                                          to: 8.5,
	                                          color: 'rgba(51, 199, 0, 0.8)'
	                                      },{
	                                          from: 8.5,
	                                          to: 9,
	                                          color: 'rgba(51, 190, 0, 0.8)'
	                                      },{
	                                          from: 9,
	                                          to: 9.5,
	                                          color: 'rgba(51, 181, 0, 0.8)'
	                                      },{
	                                          from: 9.5,
	                                          to: 10,
	                                          color: 'rgba(51, 172, 0, 0.8)'
	                                    //  },{
	                                    //      from: 10,
	                                    //      to: 10.5,
	                                    //      color: 'rgba(51, 162, 0, 0.8)'
	                                    //  },{
	                                    //      from: 10.5,
	                                    //      to: 11,
	                                    //      color: 'rgba(51, 153, 0, 0.8)'
	                                    //  },{
	                                    //      from: 11,
	                                    //      to: 11.5,
	                                    //      color: 'rgba(51, 144, 0, 0.8)'
	                                    //  },{
	                                    //      from: 11.5,
	                                    //      to: 12,
	                                    //      color: 'rgba(51, 134, 0, 0.8)'
	                                    //  },{
	                                    //      from: 12,
	                                    //      to: 12.5,
	                                    //      color: 'rgba(51, 125, 0, 0.8)'
	                                    //  },{
	                                    //      from: 12.5,
	                                     //     to: 13,
	                                    //      color: 'rgba(51, 116, 0, 0.8)'
	                                    //  },{
	                                    //      from: 13,
	                                    //      to: 13.5,
	                                    //      color: 'rgba(51, 107, 0, 0.8)'
	                                    //  },{
	                                    //      from: 13.5,
	                                    //      to: 14,
	                                    //      color: 'rgba(51, 97, 0, 0.8)'
	                                    //  },{
	                                    //      from: 14,
	                                    //      to: 14.5,
	                                    //      color: 'rgba(51, 88, 0, 0.8)'
	                                    //  },{
	                                    //      from: 14.5,
	                                    //      to: 15,
	                                    //      color: 'rgba(51, 79, 0, 0.8)'
	                                      }
										  ]
																					         
	                                  },
		                              plotOptions: {
			                              gauge: {
			                              	dial: {
				                               // dial=aiguille
				                              	  radius: '80%',
					                              backgroundColor: 'black',
					                              borderColor: 'black',
				                                  borderWidth: 1,
					                              baseWidth: 3,
					                              topWidth: 0,
					                              baseLength: '70%', // of radius
					                              rearLength: '20%'
				                              },pivot: {
				                              // centre aiguille
					                              radius: 10,
					                              borderWidth: 1,
					                              borderColor: 'gray',
					                              backgroundColor: {
						                              linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
						                              stops: [
							                              [0, 'white'],
							                              [1, 'gray']
						                              ]
					                              }	
				                              },dataLabels: {
                                                  enabled: true,
                                                  borderRadius: 5,
                                                  format: '{y} hPa/3h',
                                                  backgroundColor: 'rgba(252, 255, 197, 0.7)',
                                                  borderWidth: 1,
                                                  borderColor: '#AAA',
                                                  y: 15
                                              }
			                              }
		                              },
	                                  series: [{
	                                      name: 'Tendance pression',
	                                      data: data,
			                              tooltip: {
	                                          valueSuffix: ' hPa/3h'
	                                      }
	                                  }]	
	                              });	
                              });
                              });
                           
</script> 

Modifié en dernier par JP54 le 14 janv. 2022, 18:22, modifié 1 fois.
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

Avatar du membre
PascalWMR
Messages : 323
Enregistré le : 16 févr. 2014, 09:28
Localisation : CONFLANS EN JARNISY (F54800)
Contact :

Re: Gauge

Message par PascalWMR » 13 janv. 2022, 19:16

Salut Pascal

Regarde le code source de cette page https://www.monsite-meteo.eu/PC/G-HS-Pr ... lative.php
La courbe de tendance fait ce que tu demande.

Il faut utiliser la fonction pointFormatter:function() du tooltip de la série

A+
Pascal
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Image

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Gauge

Message par JP54 » 13 janv. 2022, 21:10

J'ai déjà essayé cette fonction mais sans y arriver, j'essaie à nouveau demain.
Par contre cette fonction sert pour le tooltip, mais elle ne sert pas pour l'affichage dans le petit rectangle en dessous de l'aiguille.
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Gauge

Message par JP54 » 14 janv. 2022, 18:21

C'est bon, j'y suis arrivé avec cette fonction pour le tooltip

Code : Tout sélectionner

	tooltip: {
		pointFormatter:function(){
			if(this.y < 0){
		        var prefix = "inférieure";
				var sign="";
			} else if (this.y > 0){
	            var prefix = "supérieure";
			    var sign="+";
		    } 						
			    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>'+sign+Highcharts.numberFormat(this.y,1,","," ")+'</b></td>'
			    s = s +'<td align="left"> hPa/3h</td></tr>';
				return s;
        },
	},
et avec la même fonction un peu modifié pour le dataLabels qui affiche la valeur dans le petit rectangle

Code : Tout sélectionner

	dataLabels: {
        enabled: true,
        borderRadius: 5,
		pointFormatter:function(){
		    if(this.y < 0){
			    var prefix = "inférieure";
				var sign="";
			} else if (this.y > 0){
				var prefix = "supérieure";
				var sign="+";
			} 						
			    var s= '<tr><td align="right"><b>'+sign+Highcharts.numberFormat(this.y,1,","," ")+'</b></td>'
			    s = s +'<td align="left"> hPa/3h</td></tr>';
				return s;
	    },
        backgroundColor: 'rgba(252, 255, 197, 0.7)',
        borderWidth: 1,
        borderColor: '#AAA',
        y: 15
    }

Merci Pascal de m'avoir mis sur la piste ;)
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

Répondre