admin管理员组文章数量:1589944
2021SC@SDUSC
目录
简介
使用方法
引入交互模块
调用
清楚交互动作
饼状图的选中
使用
API
参数说明
柱状图的选中
使用
API
参数说明
图表平移
使用
API
参数说明
图表的缩放
使用
API
参数说明
附
简介
F2提供了一套交互机制,用以达到通用的交互行为的封装和复用。经过代码分析和搜索论证后,暂时总结出以下四种通用的交互行为:
1.饼状图的选中
2.柱状图的选中
3.图表平移
4.图表缩放
基于以上四种交互行为,我们可以在使用F2的时候,借用此机制来封装自己定义的交互行为。当然,要使用自己定义的自定义交互行为的方法并不在此文章中说明。
使用方法
引入交互模块
交互模块在F2中是默认没有被打包至 @antv/f2 模块包中的。所以在使用时需要我们手动引入,以下提供一种比较通用的引入代码段:
// 首先引入 F2
const F2 = require('@antv/f2/lib/index');
// 引入所有的交互行为
require('@antv/f2/lib/interaction/');
// 如果只需要引入其中一种交互行为,那么请使用如下的方式
// 引入 pie-select
require('@antv/f2/lib/interaction/pie-select');
// 引入 interval-select
require('@antv/f2/lib/interaction/interval-select');
// 引入 pan
require('@antv/f2/lib/interaction/pan');
// 引入 pinch
require('@antv/f2/lib/interaction/pinch');
调用
经过分析后,在此文中提供一种调用方法,代码段如下:
chart.interaction('name', config);
这里的 ‘name’ 是指我们定义的 interaction 的名字。
清楚交互动作
chart.clearInteraction()
chart.clearInteraction('name')
第一种清除交互动作的方式是:清除 chart 实例上所具有的所有的交互动作;
第二种清除交互动作的方式是:清除 chart 实例上名字为 ‘name’ 的交互动作。
饼状图的选中
动图来自AntV f2官方展示图片
使用
以下为调用代码段:
// 调用
chart.interaction('pie-select');
这里的 pie-select 是F2中的保留字,即我们要尽量在自定义变量中不去使用这个名字。
API
chart.interaction('pie-select', {
startEvent: {String}, // 触发事件,默认为 tap
animate: {Boolean} || {Object}, // 动画配置
offset: {Number}, // 光环偏移距离
appendRadius: {Number}, // 光环大小
style: {Object}, // 光环的样式配置
cancelable: {Boolean}, // 是否允许取消选中,默认值为 true,表示允许
onStart: {Function}, // 事件触发后的回调
onEnd: {Function}, // 事件结束后的回调
defaultSelected: {Object} // 设置默认选中的数据,该属性需要在 chart.render() 之后调用方可生效
});
参数说明
参数 | 类型 | 默认值 | 说明 |
startEvent | String | ‘tap’ | 此交互原则上是手指点击后触发的,所以还可以使用 ‘touchstart’。 选中交互的出发时间名称。 |
animate | Boolean/Object | false | 动画配置,默认为 false ,可将该属性设置为 true 以打开动画。 类型为 Object 时,用于动画配置,详见上一篇文章。 |
offset | Number | 1 | 选中后出现的光环与饼图之间的距离。 |
appendRadius | Number | 8 | 选中后出现的光环的轴长。 |
版权声明:本文标题:2021SC@SDUSC“F2移动端可视化方案”源码分析(八)——Interaction交互机制的分析 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728075513a1144420.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论