使用HighCharts描绘多个Y轴的动态曲线。

调试了一整天，终于显示出来了。

详细例子参照官网的demo：http://www.hcharts.cn/demo/index.php

在这只贴出关键部分的JS代码

1. chart （就是在events的load里写一个实时获取的方法。通过json调用去后台拉新数据加到series里）

chart: {
renderTo: 'chart_spline', //图表放置的容器，DIV
defaultSeriesType: 'spline', //图表类型为曲线图
events: {
load: function () {
//获取series对象
var a= this.series[0];
var b= this.series[1];
var c= this.series[2];
setInterval(function () {
//add new item from json request to a
$.getJSON(
"/xxxxxxxxxxxxxxxx/",
function (data) {
$.each(data, function (k, v) {
var x = (new Date()).setSeconds(0), // 当前时间
y = v.value; //Math.random() * 100;
a.addPoint([x, y], true, true);
});
});

//add new item from json request to b
$.getJSON(
"/xxxxxxxxxxxxxxxx/",
function (data) {
$.each(data, function (k, v) {
var x = (new Date()).setSeconds(0), // 当前时间
y = v.value; //Math.random() * 100;
b.addPoint([x, y], true, true);
});
});

//add new item from json request to c
$.getJSON(
"/xxxxxxxxxxxxxxxx/",
function (data) {
$.each(data, function (k, v) {
var x = (new Date()).setSeconds(0), // 当前时间
y = v.value; //Math.random() * 100;
c.addPoint([x, y], true, true);
});
});
},
//每隔60秒钟，图表更新一次
60000);
}
}
},

2. series (就是图的折线数据，可以只提供Y值) 这里提供折线的初始数据，同样可以写个方法去后台抓初始数据。

series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}]

3. tooltip 把这个也拿出来讲，是因为当多个折线的单位不一样时，可以通过判断当前点的series的命名来区分，即第2点定义的name。

tooltip: {//当鼠标悬置数据点时的提示框
formatter: function () { //格式化提示信息
var info = '<b>' + Highcharts.dateFormat('%H:%M:%S', this.x) + '</b>';

if (this.series.name == 'Tokyo') {
info += '<br/>' + this.series.name + ': ' +
this.y + '%';//单位
};
if (this.series.name == 'New York') {
info += '<br/>' + this.series.name + ': ' +
this.y + '℃';//单位
};
if (this.series.name == 'Berlin') {
info += '<br/>' + this.series.name + ': ' +
this.y + '＄';//单位
};

return info;
},

},