之前曾写过一篇关于动态加载highcharts的文章
SSH+Highcharts 生成动态图表 ——在思考中解决问题
现在出现了几个问题:
1、之前的加载方式是先发送ajax请求给后台action,通过返回的data来构建图表,那么如果页面上有一个按钮的话要重新构建图表数据,是不是又要把一样的代码重新再写一遍呢?
这样太麻烦,也太不合理了。
那么继续查询highcharts API,发现在方法中有如下一个方法:
redraw () Since 1.2.0 Redraw the chart after changes have been done to the data or axis extremes. All methods for updating axes, series or points have a parameter for redrawing the chart. This is true by default. But in many cases you want to do more than one operation on the chart before redrawing, for example add a number of points. In those cases it is a waste of resources to redraw the chart for each new point added. So you add the points and call chart.redraw() after. Returns null
显而易见,这就应该是重构图表的方法,后面肯定需要用到这个方法。
2、找到了重构图表的方法,那么如何把值赋予图表呢?
通过继续查找api,发现Series中有一个setData方法,点进demo,发现有如下一个实例:
$('#button').click(function() { var chart = $('#container').highcharts(); chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] ); });
通过chart.series[0].setData 可以给图表赋值,那么接下来问题就简单了。现贴上关键代码:
$(function() { var adsChart; adsChart = new Highcharts.Chart({ //...... series : [{name:'新用户'},{name:'老用户'},{name:'下载量'},{name:'安装量'}] }); //给图表加载值 var url = '${pageContext.request.contextPath}/chartAction!getAdsChart.action'; $.post(url, function(response) { newList = response.newList; oldList = response.oldList; downList = response.downList; installList = response.installList; adsChart.series[0].setData(newList); adsChart.series[1].setData(oldList); adsChart.series[2].setData(downList); adsChart.series[3].setData(installList); }, "json"); });
楼主这里有4条折线,所以构建4个series。
3、通过ajax方式这样可以初始化图表,那么点击按钮的时候如何刷新图表呢?
动态构建图表的地方不需要变,还是需要这样setData。
之前我们都是在按钮是给其添加onclick事件,然后调用函数,但是在这个地方好像不管用,fiebug会提示adsChart is undefined ,那么应该如何调用?
需要在$(function(){})内部中给按钮注册点击事件:
$('#btnAdsCharts').on('click',function(e){ adsChart.showLoading(); var month = $('#MonthCombo').combobox('getValue'); var url = '${pageContext.request.contextPath}/chartAction!getAdsChart.action'; var data = { month : month }; $.post(url, data, function(response) { newList = response.newList; oldList = response.oldList; downList = response.downList; installList = response.installList; adsChart.series[0].setData(newList); adsChart.series[1].setData(oldList); adsChart.series[2].setData(downList); adsChart.series[3].setData(installList); adsChart.hideLoading(); //重构图表 adsChart.redraw(); }, "json"); })
至此大功告成。
效果如图所示:
相关推荐
jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码
jquery+ajax+highcharts+mysql实战例子,需要配套视频请留言
1.dwz+thinkPHP+Highcharts实例 2.xpcms添加了Highcharts例子-点击DVR分析组可查看 3.安装前,先删除Install下的install.lock。
模仿花火基于react+Highcharts做的一款在线图表制作工具。操作简单,降低可视化信息生产门槛。化繁为简,将枯燥的数据转化成易懂的图表,为数据和信息增值。数可视专注数据可视化
ext3.0+highcharts+ext时间日期控件+jquery+json
实现一个简单ajax+jquery+highcharts+json例子,主要让初学者了解ajax+jquery是怎么接受后台传过来的json数据,并显示到前台highcharts中的,以及js文件应该如何放置等问题。
分享课程——基于JSONP+ngBind+ngRepea技术实战美玩网(BootStrap+AngularJS+JMS+Highcharts);本教程主要从基础出发到项目的整体框架整合,整个大纲内容涉及面较为广泛,涉及到数据库技术,javaEE技术点,web框架...
实例如下: <!DOCTYPE ...<... <head>...html+js+highcharts绘制圆饼图表的简单实例</title> <script type="te
这个一个比较完整的ssh整合后实现导入导出excel、百度富文本编辑器使用、highcharts统计图表应用、clob大对象处理等综合性、实用性比较强的案例代码实现
easyUI+HighCharts+Aspose.cells+Aspose.word+Aspose.Pdf+WebService等的实例应用,easyui包括异步树加载,嵌套表格等,highcharts包括本地导出图片(仅限jpg)柱状,线状图例等,aspose.word、excel、pdf等使用的...
python项目开发实战_招聘信息实时数据分析系统(网络爬虫+Flask+Highcharts+MySQL)_编程案例实例课程教程.pdf
<项目介绍> ...3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------
HighCharts 图表属性——chart HighCharts 颜色属性——colors HighCharts 版权属性——credits HighCharts 去除版权的几种方法 HighCharts 导出属性——explorting HighCharts HTML标签——labels HighCharts 语言...
附件就是一个java Web工程,导入myeclipse后可以直接运行,该实例是一个线性图,异步ajax到服务器servlet读取数据。
网上的资源将的都很笼统也不全面,我也是在学习这些东西,把自己写的稍微整合了一下,应该时候新手看,能够完全运行,只要自己附加一下数据库,还有就是在web.config中配置一下文件(这个都会的吧) Jquery中easyui...
jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码 jquery highcharts动态加载多条数据表走势图代码
本文的贡献如下: 1、实现了直线方程式、多项式方程式以及由这两种方程式组合的分段函数,使得用户可以根据需求,制定相关的公式。 2、通过js和bootstrap实现了较好的用户交互界面,用户可添加任意数量的直线方程式...
highcharts带基线图表 diy by area charts
数据统计报表 数据统计报表 数据统计报表模板数据统计报表 数据统计报表