可根据需求传入data进行动态赋值。
function drawSpeedChat(data) {
var max = 5120;
Highcharts.chart("speed_chart", {
chart : {
type : 'gauge',
plotBorderWidth : 0,
plotShadow : false
},
title : {
text : '平均上传速度'
},
credits : {
enabled : false
},
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%'
}, {
}, {
backgroundColor : '#DDD',
borderWidth : 0,
outerRadius : '105%',
innerRadius : '103%'
} ]
},
yAxis : {
min : 0,
max : max,
//minorTickInterval : 'auto',
minorTickWidth : 1,
minorTickLength : 10,
minorTickPosition : 'inside',
//minorTickColor : '#666',
tickPixelInterval : 30,
//tickWidth : 2,
tickPosition : 'inside',
tickLength : 13,
tickColor : '#666',
tickPositioner: function(){
return [0, max * 0.1, max * 0.3, max * 0.7, max]
},
labels : {
//step : 2,
distance: 15,
rotation : 'auto',
formatter: function(){
if(this.value < 1024){
return this.value + 'kb';
} else{
return (this.value/1024) + 'mb';
}
}
},
title : {
text : 'kb/s'
},
plotBands : [{
from : 0,
to : max * 0.1,
color : '#D3D3D3' // green
}, {
from : max * 0.1,
to : max * 0.3,
color : '#55BF3B' // green
}, {
from : max * 0.3,
to : max * 0.7,
color : '#DDDF0D' // yellow
}, {
from : max * 0.7,
to : max ,
color : '#DF5353' // red
}]
},
series : [ {
name : 'Speed',
data : [ 407],
tooltip : {
valueSuffix : ' kb/s'
},
dataLabels: {
crop: false,
overflow: 'none'
}
} ]
});
效果如下：
}