jquery结合Highcharts插件实现动态数据仪表盘图形化显示效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

仪表盘显示效果如图：

方法一效果图：

方法二效果图（插件版本4.0.1）：

js代码如下：

$(function(){ //方法一： var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'gauge' // backgroundColor: "#f3f3f3" }, title: { text: 'CPU使用情况（%）' }, pane: { startAngle: -150, endAngle: 150, background: [{ backgroundColor: '#DDD', borderWidth: 0, outerRadius: '107%', innerRadius: '103%' }] }, // the value axis yAxis: { min: 0, max: 100, minorTickInterval: 'auto', minorTickWidth: 1, minorTickLength: 10, minorTickPosition: 'inside', minorTickColor: '#444', tickPixelInterval: 60, tickWidth: 2, tickPosition: 'inside', tickLength: 10, tickColor: '#444', labels: { step: 2, rotation: 'auto' }, title: { text: '%', style: { color: '#08c', fontSize: "18px" } }, plotBands: [{ from: 0, to: 60, color: '#55BF3B' // green }, { from: 60, to: 80, color: '#DDDF0D' // yellow }, { from: 80, to: 100, color: '#DF5353' // red }] }, credits: { enabled: false }, series: [{ name: 'CPU使用率', color: '#08c', data: [80], tooltip: { valueSuffix: ' %' } }] }, // Add some life function(chart) { setInterval(function() { var point = chart.series[0].points[0], newVal, inc = Math.round((Math.random() - 0.5) * 10); newVal = point.y + inc; if (newVal < 0 || newVal > 100) { newVal = point.y - inc; } point.update(newVal); }, 3000); }); //方法二： var gaugeOptions = { chart: {
type: 'solidgauge'
}, title: null, pane: {
center: ['50%', '50%'],
size: '100%',
startAngle: -90,
endAngle: 270,
borderWidth: 1,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#fff',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
}, tooltip: {
enabled: false
}, credits: {
enabled: false
}, // the value axis yAxis: {
stops: [
[0.5, '#55BF3B'], // green
[0.7, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 1,
minorTickInterval: null,
tickPixelInterval: 360,
tickWidth: 0,
title: {
y: 30
},
labels: {
enabled: false
}
}, plotOptions: {
solidgauge: {
dataLabels: {
y: 0,
borderWidth: 0,
useHTML: true
}
}
}
}; // CPU使用率
$('#SYS_DIV_cpuChart').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'CPU使用率'
}
}, series: [{
name: 'CPU使用率',
data: [0],
dataLabels: {
format: '<div style="text-align:center;font-size:20px;"><span style="color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || '#0092FF') + '">{y}</span>' +
'<span style="color:#0092FF">%</span></div>'
},
tooltip: {
valueSuffix: ' %'
}
}] })); })