posts - 111,  comments - 486,  trackbacks - 0

  上篇博客介绍了如何在HighCharts统计图表下生成表格,二者相互结合,可以对数据进行更好的统计分析。在统计的同时,如果需要想要及时查看详细信息的话,就得再加一个功能,就是单击柱形体,显示该项下的详细信息。通过客户的需求不断提出,这个统计图的功能也在不断完善,我对HighCharts的了解也在不断加深。可见,需求促进学习啊。

  废话不多说,直接贴主要代码,很简单的,这些需求HighCharts早就为你想到了。

  还是看API,找到功能点:

  

  如上图,我们可以看到,我们的单击事件要加载数据列Series上,所以去API里的Series里找是否有单击事件的处理吧。

  果然有:

  

  既然找到API了,那就去实践吧

  

    。。。。。。。
 plotOptions: {
                                column: {
                                    depth: 10,
                                    value: 0,
                                    width: 1
                                    
                                },
                                series: {
                                     cursor: 'pointer',
                                     events: {//事件
                                         click: function(e) {
                                             var cou=e.point.category;
                                             var nat=this.name;
                                             funGroupColumn(cou,nat,bgtm,endtm); //单击事件触发的方法
                                         } 
                                     }
                                 }
                            },
。。。。。。。。
function funGroupColumn(cou,nat,bgtm,endtm){
    var str = "你的查询Action方法";
    winopen(str,"****",600,600);//内部封装弹窗方法,具体按照你的框架来定
}

  通过上面的方法可以完成单击柱形图进行其他操作了,很简单吧。

  既然单击事件我们都学习了,那么顺便扩展学习一下其他事件吧,万一以后会用到呢。

  HighCharts的中文API我放在链接http://files.cnblogs.com/files/jyh317/Highcharts%26Highstock%E4%B8%AD%E6%96%87API.pdf 上了,想要快速使用HighCharts的同学可以先看看中文API。

posted on 2015-01-26 10:23  贞心真义  阅读(...)  评论(...编辑  收藏