admin管理员组文章数量:1590506
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://m.elefans.com/dianzi/1728075513a1144420.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论