highcharts聯合jquery ajax 後端取數據監控MYSQL（下）

轉自：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: []

}

]

});

}

})