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 '' + this.series.name + '
' +

Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' +

Highcharts.numberFormat(this.y, 2);

}

},

legend: {

enabled: true

},

exporting: {

enabled: false

},

series: [

{

name: '总请求数',

data: []

},

{

name: '错误请求数',

data: []

},

{

name: '平均响应时间',

yAxis:1,

data: []

}

]

});

}

})