創建圖表事件監聽非常簡單:首先是通過addEventListener('監聽類型',js監聽方法)添加事件監聽,然後在js監聽方法中定義具體監聽邏輯。
以鑽取操作為例,當用戶點擊圖表某一個point的時候彈出point的name和value,代碼如下:
<script> //創建AnyChart var chart = new AnyChart(); //添加鑽取操作"pointClick"事件監聽 chart.addEventListener('pointClick', onPointClick); //鑽取操作事件Event Handler function onPointClick(e) { // 讀取point name var name=e.data.Name; // 讀取point value var value=e.data.YValue; // 讀取自定義屬性point attribute var attribute = e.data.Attributes['test']; //彈出提示框 alert("point_name="+name+" point_value="+value); } </script>
我們項目有一個需求是:點擊圖表某一個point的時候可以穿透打開一個新頁面,這個新頁面其實就是統計數據的詳細列表,那麼要做這樣的功能就必須在圖表中傳入一個URL,圖表在穿透時獲取這個URL並打開詳細列表頁面。最後我是這樣實現這個功能的:給每個point定義id屬性,而這個id就是URL,然後在js中創建鑽取事件監聽,鑽取時取id值再進行跳轉。
<!--AnyChart配置--> <point id="http://xxx/xxx.do?method=xx?id=xx" name="" value=""> <script> //創建AnyChart var chart = new AnyChart(); //添加鑽取操作"pointClick"事件監聽 chart.addEventListener('pointClick', onPointClick); //鑽取操作事件Event Handler function onPointClick(e) { //讀取point id var url=e.data.id; //創建彈出框並訪問指定地址 openDialog(url); } </script>
當然有一點細節需要注意:如果id是通過後台代碼拼裝的,最好進行一次字元轉換,否則很可能會出現XML解析錯誤,以java代碼為例:
String url = "http://xxxx"; url = StringEscapeUtils.escapeHtml(url);
AnyChart支持圖表「鑽取」功能,除此之外還提供了滑鼠移入、移出、圖表創建、渲染中、渲染結束等等事件的監聽,開發可以根據不同事件點去做一些特殊操作。
一個圖可以監聽多個不同的事件,要想監聽多個,則只需要執行多次addEventListener即可。
function init() { // Create new chart var chart = new AnyChart(); // Add event handlers for all point events chart.addEventListener('pointClick', onPointClick); chart.addEventListener('pointSelect', onPointSelect); chart.addEventListener('pointMouseOver', onPointMouseOver); chart.addEventListener('pointMouseOut', onPointMouseOut); // Set data XML File chart.setXMLFile('./data.xml'); //Output chart to "chartContainer" div chart.write('chartContainer'); }
更多的事件監聽在這就不做贅述,大家可以訪問AnyChart幫助文檔學習,裡面說得非常詳細。