Anychart图表系列五之事件监听
编程技术 / houtizong 发布于 3年前 103
创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。
以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下：
<script>//创建AnyChartvar chart = new AnyChart();//添加钻取操作"pointClick"事件监听chart.addEventListener('pointClick', onPointClick);//钻取操作事件Event Handlerfunction onPointClick(e) {// 读取point namevar name=e.data.Name;// 读取point valuevar value=e.data.YValue;// 读取自定义属性point attributevar 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>//创建AnyChartvar chart = new AnyChart();//添加钻取操作"pointClick"事件监听chart.addEventListener('pointClick', onPointClick);//钻取操作事件Event Handlerfunction onPointClick(e) {//读取point idvar url=e.data.id;//创建弹出框并访问指定地址openDialog(url);}</script> 当然有一点细节需要注意：如果id是通过后台代码拼装的，最好进行一次字符转换，否则很可能会出现XML解析错误，以java代码为例：
String url = "http://xxxx";url = StringEscapeUtils.escapeHtml(url);
AnyChart支持图表“钻取”功能，除此之外还提供了鼠标移入、移出、图表创建、渲染中、渲染结束等等事件的监听，开发可以根据不同事件点去做一些特殊操作。
一个图可以监听多个不同的事件，要想监听多个，则只需要执行多次addEventListener即可。
function init() { // Create new chartvar chart = new AnyChart();// Add event handlers for all point eventschart.addEventListener('pointClick', onPointClick);chart.addEventListener('pointSelect', onPointSelect);chart.addEventListener('pointMouseOver', onPointMouseOver);chart.addEventListener('pointMouseOut', onPointMouseOut);// Set data XML Filechart.setXMLFile('./data.xml');//Output chart to "chartContainer" divchart.write('chartContainer');} 更多的事件监听在这就不做赘述，大家可以访问AnyChart帮助文档学习，里面说得非常详细。
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
