单击HighCharts柱形体弹框显示详细信息

　　上篇博客介绍了如何在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。