highcharts是基于javascript的高交互的图表封装。目前highcharts可以非常轻松的画出线图，列图，饼图，传播图，区域图等。能兼容主流浏览器(包括IE6)。相关的资料：
官网：http://www.highcharts.com/
demo:http://www.highcharts.com/demo
起步：http://www.highcharts.com/documentation/how-to-use
文档：http://www.highcharts.com/ref/
下面是今天本人开发的一个系统监控界面：效果如下：
下面是代码：
代码很长哦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="highcharts.js" ></script>
<title>图表:线图</title>
<style type="text/css">
.clearfix:after {}{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {}{display: inline-block;} /**//* for IE/Mac */
.cpu{}{width:200px;height:200px; display:block;float:left;margin-right:10px;}
.memory{}{height:200px; width:830px; margin-top:10px;}
</style>
</head>
<body>
<div class="clearfix">
<div id="cpu1" class="cpu"></div>
<div id="cpu2" class="cpu"></div>
<div id="cpu3" class="cpu"></div>
<div id="cpu4" class="cpu"></div>
</div>
<div class="memory" id="memory">
</div>
<script type="text/javascript">
//定义皮肤
Highcharts.theme = {
colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],//备用线条颜色
chart: {
backgroundColor: {//渐变背景
linearGradient: [0, 0, 0, 200],
stops: [
[0, 'rgb(96, 96, 96)'],
[1, 'rgb(16, 16, 16)']
]
},
borderWidth: 0,
borderRadius: 5,
plotShadow: false,//plot绘图区域样式
plotBorderWidth: 1,
plotBorderColor:"#444"
},
title: {//标题样式
style: {
color: '#FFF',
font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
xAxis: {//x轴样式
gridLineWidth: 1,
gridLineColor:"#008040",
lineWidth: 0,
labels: false,
tickWidth:0,
title: {
style: {
color: '#fff',
font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
yAxis: {//y
gridLineWidth: 1,
gridLineColor:"#008040",
lineWidth: 0,
tickWidth: 0,
labels: {
style: {
color: '#fff'
}
},
title:false
},
plotOptions: {//画图选项
line: {
dataLabels: {
color: '#CCC'
},
marker: {//标记圆点样式
radius:2
},
lineWidth:1,
color:"#00ff00"
}
},
tooltip: false,
legend:false,
exporting: false
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
global: {
useUTC: false
}
});
var lineoptions={
credits:{enabled:false},//不显示Highcharts的链接
chart: {
renderTo: 'cpu1',
defaultSeriesType: 'line',
animation:false,//不显示动画(性能)
events: {
load: function() {
//每秒生成随机数填充
var series = this.series[0];
setInterval(function() {
var d = new Date();
d.setMilliseconds(0);
var x = d.getTime(), // current time with 0 milliseconds
y = parseInt(Math.abs(Math.random()*100),10);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'CPU1使用记录(%)'
},
xAxis: {
type: 'datetime',//x轴数据类型 时间
tickInterval: 5 * 1000 // 5 seconds tick，x轴竖线间距
},
yAxis: {
min:0,
max:100,//y轴最大值
tickInterval:20
},
series: [{
data: (function() {//初始数据填充
var d = new Date();
d.setMilliseconds(0);
var data = [],
time = d.getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})()
}]
};
$(document).ready(function() {
var cpu1 = new Highcharts.Chart(lineoptions);
lineoptions.chart.renderTo="cpu2";
lineoptions.title.text="CPU2使用记录(%)";
var cpu2 = new Highcharts.Chart(lineoptions);
lineoptions.chart.renderTo="cpu3";
lineoptions.title.text="CPU3使用记录(%)";
var cpu3 = new Highcharts.Chart(lineoptions);
lineoptions.chart.renderTo="cpu4";
lineoptions.title.text="CPU4使用记录(%)";
var cpu4 = new Highcharts.Chart(lineoptions);
lineoptions.chart.renderTo="memory";
lineoptions.title.text="内存使用记录(G)";
lineoptions.chart.events.load=function(){
var series = this.series[0];
setInterval(function() {
var d = new Date();
d.setMilliseconds(0);
var x = d.getTime(), // current time with 0 milliseconds
y = Math.abs(Math.random()*8);
series.addPoint([x, y], true, true);
}, 1000);
}
lineoptions.series.data = (function() {
var d = new Date();
d.setMilliseconds(0);
var data = [],
time = d.getTime(),
i;
for (i = -52; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})();
lineoptions.yAxis.max=8;
lineoptions.yAxis.tickInterval=1;
lineoptions.xAxis.tickInterval=1000;
lineoptions.plotOptions={line:{lineWidth:2,color:"#0080ff",marker:{radius:4}}};
var memory = new Highcharts.Chart(lineoptions);
});
</script>
</body>
</html>
代码下载：点击此处下载