單擊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。