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

最新推荐文章于 2019-01-10 10:42:01 发布
最新推荐文章于 2019-01-10 10:42:01 发布
阅读量9.7k 收藏 3
点赞数
分类专栏： Highcharts 文章标签： jquery json 报表 jfreechart function ajax

转自：http://bolan392.iteye.com/blog/764163


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

jQuery json JavaScript Ajax jfreechart

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

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

 

Js代码   收藏代码
  1. <script type='text/javascript' src='js/jquery-1.3.2.js'></script>  
  2. <script type='text/javascript' src='js/highcharts.js'></script>  

  

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

 

Java代码   收藏代码
  1. <body>  
  2.     <div id="container" style="height: 400px"></div>  
  3. </body>  

 

   在JS中声明图表：

 

 

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.   
  16.         function getForm(){  
  17.                                                 //使用JQuery从后台获取JSON格式的数据  
  18.             jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(data) {  
  19.                                                                 //为图表设置值  
  20.                 chart.series[0].setData(data);  
  21.             });  
  22.         }  
  23.   
  24.       
  25.         $(document).ready(function() {  
  26.             //每隔3秒自动调用方法，实现图表的实时更新  
  27.             window.setInterval(getForm,3000);   
  28.               
  29.         });  
  30.       
  31.   
  32.     });  
  33.     //]]>   
  34.     </script>  

CF西西
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Highcharts：bar折线图+jQuery+Ajax+json+springMVC
洪君的博客
11-11 430
Highcharts：纯JavaScript图表库 echarts教程，快速上手:echarts bar折线图，统计报表   Highcharts   上图是成品。 首先，导入highcharts的资源文件。 再然后，在html中定义一个div层，用来承装图表 &lt;div id="container" style="min-width:700px;height:400px...
Highcharts使用指南
weixin_34037515的博客
01-24 740
摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。   目录 前言（Preface） 安装（Installation） 如何设置参数（How to set up the options） 预处理参数（Preprocess th...
JQuery Highcharts图表使用说明
09-28
• 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； • 对个人用户完全免费； • 纯JS，无BS； • 支持大部分的图表类型：柱状图，直线图，曲线图、区域图、区域曲线图、饼装图、散布图等； • 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库； • 提示功能：鼠标移动到图表的某一点上有提示信息； • 放大功能：选中图表部分放大，近距离观察图表； • 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表； • 时间轴：可以精确到毫秒； • Ajax支持： 使用数组接受Ajax传值
HighCharts的使用，（jQuery调用发请求部分）
weixin_41049850的博客
07-08 739
一、jQuery 中 Ajax 相关的函数在 jQuery 中，有三种 Ajax 相关的方法，分别是：ajax、get、post。1、jQuery.ajax统一的发送 Ajax 请求函数，简单的使用示例如下：$.ajax({ url: '请求地址', type: 'GET', // 请求类型，常用的有 GET 和 POST data: { ...
Highcharts做的图表例子,页面JQuery,后台JAVA JSON
09-26
文件仅有两个文件,一个是HighCharts做的曲线图标htm,使用JQuery Ajax接收JSON字符串,后台使用java HttpServeltResponse json, out.write("....");此例运行需要官方的js demo包,部分java方法代码如下涵盖两条曲线,str...
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
09-24
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
12-05
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图 后台代码大家根据自己的情况写并转JSON格式。在前台修改url，即可出柱形图
Highcharts(纯JS图表插件)
10-19
纯JS的图表插件，效果非常绚丽。只要提供JSON数据，JS自动生成图表，柱状、曲线图、饼图等。
Jquery+ajax+highcharts 非常详细，网上太笼统，学习之余整合了一下
07-21
网上的资源将的都很笼统也不全面，我也是在学习这些东西，把自己写的稍微整合了一下，应该时候新手看，能够完全运行，只要自己附加...Jquery中easyui的运用，ajax后台数据的传输，Json的拼接，highcharts获取后台数据！
highcharts联合jquery ajax 后端取数据
aibiba0894的博客
05-05 95
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全免费； 纯JS，无BS； 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图； 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三...
jquery图表插件highcharts使用
Larry的博客
07-10 1276
当我们使用highcharts做这样的图是不是很老火，其实开始我感觉很麻烦。但是官网上有demo，虽然只有很小一部分。http://www.highcharts.com/demo/column-stacked基本百度一下就可以找到加入曲线。其实就是 serese 的数据，只是加入type属性就更改成你想要的。下面那个table你可以使用table加入jquery实现就ok了 $(functi
Jquery图表控件Highcharts使用
yuan_jie
12-14 1324
Highcharts 是一个使用javascript 脚本来生成图表的工具，和jfreechart 作用类似，都用来生成各种图表，并支持图片的导出和打印。 从官网 www.highcharts.com  上下载的压缩表中的example中有各种图表的例子。 要编写生成图表的例子建议从文件名后带 basic 的文件看起，看到例子后你会发现，highcharts使用起来时非常简单的，我们要做
Highcharts:高交互性的javascript图表类库
weixin_34059951的博客
12-04 123
一、Highcharts简介： 二、Highcharts图表预览 1、直线图 2、曲线图 3、散状图 4、区域图 5、区域曲线图 6、柱状图 7、饼状图 三、调用方式 1、效果 2、调用代码 3、代码说明 四、总结     一、Highcharts简介：   Highcharts是一个制作图表的Javascript类库，可以制作的图表有：直线图，曲线图、区域...
Highcharts axja 获取json对象动态生成报表生成
wsk7860的专栏
04-08 1万+
最近做个项目，项目经理想做一个统计报表，在网上查看些资料就选用Highchars 这里和大家分享下使用心得。    重点说明此代码是针对一个报表显示多个项对比显示。          直接贴代码：web端                                                  $(document).ready(function() {
Echarts数据可视化series-scatter散点图，开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-08 3万+
Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解点击进入其他功能详解： Echarts数据可视化title详解 Echarts数据可视化tooltip详解 Echarts数据可视化toolbox详解 Echarts数据可视化legend详解 Echarts数据可视化dataZoom详解 Echarts数据可视化visualMap全解 Echarts数
图表组件highchart 支持jquery的报表
漂游着贰号
07-03 95
     highcharts是个支持jquery的报表组件，支持pie、column、line、area。支持很多效果选项，之前已经有些介绍了，不不在详细说明了，普通的应用参考http://xosadan.iteye.com/blog/1089452。   在图表报表实际应用中，有些特殊的应用，比如需要对饼图的每一个小瓣添加些点击处理的事件，比如添加不同的超链接或者添加弹出详情的层等效果...
Highcharts 实现实时监控图表（x轴随着时间动态变化）
rainyspring4540的专栏
01-10 3727
环境：Highcharts 5.0.6 第一：x轴是时间点（形如 23:12:29 格式） 第二：x轴是变化的 第三：x轴的值是从服务中获取 这里贴上最核心的逻辑（因为时间比较赶，没有深入研究官方文档，只经过测试，这里是核心） 大概实现逻辑，是通过 window.setInterval(getForm, 500); 定时的向服务器发送请求（getForm函数里面是个ajax请求），...
在Vue中使用WebSocket+HighCharts实现高性能的频谱瀑布图
最新发布
05-31
在Vue中结合WebSocket和HighCharts实现高性能的频谱瀑布图，可以按照以下步骤进行： 1. 安装HighCharts库 使用npm或yarn安装HighCharts库。 ``` npm install highcharts --save ``` 2. 创建WebSocket连接 在Vue组件中创建WebSocket连接，并在连接成功后发送请求获取数据。 ``` created() { const ws = new WebSocket('ws://localhost:8080'); ws.onopen = () => { ws.send('get_data'); }; ws.onmessage = (event) => { const data = JSON.parse(event.data); // 处理数据 }; } ``` 3. 处理数据 在Vue组件中处理WebSocket接收到的数据，并将数据转换为HighCharts需要的格式。 ``` methods: { processData(data) { const seriesData = data.map(item => { return { x: item.timestamp, y: item.value }; }); this.chart.addSeries({ data: seriesData }); } } ``` 4. 创建HighCharts实例 在Vue组件中创建HighCharts实例，并设置相关配置。 ``` mounted() { this.chart = Highcharts.chart('container', { chart: { type: 'waterfall' }, title: { text: '频谱瀑布图' }, xAxis: { type: 'datetime' }, yAxis: { title: { text: '值' } }, series: [] }); } ``` 5. 更新HighCharts数据 在处理数据的方法中，调用HighCharts实例的addSeries方法添加数据。 ``` this.chart.addSeries({ data: seriesData }); ``` 这样就可以在Vue中使用WebSocket和HighCharts实现高性能的频谱瀑布图了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值