使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表
项目做了一个报表，可以实时的观察呼叫中心的电话访问量，之前的版本是使用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>
使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表的更多相关文章
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- .net后台获取DataTable数据，转换成json数组后传递到前台，通过jquery去操作json数据
一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){ DataTable dt = DBhepler.GetDataT ...
- jsTree通过AJAX从后台获取数据
页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { ...
- jquery通过AJAX从后台获取信息并显示在表格上的类
前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...
- jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中
不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...
- Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- AngularJs $http.post 数据后台获取不到数据问题 的解决过程
第一次使用 AngularJs 的 $http 模块的时候,遇到过后台获取不到前台提交数据的问题,检查代码没有发现问题,先上代码. js 代码 angular.module("newsApp ...
随机推荐
- javascript 事件响应
1.基本事件 2.点击事件 <html> <head> <script type="text/javascript"> function add ...
- jquery_核心_(1)
1.data([key],[value]) 概述 在元素上存放或读取数据,返回jQuery对象. 当参数只有一个key的时候,为读取该jQuery对象对应DOM中存储的key对应的值,值得注意的是,如 ...
- TCP/IP体系结构-测试人员必须理解的
如果还想在测试这条路上继续走下去的话,那么下面这些东西就是我们必须去掌握的,至少你还不想止步于简单的黑盒测试--其实,一直想去接触Linux下的应用测试,这样能学到东西会很多,而且会非常的受用.之前听 ...
- 第四十三节，文件、文件夹、压缩包、处理模块shutil
文件.文件夹.压缩包.处理模块shutil 文件处理 copyfileobj()模块函数 功能:将a文件的内容,复制到b文件中[有参] 使用方法:模块名称.copyfileobj(poen(" ...
- php-fpm参数优化【转】
转自 php-fpm参数优化 | Linux运维笔记https://blog.linuxeye.com/380.html php-fpm进程设置多少合适,设成动态还是静态? <lnmp一键安装包 ...
- 很好的容斥思想 HDU 5514
题目描述:有n只青蛙,m个石头(围成圆圈).第i只青蛙每次只能条a[i]个石头,问最后所有青蛙跳过的石头的下标总和是多少? 思路:经过绘图我们发现,每次跳过的位置一定是k*gcd(a[i], m).然 ...
- Fatal error: Class ‘mysqli’ not found in解决办法
在使用[$conn = new \mysqli($servername, $username, $password,$dbname);]连接msql数据库的时候 出现错误:[Fatal error: ...
- IOS 中常用站位符
CGPoint.CGRect等可以转化为字符串打印出来 如: NSLog(@"-------------%@",NSStringFromCGPoint(point)); ...
- 使用VS软件打开网站在浏览器浏览的方法
1.用VS软件打开网站之后,先检查网站是否使用IIS Express开发 2.若不是,则切换成使用IIS Express开发 3.检查项目使用的托管管道模式设置为经典模式了没有 4.最后选择“在浏览器 ...
- CSS样式 初学
CSS样式 参考网站: CSS用法:3种 一:直接样式表 如<p style="color:red;">这是一个段落</p> 二:内部样式表 如:<s ...