代码如下：
页面 js 引用：
创建一个div ：
javascript. 代码：
复制代码
$(function () {
var k=0;
$(document).ready(function() {
$('#syscharts').highcharts({
chart: {//设置背景色
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'rgb(0, 0, 0)'],
[1, 'rgb(0, 0, 0)']
]
},
//设置放大的方向 可以是x或者y
zoomType: 'xy',
//设置绘图区域边框颜色和宽度
plotBorderColor: '#008800',
plotBorderWidth: 0,
shadow:true,
//设置动画效果
animation: Highcharts.svg,
//左边距和右边距
marginRight: 20,
borderColor: '#008800',
borderWidth: 1,
events: {
load: function() {
var series = this.series[0];
var ld = 0;
setInterval(function() {
var x =(k++);
var y = Math.random()*100;
while(y-old>=10 || y - old <= -10){
y = Math.random()*100;
}
ld = y;
series.addPoint([x, parseInt(y)], true, true);
}, 1000);
}
}
},
title: {
text:"CPU",
style. {
color: '#FFFFFF',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
tickInterval: 5,
gridLineColor: '#008800',
gridLineWidth: 1,
lineWidth:0,
labels:{
formatter: function() { return ""; },
step:1
},
},
yAxis: [{
tickInterval: 10,
gridLineColor: '#008800',
gridLineWidth: 1,
min:0,
max:100,
labels: {
formatter: function() {
return this.value +"%";
},
style. {
color: '#FFFFFF'
}
},
title: { text: '' },
opposite: false
}],
tooltip: {
shared: false,
valueDecimals : 0
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
},
line: {
marker: {
enabled: false,
symbol: 'circle',
radius: 1,
states: {
hover: {
enabled: true
}
}
}
}
},
credits:{ enabled:false},
series: [{
name: 'CPU使用率',
type: 'area',//line 则为不填充折线样式
color: '#0000FF',
yAxis: 0,
data: (function() {
var data = [], i;
for (i = -300; i <= 0; i++) {
data.push({
x: i,
y: 0
});
}
return data;
})()
}]
});
});
});