$('#' + divID).highcharts({
chart: {
type: 'gauge',
backgroundColor: '#0F9BDE',
borderColor: '#0F9BDE',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0 },
stops: [
[0, '#0F9BDE'],
[0.5, '#26A3DE'],
[1, '#0C98DA']
]
},
plotBackgroundImage: null,
height: 250
}, exporting: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: ''
},
pane: [{
startAngle: -90,
endAngle: 90,
background: null,
center: ['50%', '90%'],
size: 300
}],
yAxis: [{
min: minValue,
max: maxValue,
tickInterval: tick,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20,
style: {
color: '#FFFFFF'
}
},
plotBands: [{
from: almMax,
to: maxValue,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}, {
from: minValue,
to: almMin,
color: '#882C25',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: '<div style="font-size:20px;color:#fff;">' + name + unit + '</div><br/><div style="font-size:32px;color:#1BFD2C;">' + (value == -99 ? "<div style=\"font-size:18px;color:#F70808;font-weight: bolder;\">无数据</div>" : value.toFixed(1)) + '</div>',
y: -30
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
backgroundColor: '#FFD700',
radius: '100%'
},
pivot: {
backgroundColor: "#fff"
}
}
},
series: [{
name: name,
tooltip: {
valueSuffix: unit
},
data: [0],
yAxis: 0
}],
tooltip: {
enabled: false,
valueDecimals: 0,
valuePrefix: '',
valueSuffix: ''
}
},
// Let the music play
function (chart) {
setChart(divID, chart);
if (chart.series) { // the chart may be destroyed
var left = chart.series[0].points[0];
if (value == -99)
left.update(0, false);
else
left.update(value, false);
//right.update(rightVal, false);
chart.redraw();
if(value!=-99)
removeRandomChart(chart, value, divID);
}
});
}
var intervalwd, intervalsd;
removeRandomChart = function (chart, value, divID) {
if (divID == 'chartContentWD') {
window.clearInterval(intervalwd);
intervalwd = setInterval(function () {
if (chart.series) {
var left = chart.series[0].points[0],
leftVal,
inc = Math.random() * 0.9 - 0.4;
leftVal = left.y + inc;
if (leftVal <= (value - 1) || leftVal >= (value + 1)) {
leftVal = left.y - inc;
}
left.update(leftVal, false);
chart.redraw();
}
}, 5000);
} else if (divID == 'chartContentsnSD') {
window.clearInterval(intervalsd);
intervalsd = setInterval(function () {
if (chart.series) {
var left = chart.series[0].points[0],
leftVal,
inc = Math.random() * 0.9 - 0.4;
leftVal = left.y + inc;
if (leftVal <= (value - 1) || leftVal >= (value + 1)) {
leftVal = left.y - inc;
}
left.update(leftVal, false);
chart.redraw();
}
}, 500);
}
}
createChart = function () {
shmev1.LoadBaseChart("chartContentWD", "温度", " ℃", -99, -40, 40, 5, -10, 25);
shmev1.LoadBaseChart("chartContentsnSD", "湿度", " %", -99, 0, 80, 5, 0, 60);
}
var charwd = '', chartsd = '';
setChart = function (divID,chart) {
if (divID == 'chartContentWD')
charwd = chart;
else if (divID == 'chartContentsnSD')
chartsd = chart;
}
changeChart = function (divID, value,name,unit) {
var chart = '';
if (divID == 'chartContentWD')
chart = charwd;
else if (divID == 'chartContentsnSD')
chart = chartsd;
//除了改变值还需改变提示信息 判断值为-99的情况
if (chart!='' && chart.series) {
var left = chart.series[0].points[0];
var strHtml = '<div style="font-size:20px;color:#fff;">' + name + unit + '</div><br/>';
strHtml += '<div style="font-size:32px;color:#1BFD2C;">' + (value == -99 ? "<div style=\"font-size:18px;color:#F70808;font-weight: bolder;\">无数据</div>" : value.toFixed(1)) + '</div>';
chart.yAxis[0].setTitle({
text: strHtml
});
left.update(value, false);
chart.redraw();
if (value != -99)
removeRandomChart(chart, value, divID);
}
}