您的位置:首页 > 其它

highcharts如何动态获取数据

2015-07-08 11:21 471 查看
<script type="text/javascript">

$(function () {

$(document).ready(function() {

Highcharts.setOptions({

global: {

useUTC: false

}

});

var chart;

var url = "<%=root%>/virtual-machine!getCpuLoads.action?ip=${ipAddress}";

//+$('#hide').val();

$('#container').highcharts({

chart: {

type: 'spline',

animation: Highcharts.svg, // don't animate in old IE

marginRight: 10,

events: {

load: function() {

// set up the updating of the chart each second

var series = this.series[0];

setInterval(function() {

var x = (new Date()).getTime(); // current time

var y;

$.get(url, function(result){

if(!result)return;

y = parseFloat(result);

series.addPoint([x, y], true, true);// 为坐标赋值

});

}, 1000);

}

}

},

title: {

text: 'CPU使用记录'

},

xAxis: {

type: 'datetime',

tickPixelInterval: 150

},

yAxis: {

tickInterval: 20, //自定义刻度

max:100,//纵轴的最大值

min: 0,//纵轴的最小值

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: {

enabled: false

},

exporting: {

enabled: false

},

series: [{

name: 'CPU使用率',

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: 0

});

}

return data;

})()

}]

});

});

});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: