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

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

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

Js代码

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

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

Java代码

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

在JS中声明图表：

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>

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

利用jquery写的从后台获取json数据以表格显示,并带翻页功能.里面包含模式窗口等功能...
利用jquery写的从后台获取json数据,以表格显示,并带翻页功能里面包含模式窗口等功能大家看例子就懂了下面是效果图: http://www.jm47.com/project/3001.asp ...
jsTree ajax 获取json数据加载树
后台获取json格式数据. 直接上代码. 最后有一张官方ajax获取tree的说明. var ajaxTreeSample = function() {$("#tree_4").j ...
js ajax获得对象怎么放到td上,jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中...
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
ajax获取数据添加到表格,Jquery通过AJAX从后台获取数据显示在表格上（复选）
代码: function GetMultiLineSelectTable(tableId, selectIds) { var table = $(tableId); var url = table.d ...
JQuery通过后台获取数据遍历到前台
做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用ul+li标签写的,在调用接口调试时发现返回的数据有很多组的,而在前台显示的时候只有一条数据,毋容置疑,一定是 ...
highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .
最近做个项目,项目经理想做一个统计报表,在网上查看些资料就选用Highchars 这里和大家分享下使用心得. 重点说明此代码是针对一个报表显示多个项对比显示. 直接贴代码:web端 $(documen ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
Vue---从后台获取数据vue-resource的使用方法
作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助. 一.下载vue-res ...
下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...
今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数 ...

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

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

最新文章

热门文章