ajax定时刷新Highcharts
来源:互联网 发布:ubuntu 16.04 安装vps 编辑:程序博客网 时间:2024/06/05 05:30
<!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>
- ajax定时刷新Highcharts
- ajax定时刷新Highcharts
- HighCharts定时刷新图表
- Ajax定时刷新页面
- ajax定时刷新页面
- AJAX定时刷新
- ajax 定时局部刷新
- Highcharts通过AJAX访问后台数据库实时刷新
- Highcharts(一) 双饼图 ajax动态刷新
- Ajax单列定时刷新数据
- ajax局部刷新,定时更新
- ajax 定时请求刷新 倒计时
- jquery结合highcharts使用Ajax异步刷新数据
- Ajax请求服务器数据动态刷新HighCharts表格
- Highcharts(二) 基础柱状图 ajax动态刷新
- ajax 无刷新定时更新数据
- Ajax 定时自动更新无刷新进度条
- Ajax无刷新实现定时更新数据
- 设计模式学习笔记——建造者模式
- 健康的身体是一切的保障,请遵守生物钟规律 - 为了自已也为了家人
- 【开源推荐】AllJoyn:打造全球物联网的通用开源框架
- Java web 连接 mysql
- EPStoPDF file not found error on Ubuntu
- ajax定时刷新Highcharts
- The prefix "mvc" for element "mvc:annotation-driven" is not bound
- shell下使用php调用百度翻译API
- Xcode create a openCV c++ project some settting
- 坚持梦想
- 忘了梦想,没了目标,迷失自我的时候 就看看
- 和杨青探讨程序设计作业方式
- 用this调用构造方法
- RTSP简单流程