java ajax动态加载数据_java实现的highcharts与ajax结合动态实时获取数据更新图表

java实现的highcharts与ajax结合动态实时获取数据更新图表

博客分类：

java

jspjavajsphighchartsajax实时刷新

Highcharts Example

//x轴值

var categories=;

//y轴值

var data=;

//创建图表

var chart;

$(document).ready(function() {

chart = new Highcharts.Chart( {

chart : {

renderTo : 'container',

type : 'bar',

events : {

load : st// 定时器

}

},

title : {

text : '动物数量统计'

},

xAxis : {

categories : categories,

title : {

text : 'name'

}

},

yAxis : {

min : 0,

title : {

text : 'number'

}

},

legend: {

enabled: false

},

tooltip : {

formatter : function() {

return '' + this.series.name + ': ' + this.y + '';

}

},

credits : {

enabled: false

},

plotOptions : {

series : {

stacking : 'normal'

}

},

series : [ {

name : '个',

data : data

} ]

});

});

//10秒钟刷新一次数据

function st() {

setInterval("getData()", 10000);

}

//动态更新图表数据

function getData() {

var categories = [];

$.ajax({

type: "post",

url: "${pageContext.request.contextPath}/demo/chart_demo.action",

dataType: "json",

success : function(data){

var d = [];

$(data).each(function(n,item){

d.push(item.data);

categories.push(item.categories);

})

chart.series[0].setData(d);

chart.xAxis[0].setCategories(categories);

}

});

}