您的位置：首页 > 编程语言 > Java开发

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

2013-09-06 22:55 1186 查看


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

博客分类：

java

jsp

javajsphighchartsajax实时刷新

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Highcharts Example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

//x轴值

var categories=<%=categories%>;

//y轴值

var data=<%=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);

}

});

}

</script>

</head>

<body>

<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts.js" charset="utf-8"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/funnel.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/highcharts/highcharts-more.js"></script>

<div id="container" ></div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航