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