当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Anychart图表系列五之事件监听

发表于: 2013-09-16   作者:白糖_   来源:转载   浏览:
摘要: 创建图表事件监听非常简单:首先是通过addEventListener('监听类型',js监听方法)添加事件监听,然后在js监听方法中定义具体监听逻辑。 以钻取操作为例,当用户点击图表某一个point的时候弹出point的name和value,代码如下: <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo

创建图表事件监听非常简单:首先是通过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帮助文档学习,里面说得非常详细。

Anychart图表系列五之事件监听

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
如果数据过多的时候,图表因为只有固定宽度,无法呈现较好的效果,这时候滚动条的作用就出来了,基
图标题和图例在图表元素中是不可或缺的一部分,标题能表达图的意思,图例能表达图的组成。 标题 如
AnyChart除了常规图以外,还支持仪表图----表盘形、温度计类型等,我们在项目进度管理的统计中用到
Dashboard中文释义为仪表盘、控制台,这个用词很生动,它指的是多个图组合在一起的效果,就像模具工
本章的信息量可能会很大,而且会不断更新,标题说的“增值功能”由多个小功能组成,因为每个小功能
图标题和图例在图表元素中是不可或缺的一部分,标题能表达图的意思,图例能表达图的组成。 标题 如
如果数据过多的时候,图表因为只有固定宽度,无法呈现较好的效果,这时候滚动条的作用就出来了,基
AnyChart除了常规图以外,还支持仪表图----表盘形、温度计类型等,我们在项目进度管理的统计中用到
Dashboard中文释义为仪表盘、控制台,这个用词很生动,它指的是多个图组合在一起的效果,就像模具工
本章的信息量可能会很大,而且会不断更新,标题说的“增值功能”由多个小功能组成,因为每个小功能
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号