单击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我放在链接https://files.cnblogs.com/files/jyh317/Highcharts%26Highstock%E4%B8%AD%E6%96%87API.pdf 上了，想要快速使用HighCharts的同学可以先看看中文API。