之前曾写过一篇关于动态加载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"); })
至此大功告成。