使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表 -

bolan392

浏览: 276754 次
性别:
来自: 北京

最近访客更多访客>>

legend11

liujun.1980

726681665

hjz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表

博客分类：

Highcharts

jQuery json JavaScript Ajax jfreechart

项目做了一个报表，可以实时的观察呼叫中心的电话访问量，之前的版本是使用JFreechart做的，使用一段时间后出现内存溢出，服务器的内存使用量会变得很大，所以改用Ajax前台加载数据的方式实现实时报表功能，查了很久选择了JQuery结合Highcharts的方式，Highcharts是一个JS实时报表API，下面给出基本代码：

首先，要添加JQuery和Highcharts的引用：

<script type='text/javascript' src='js/jquery-1.3.2.js'></script>
<script type='text/javascript' src='js/highcharts.js'></script>

页面的body部分需要有个层用来渲染图表：

<body>
	<div id="container" style="height: 400px"></div>
</body>

在JS中声明图表：

<script type='text/javascript'>
	//<![CDATA[ 
	$(function(){
                 //声明报表对象
		var chart = new Highcharts.Chart({
    		chart: {
                //将报表对象渲染到层上
        	renderTo: 'container'
    	},
                //设定报表对象的初始数据
    	series: [{
        	data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    	}]
	});

		function getForm(){
                                                //使用JQuery从后台获取JSON格式的数据
			jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(data) {
                                                                //为图表设置值
				chart.series[0].setData(data);
			});
		}

	
		$(document).ready(function() {
			//每隔3秒自动调用方法，实现图表的实时更新
			window.setInterval(getForm,3000); 
			
		});
	

	});
	//]]> 
	</script>

3
顶

8
踩

分享到：

监听浏览器关闭事件 | 七、统一过程核心工作流简介

2010-09-15 18:05
浏览 81369
评论(19)
分类:Web前端
查看更多

19 楼 soft5200 2014-02-26

jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax
这个对应的后台方法是什么啊？

18 楼 java_MagicWang 2012-06-04

11111111111111111111111111111111111111111111111111111111111111111111111111111111111

17 楼程序小虫 2012-03-26

lolomarx 写道

我试过初始的数据能画出图，但是后面定时去拿数据就不对了，
图表清空了，什么也没有，返回的数据是对的啊，
很困惑
jQuery.getJSON('http://highcharts.com/demo/tokyo.json', null, function(data) {
                                                                   //为图表设置值
                   chart.series[0].setData(data);
              });

我也和这位兄台一样啊不知道为什么？

16 楼 lgx2351 2011-09-16

定时器设置得间隔短，内存还是会不断地往上升，有没有好的解决办法。调用release()再new，还是会升。

15 楼奥义之舞 2011-04-13

奥义之舞写道

可以尝试在 chart.redraw();
或者在使用 new Highcharts.Chart(chart);

14 楼奥义之舞 2011-04-13

可以尝试在 chart.redraw();
或者在使用 new Highcharts.Chart(chart);

13 楼奥义之舞 2011-04-13

奥义之舞写道