创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。

以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下：

Js代码  

1. <script>  
2. //创建AnyChart  
3. var chart = new AnyChart();  
4. //添加钻取操作"pointClick"事件监听  
5. chart.addEventListener('pointClick', onPointClick);  
6.   
7. //钻取操作事件Event Handler  
8. function onPointClick(e) {  
9. // 读取point name  
10. var name=e.data.Name;  
11. // 读取point value  
12. var value=e.data.YValue;  
13. // 读取自定义属性point attribute  
14. var attribute = e.data.Attributes['test'];  
15. //弹出提示框  
16. alert("point_name="+name+"  point_value="+value);  
17. }  
18. </script>  

我们项目有一个需求是：点击图表某一个point的时候可以穿透打开一个新页面，这个新页面其实就是统计数据的详细列表，那么要做这样的功能就必须在图表中传入一个URL，图表在穿透时获取这个URL并打开详细列表页面。最后我是这样实现这个功能的：给每个point定义id属性，而这个id就是URL，然后在js中创建钻取事件监听，钻取时取id值再进行跳转。

Js代码  

1. <!--AnyChart配置-->  
2. <point id="http://xxx/xxx.do?method=xx?id=xx" name="" value="">  
3.   
4. <script>  
5. //创建AnyChart  
6. var chart = new AnyChart();  
7. //添加钻取操作"pointClick"事件监听  
8. chart.addEventListener('pointClick', onPointClick);  
9.   
10. //钻取操作事件Event Handler  
11. function onPointClick(e) {  
12. //读取point id  
13. var url=e.data.id;  
14. //创建弹出框并访问指定地址  
15. openDialog(url);  
16. }  
17. </script>  

 当然有一点细节需要注意：如果id是通过后台代码拼装的，最好进行一次字符转换，否则很可能会出现XML解析错误，以java代码为例：

Java代码  

1. String url = "http://xxxx";  
2. url = StringEscapeUtils.escapeHtml(url);  

AnyChart支持图表“钻取”功能，除此之外还提供了鼠标移入、移出、图表创建、渲染中、渲染结束等等事件的监听，开发可以根据不同事件点去做一些特殊操作。

一个图可以监听多个不同的事件，要想监听多个，则只需要执行多次addEventListener即可。

Js代码  

1. function init() {   
2. // Create new chart  
3. var chart = new AnyChart();  
4. // Add event handlers for all point events  
5. chart.addEventListener('pointClick', onPointClick);  
6. chart.addEventListener('pointSelect', onPointSelect);  
7. chart.addEventListener('pointMouseOver', onPointMouseOver);  
8. chart.addEventListener('pointMouseOut', onPointMouseOut);  
9. // Set data XML File  
10. chart.setXMLFile('./data.xml');  
11. //Output chart to "chartContainer" div  
12. chart.write('chartContainer');  
13. }  

 更多的事件监听在这就不做赘述，大家可以访问AnyChart帮助文档学习，里面说得非常详细

阅读全文……

发表评论

IT瘾于2014年12月11日 上午02时06分00秒发布 #