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

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

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

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

  1. <body>
  2. <div id="container" style="height: 400px"></div>
  3. </body>

在JS中声明图表：

  1. <script type='text/javascript'>
  2. //<![CDATA[
  3. $(function(){
  4. //声明报表对象
  5. var chart = new Highcharts.Chart({
  6. chart: {
  7. //将报表对象渲染到层上
  8. renderTo: 'container'
  9. },
  10. //设定报表对象的初始数据
  11. series: [{
  12. 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]
  13. }]
  14. });
  15. function getForm(){
  16. //使用JQuery从后台获取JSON格式的数据
  17. jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(data) {
  18. //为图表设置值
  19. chart.series[0].setData(data);
  20. });
  21. }
  22. $(document).ready(function() {
  23. //每隔3秒自动调用方法，实现图表的实时更新
  24. window.setInterval(getForm,3000);
  25. });
  26. });
  27. //]]>
  28. </script>

使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表的更多相关文章

  1. jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildS ...

  2. jquery用ajax方式从后台获取json数据，将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  3. .net后台获取DataTable数据，转换成json数组后传递到前台，通过jquery去操作json数据

    一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){  DataTable dt = DBhepler.GetDataT ...

  4. jsTree通过AJAX从后台获取数据

    页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { ...

  5. jquery通过AJAX从后台获取信息并显示在表格上的类

    前一阵我写了:<jquery通过AJAX从后台获取信息并显示在表格上,并支持行选中.>现在,我把他们处理了一下,不需要每次写代码了: 具体代码如下: //获取数据并显示数据表格 funct ...

  6. jquery通过AJAX从后台获取信息并显示在表格上，并支持行选中

    不想用Easyui的样式,但是想要他的表格功能,本来一开始是要到网上找相关插件的,但是没找到就开始自己写,没想到这么简单. 后台代码:(这个不重要) public ActionResult GetDi ...

  7. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  9. AngularJs $http.post 数据后台获取不到数据问题 的解决过程

    第一次使用 AngularJs 的 $http 模块的时候,遇到过后台获取不到前台提交数据的问题,检查代码没有发现问题,先上代码. js 代码 angular.module("newsApp ...

随机推荐

  1. gridControl 中CellValueChanged，ShowingEditor，CustomDrawCell的用法

    private void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowCellStyleEventA ...

  2. jquery 1.9版本后不在支持browser 方法的解决方案

    今天对jquery 进行升级,导致项目出错,原来在1.9版本之后 jquery 不支持browser 方法了.  官方建议的又不好用,所以我所jquery 原来的代码摘除来,又扩展回去. //解决jq ...

  3. (转载)Git使用教程

    转载自:http://www.418log.org/post-89.html .什么是Git 简单地说,Git是 Linux 之父 Linus Trovalds,为管理 Linux 内核代码而建立的, ...

  4. thinkphp整合系列之phpqrcode生成二维码

    php生成二维码其实挺简单的:当然指的是使用qrcode类库: 因此关于是否要写这篇博客:我是犹豫了再三的: 不过最后还是决定写下吧:如果有童鞋急着用:就可以直接引了: 再个也可以作为即将写的文章微信 ...

  5. Fine Uploader 简单配置方法

    由于jquery.uploadify是基于flash的jquery上传控件,客户老是说出问题,所以今天换成了一个纯js的异步上传控件. 这方面的资料很少,故此记下来分享一下. 项目地址:Fine Up ...

  6. 微信接口开发1--向微信发送请求--获取access_token

    //随便放置一个php文件在服务器上.执行该方法--调用模拟get提交---到微信-->获得微信返回的access_token 不建议自己编写模拟get提交方法. 建议直接导入微信框架LaneW ...

  7. tar.gz tar.bz2 解压

    从网络上下载到的源码包, 最常见的是 .tar.gz 包, 还有一部分是 .tar.bz2包   要解压很简单 :   .tar.gz     格式解压为          tar   -zxvf   ...

  8. Entity Framework 学习高级篇1—改善EF代码的方法（上）

    本节,我们将介绍一些改善EF代码的相关方法,如NoTracking,GetObjectByKey, Include等. l         MergeOption.NoTracking 当我们只需要读 ...

  9. myeclipse 之 快捷键

    简单记录一下,新装了个机器,win7系统,想设置一下自己习惯的快捷键 如:ctrl+alt+方向键,复制行,发现设置不上,原先的自带的也失效,设置一下ctrl+alt+其它键,ok可以使用,这说明某些 ...

  10. sql关键字过滤C#方法

    /// <summary> ///SQL注入过滤 /// </summary> /// <param name="InText">要过滤的字符串 ...