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

最新推荐文章于 2023-06-08 14:08:59 发布

ttha

最新推荐文章于 2023-06-08 14:08:59 发布

阅读量3.9k

点赞数 5

分类专栏： jsp java 文章标签： jquery ajax 刷新 highcharts 实时

本文链接：https://blog.csdn.net/shiguili505116/article/details/41684329

版权

java 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jsp

6 篇文章 0 订阅

订阅专栏

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%
String categories="[ '狗', '猫', '兔子', '老虎', '大象']";
String data="[10,13,15,17,19]";

%>
<!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://cdn.hcharts.cn/jquery/jquery-1.8.3.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>

想要完成实例的朋友联系我，我的邮箱:qmys116505@qq.com

ttha

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
java实现的highcharts与ajax结合动态实时获取数据更新图表

String categories="[ '狗', '猫', '兔子', '老虎', '大象']";String data="[10,13,15,17,19]";%>Highcharts Example//x轴值var categories=;//y轴值var data=;//创建图表var chart;$
复制链接

扫一扫