分類  >  Web前端 >

Anychart圖表系列5之事件監聽

tags:    時間:2013-12-09 23:44:54
Anychart圖表系列五之事件監聽

創建圖表事件監聽非常簡單:首先是通過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幫助文檔學習,裡面說得非常詳細。

推薦閱讀文章

Bookmark the permalink ,來源:互聯網