轉自：http://www.tuicool.com/articles/yMRzEj
第二個例子
這個和前面是一樣的方式，這裏做了多個引用，也就是可以畫多條線路
這個圖不是我這的，但下面的代碼是行的通的，可以放到一個js裏面引用，然後通過ajax傳值過去，在前端進行數據的渲染。
var charts = new Array();
var serverCount = 6;
var lastTimes = new Array();
var max = ${params.int("max")?:120};
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
for (var i = 0; i < serverCount; i++) {
charts[i] = new Highcharts.Chart({
chart: {
renderTo: 'container' + i,
type: 'spline',
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series;
var serverIndex = i;
lastTimes[serverIndex] = 0;
var loadData = function() {
$.getJSON("http://${request.serverName}:${request.serverPort}${request.contextPath}/toolkits/queryStatistics.gsp", {"lasTime":lastTimes[serverIndex],"proxy":true,"index":serverIndex,"max":max}, function(data) {
for (var k = 0; k < series.length; k++) {
for (var j = 0; j < data[k].length; j++) {
var point = data[k][j];
var isShift = series[k].data.length >= max;
console.log("series " + k + ".data.length=" + series[k].data.length);
var lastTime = 0;
if (series[k].data.length > 0)
lastTime = series[k].data[series[k].data.length - 1].x;
if (point[0] > lastTime)
series[k].addPoint([point[0],point[1]], true, isShift);
lastTimes[serverIndex] = point[0];
}
}
})
};
loadData();
setInterval(loadData, 60000);
}
}
},
title: {
text: '訪問量實時監控'
},
xAxis: [
{
type: 'datetime',
tickPixelInterval: 120
}
],
yAxis: [
{
title: {
text: '總請求/分鐘',
style: {
color: '#3E576F'
}
}
},
{
title: {
text: '平均響應時間',
style: {
color: '#00AA00'
}
},opposite:true
}
],
plotOptions: {
spline: {
marker:{
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}
}
},
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: {
enabled: true
},
exporting: {
enabled: false
},
series: [
{
name: '總請求數',
data: []
},
{
name: '錯誤請求數',
data: []
},
{
name: '平均響應時間',
yAxis:1,
data: []
}
]
});
}
})