HighCharts趋势图动态设置Series数组(根据后台决定具体几个data), 并动态刷新数据

最近要做一些前台的数据展示, 用到了HighCharts.我这次做的是趋势图，涉及到动态刷新，因为涉及到了动态刷新，为了便于记忆，在这里记录一下。

在Highcharts中文网上有相应的演示demo，一般你所需要的图的样式都可以找到。可以在demo基础上进行修改。

附Highcharts中文网：http://www.hcharts.cn/demo/index.php

首先，是引入HIghcharts绘图相关的js文件和jQuery.js。

接下来，把HIghcharts动态刷新的格式拷贝并作修改：

var chart;
$(document).ready(
function() {
Highcharts.setOptions({
global : {
useUTC : false
}
});
chart = new Highcharts.Chart({
chart : {
renderTo : 'container', //图表放置的容器，DIV
defaultSeriesType : 'spline', //图表类型为曲线图
events : {
load : function() {
var series = this.series;
setInterval(function() {
$.ajax({
type: "POST",
url: "cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
success: function(result){
results = eval("(" + result + ")");
var size = results.length;

for(var i=0; i<series.length; i++) {
for(var j=0; j<size; j++) {
var name = results[j].ip;
var time = results[j].time;
var value = results[j].value;
if(series[i].name == name){
series[i].addPoint([(new Date()).getTime(), value], true, true);
}
}

}
}
}, false);
}, 1000*5);
}
}
},
title : {
text : 'CPU使用率走势图' //图表标题
},
xAxis : { //设置X轴
type : 'datetime', //X轴为日期时间类型
tickPixelInterval : 75
//X轴标签间隔
},
yAxis : { //设置Y轴
title : 'value',
min : 0
//Y轴最小值
},
tooltip : {//当鼠标悬置数据点时的提示框
formatter : function() { //格式化提示信息
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2)+ '%';
}
},
legend : {
//                      enabled : false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
//              y: 130,
borderWidth: 0
//设置图例不可见
},
exporting : {
enabled : false
//设置导出按钮不可用
},
credits : {
enabled: false
},
series : create()
});
});

重点是chart里面的event属性，series属性。注意，此时：series属性是一个js函数的返回值，需用“js函数名()”来取得。

HighCharts中文网demo里面，series是这样的：

series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]

这时，图表中只有一条折线，且x、y轴数据都不能确定，需要在这里添加ajax方法从后台获取数据，从而决定图表折线（曲线）条数，x、y轴数据等。所以就用到了create（）方法。如下所示：

function create() {
var series = new Array();
$.ajax({
type: "POST",
url: "/cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
success: function(result){
results = eval("(" + result + ")");
var size = results.length;
for(var i=0; i<size; i++) {
var name = results[i].ip;
var time = results[i].time;
var value = results[i].value;

//        var date2 =  new Date(time);   //将时间转化为时间戳
//        var time_str = date2.getTime();
var data = function() {
var data = [],
//  time = result.time,//x轴数据由后台决定。
time = (new Date()).getTime(),
i;
for(i=-59; i<=0; i++) {
data.push({
x: time + i * 5000,
y: value
});
}
return data;
}();
series.push({"name": name, "data": data});
}
}
}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示
return series;
}

上面代码块中的：series.push({“name”: name, “data”: data});就是在series【】数组中添加数据，且通过根据for循环生成多条”曲线”。并放入数据。

而chart里面的event属性, 则是每隔一段时间(1000*5=5s)刷新页面数据，方法主要是通过ajax请求后台，得到相应数据并且处理相应数据后，放到一个数据结构或json对象中。

events : {
load : function() {
var series = this.series;
setInterval(function() {
$.ajax({
type: "POST",
url: "/cpuMemmaryMonitor/selectCpuDatas.do?userid="+userid",
async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
success: function(result){
results = eval("(" + result + ")");
var size = results.length;

for(var i=0; i<series.length; i++) {
for(var j=0; j<size; j++) {
var name = results[j].ip;
var time = results[j].time;
var value = results[j].value;
if(series[i].name == name){
series[i].addPoint([(new Date()).getTime(), value], true, true);
}
}

}
}
}, false);
}, 1000*5);
}
}

效果图：

其中，右侧的图例名称是series[i].name