Highcharts之动态刷新——结合后台数据
弱思 2015-05-27
最近要求做前台的一些东西，用到了Highcharts。。其实在Highcharts中文网上有相应的演示demo，一般你所需要的图的样式都可以找到。难点在于实际开发中，需要的数据往往是要结合后台请求并响应的数据的。
附Highcharts中文网：
http://www.hcharts.cn/demo/index.php
而我这次做的是趋势图，涉及到动态刷新，做的过程还是花了一番功夫的，也补充和巩固了一点js的知识，为了纪念，把过程记录一下：
首先，是引入HIghcharts绘图相关的js文件和jQuery.js。
接下来，把HIghcharts动态刷新的格式拷贝并作修改：
$(function(){
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false//是否使用世界标准时间
}
});
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function() {
var series = this.series;
setInterval(function() {
var result = reload();
var x = result.time;
for(var i=0; i<series.length; i++) {
var y = result.y[i];
series[i].addPoint([x, y], true, true);
}
}, 1000*5);
}
}
},
title: {
text: 'ssssss'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150，
tickInterval: 60 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
//图例属性
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0
},
exporting: {
enabled: false
},
series: create()
});
});
});注意属性：global: { useUTC: false }是很重要的，对于我们在中国地区使用的系统而言，如果你这个设置为true或者不设置的话，会莫名其妙少了8个小时。因为如果你不设置为false,则是以世界标准时区为准，而由于中国所在时区为+8，所以经过 Highcharts 的处理后会减去8个小时。——这也是会偶尔出现的比较难以发现的问题。。（我就遇到了这个问题，一直在highcharts的dateFormat上找问题，搞了好久才发现这个问题~~~~）
重点是chart里面的event属性，series属性。注意，此时：series属性是一个js函数的返回值，需用“js函数名()”来取得。
而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的值都需要由后台决定。
create()方法的定义如下：
function create() {
var series = new Array();
$.ajax({
type: "POST",
url: "xxxx/yyyyy.json",
async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
success: function(result){
var ccc = result.key;
var size = ccc.length;
for(var i=0; i<size; i++) {
var name = ccc[i].yyyy;
var perTotalCnt = ccc[i].xxxx;
var data = function() {
var data = [],
time = result.time,
i;
for(i=-6; i<=0; i++) {
data.push({
x: aaaa,
y: zzzz
});
}
return data;
}();
series.push({"name": name, "data": data});
}
}
});
alert(series);
return series;
}1）其中，series.push({"name": name, "data": data});这一行就是在往series数组[]中push数据，从而生成格式中需要的series数组；
注意series是一个json的数组，哪怕你只有一个series,也是一个长度为1的数组。如：
function create() {
var series = {};
series.name = '个数';
series.data = [{'x':1448887500000,'y':50},{'x':1448887620000,'y':30},{'x':1448887680000,'y':31},{'x':1448887740000,'y':20},{'x':1448887800000,'y':20},{'x':1448887860000,'y':33},{'x':1448887920000,'y':39}];
var data = [];
data[0] = series;
return data;
}2）xAxis的tickInterval: 60 * 1000属性，表明x轴的显示间隔为分钟（单位为ms）,前提是你指定xAis的type: 'datetime'，这个属性决定了x轴显示的数据格式，如你指定为1分钟时，显示的是20:45，20.46，20:47等，同时也决定了显示的个数；
3）当你指定xAis的type为datetime时，point的x值是long值的毫秒数，表示从1970年01月01日00:00:00:000至今为止的毫秒数。
4）当出现Highcharts Errors #19的错误时，请检查加载时x轴的点个数是否超过999个（最高限制）；x轴上的两个点的时间间隔是否太大。
而这一部分：
events: {
load: function() {
var series = this.series;
setInterval(function() {
var result = reload();
var x = result.time;
for(var i=0; i<series.length; i++) {
var y = result.y[i];
series[i].addPoint([x, y], true, true);
}
}, 1000*5);
}
}则是每隔一段时间(1000*5=5s)刷新页面数据，并且通过循环生成多条"曲线"。其中reload()也是一个js函数的返回值：注：定义json对象的方法var json = {"key1": value1, "key2":value2} (reload方法就不贴了，也是通过ajax请求后台，得到相应数据并且处理相应数据后，放到一个数据结构或json对象中)。
其实，highcharts绘制chart也是典型的jquery语法·，所以我们取一个已经存在的highcharts对象时，可以直接用$("#divId").highcharts()即可，这符合Highcharts为对象属性赋值和取值的规则~~~~~~~~
效果（某一时刻）：
画图完毕。
