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>