交互行为

F2 提供一套交互机制,以达到通用交互行为的封装和复用。基于此机制,我们提供了以下四种通用的交互行为:

  • 饼图选中
  • 柱状图选中
  • 图表平移
  • 图表缩放
    对于开发者来说,可以基于此机制封装自己的交互行为,详见 自定义交互行为 教程,非常欢迎一起建设。

说明

交互模块默认没有打包至 @antv/f2 模块包中。使用时需要手动引入,如下:

  1. // 首先引入 F2
  2. const F2 =require('@antv/f2/lib/index');
  3.  
  4. // 引入所有的交互行为
  5. require('@antv/f2/lib/interaction/');
  6.  
  7. // 如果只需要引入其中一种交互行为,那么请使用如下的方式
  8. // 引入 pie-select
  9. require('@antv/f2/lib/interaction/pie-select');
  10.  
  11. // 引入 interval-select
  12. require('@antv/f2/lib/interaction/interval-select');
  13.  
  14. // 引入 pan
  15. require('@antv/f2/lib/interaction/pan');
  16.  
  17. // 引入 pinch
  18. require('@antv/f2/lib/interaction/pinch');
  • 调用
  1. chart.interaction('name', config);
  • 清除交互行为
  1. chart.clearInteraction()// 清除 chart 实例上所有的交互行为
  2. chart.clearInteraction('name')// 清除名称为 'type' 的交互行为

饼图选中

image

使用

  1. const F2 =require('@antv/f2/lib/index');// 引入 F2
  2. require('@antv/f2/lib/interaction/pie-select');// 引入饼图选中交互
  3.  
  4. // ... 创建饼图
  5.  
  6. // 调用
  7. chart.interaction('pie-select');
  8.  

API

  1. chart.interaction('pie-select',{
  2. startEvent:{String},// 触发事件,默认为 tap
  3. animate:{Boolean}||{Object},// 动画配置
  4. offset:{Number},// 光环偏移距离
  5. appendRadius:{Number},// 光环大小
  6. style:{Object},// 光环的样式配置
  7. cancelable:{Boolean},// 是否允许取消选中,默认值为 true,表示允许
  8. onStart:{Function},// 事件触发后的回调
  9. onEnd:{Function},// 事件结束后的回调
  10. defaultSelected:{Object}// 设置默认选中的数据,该属性需要在 chart.render() 之后调用方可生效
  11. });

参数说明

startEvent
  • 类型:String
  • 默认值:'tap'
  • 说明:该交互原则上是手指点击后触发的,除去 'tap',还可以使用 'touchstart'
    选中交互的触发事件名称。
animate
  • 类型:Boolean / Object
  • 默认值:false
    动画配置,默认为 false,可将该属性设置为 true 来打开动画。当为 Object 类型时,用于进行动画配置:
  1. animate:{
  2. duration:1000,// 动画持续事件
  3. delay:0,// 动画延迟执行的时间
  4. easing:'bounceOut'// 动画的缓动函数
  5. }

动画参数的设置详见:Animation 动画

offset
  • 类型:Number
  • 默认值:1
    选中后出现的光环与饼图的距离。
appendRadius
  • 类型:Number
  • 默认值:8
    选中后出现的光环的轴长。
style
  • 类型:Object
  • 默认值:{ fillOpacity: 0.5 }
    设置光环的样式。
cancelable
  • 类型:Boolean
  • 默认值:true
    当 shape 被选中后,再次点击是否允许取消选中,默认为 true,表示会取消选中。
onStart

类型:Function 默认值:null

事件触发后的回调。

  1. onStart(ev){}
onEnd
  • 类型:Function
  • 默认值:null
    事件结束后的回调函数,用于可以基于该回调函数进行相应的操作。
  1. onEnd(ev){
  2. // ev: Object 类型, 该对象包含的重要属性如下:
  3. // ev.data: Object 类型,被选中图形的原始数据
  4. // ev.shapeInfo: Object 类型,被选中图形的数据信息
  5. // ev.shape: Shape 实例,被选中的图形
  6. // ev.selected: 当前 shape 的选中状态
  7. const{ data, shapeInfo, shape, selected }= ev;
  8. }
defaultSelected
  • 类型:Object
  • 默认值:null
  1. chart.interaction('pie-select',{
  2. defaultSelected:{ name:'机器之血', percent:0.18, a:'1'}
  3. });

用于设置初始化默认选中的数据,只要传入对应的数据即可,详见 demo

注意: 如果需要使用该功能,请在 chart.render() 方法之后调用该交互方法。

实例

饼图选中


柱状图选中

interval-click.gif

使用

  1. const F2 =require('@antv/f2/lib/index');// 引入 F2
  2. require('@antv/f2/lib/interaction/interval-select');
  3.  
  4. // 调用,尽量在 chart.render() 方法之后调用
  5. chart.interaction('interval-select',{});

API

  1. chart.interaction('interval-select',{
  2. startEvent:{String},// 触发事件,默认为 tap 事件
  3. selectStyle:{Object},// 被选中图形的样式配置
  4. unSelectStyle:{Object},// 未被选中图形的样式配置
  5. selectAxis:{Boolean},// 是否高亮坐标轴文本
  6. selectAxisStyle:{Object},// 坐标轴文本被选中后的样式
  7. cancelable:{Boolean},// 是否允许取消选中,默认值为 true,表示允许
  8. onStart:{Function},// 事件触发后的回调
  9. onEnd:{Function},// 事件结束后的回调
  10. mode:{String},// 选中策略,默认为 'shape', 即击中柱子才会触发交互
  11. defaultSelected:{Object}// 设置默认选中的数据,该属性需要在 chart.render() 之后调用方可生效
  12. });

参数说明

startEvent
  • 类型:String
  • 默认值:'tap'
  • 说明:该交互原则上是手指点击后触发的,除去 'tap',还可以使用 'touchstart'
    选中交互的触发事件名称。
selectStyle
  • 类型:Object
  • 默认值:{fillOpacity: 1}
    用于设置被选中柱子的显示样式。
unSelectStyle
  • 类型:Object
  • 默认值:{fillOpacity: 0.4}
    用于设置未被选中柱子的显示样式。如果不需要设置,可以直接设置为 null
selectAxis
  • 类型:Boolean
  • 默认值:true
    是否高亮坐标轴文本,默认为 true,会高亮。如不需要,可以选择关闭。
selectAxisStyle
  • 类型:Object
  • 默认值:{ fontWeight: 'bold' }
    设置坐标轴文本高亮的样式。默认只是文字加粗。
cancelable
  • 类型:Boolean
  • 默认值:true
    当 shape 被选中后,再次点击是否允许取消选中,默认为 true,表示会取消选中。
onStart

类型:Function 默认值:null

事件触发后的回调。

  1. onStart(ev){
  2. // ev: Object 类型, 该对象包含的重要属性如下:
  3. // ev.data: Object 类型,被选中图形的原始数据
  4. // ev.shapeInfo: Object 类型,被选中图形的数据信息
  5. // ev.selected: 当前 shape 的选中状态
  6. const{ data, shapeInfo, shape, selected }= ev;
  7. }
onEnd
  • 类型: Function
  • 默认值:null
    事件结束后的回调函数,用于可以基于该回调函数进行相应的操作。
  1. onEnd(ev){
  2. // ev: Object 类型, 该对象包含的重要属性如下:
  3. // ev.data: Object 类型,被选中图形的原始数据
  4. // ev.shapeInfo: Object 类型,被选中图形的数据信息
  5. // ev.selected: 当前 shape 的选中状态
  6. const{ data, shapeInfo, shape, selected }= ev;
  7. }
mode
  • 类型:String
  • 默认值:'shape'
    选中策略,默认为 'shape', 即击中柱子才会触发交互。另一个可选值为 'range',即只要集中点落在该柱子的一定 x 方向范围内都会触发选中交互。
defaultSelected
  • 类型:Object
  • 默认值:null
  1. chart.interaction('ingterval-select',{
  2. defaultSelected:{ name:'机器之血', percent:0.18, a:'1'}
  3. });

用于设置初始化默认选中的数据,只要传入对应的数据即可,详见 demo

注意: 如果需要使用该功能,请在 chart.render() 方法之后调用该交互方法。

实例


Pan 平移

pan.gif

基于 Hammer.js 的 pan 事件: http://hammerjs.github.io/recognizer-pan/ 同时提供长按触发 tooltip 的交互。

使用

  1. const F2 =require('@antv/f2/lib/index');// 引入 F2
  2. require('@antv/f2/lib/interaction/pan');// 引入图表平移交互
  3.  
  4. // ... 创建 chart 实例
  5.  
  6. // 调用,需要在 chart.render() 方法之前调用
  7. chart.interaction('pan');

API

  1. chart.interaction('pan',{
  2. mode:{String},// 图表平移的方向,默认为 'x'
  3. panThreshold:{Number},// hammer.js 设置,用于设置触发 pan 事件的最小移动距离
  4. pressThreshold:{Number},// hammer.js 设置,用于设置触发 press 事件的设置
  5. pressTime:{Number},// hammer.js 设置,用于设置触发 press 事件的最小时间差
  6. limitRange:{Object},// 限制范围
  7. onStart:{Function},// 事件触发后的回调
  8. onProcess:{Function},// 事件进行中的回调
  9. onEnd:{Function}// 事件结束后的回调
  10. });

参数说明

mode
  • 类型:String
  • 默认值:'x'
    图表的平移方向,可设置 x 轴、y 轴以及 x、y 两个方向的平移操作。默认值为 'x',即 x 轴平移。
  1. mode:'x',// x 轴方向平移
  2. mode:'y',// y 轴方向平移
  3. mode:'xy',// x y 两个方向平移
注意,对于分类类型或者 TimeCat 类型的数据,只支持 x 轴方向的平移。
panThreshold
pressThreshold

长按会触发 tooltip。

pressTime

长按会触发 tooltip。

limitRange
  • 类型:Object
  • 默认值: {}
    用于设置图表平移的最大最小范围,需要同 x 或者 y 轴对应的数据字段对应,使用如下:
  1. // 假设 x 轴对应的数据字段名为 fieldA
  2. limitRange:{
  3. fieldA:{
  4. min:0,// 最小值
  5. max:100// 最大值
  6. }
  7. }

设置之后,图表只会在 x 轴的 0 - 100 数值范围内移动。

参见 demo:x 轴平移

onStart

类型:Function 默认值:null

事件触发后的回调。

  1. onStart(ev){}
onProcess

类型:Function 默认值:null

事件进行中的回调。

  1. onProcess(ev){}
onEnd
  • 类型: Function
  • 默认值:null
    事件结束后的回调函数,用于可以基于该回调函数进行相应的操作。
  1. onEnd(ev){}

实例


Pinch 缩放

pinch.gif

基于 Hammer.js 的 pinch 事件: http://hammerjs.github.io/recognizer-pinch/

使用

  1. const F2 =require('@antv/f2/lib/index');// 引入 F2
  2. require('@antv/f2/lib/interaction/pinch');// 引入图表缩放交互
  3.  
  4. // ... 创建 chart 实例
  5.  
  6. // 调用,需要在 chart.render() 方法之前调用
  7. chart.interaction('pinch');

API

  1. chart.interaction('pinch',{
  2. mode:{String},// 图表平移的方向,默认为 'x'
  3. minScale:{Number},// 缩小的最小倍数
  4. maxScale:{Number},// 放大的最大倍数
  5. onStart:{Function},// 事件触发后的回调
  6. onProcess:{Function},// 事件进行中的回调
  7. onEnd:{Function},// 事件结束后的回调
  8. pressThreshold:9,// hammer.js 设置,用于设置触发 press 事件的设置
  9. pressTime:251// hammer.js 设置,用于设置触发 press 事件的最小时间差
  10. });

参数说明

mode
  • 类型:String
  • 默认值:'x'
    图表的缩放方向,可设置 x 轴、y 轴以及 x、y 两个方向。默认值为 'x',即 x 轴方向的缩放。
  1. mode:'x',// x 轴方向
  2. mode:'y',// y 轴方向
  3. mode:'xy',// x y 两个方向
注意,对于分类类型或者 TimeCat 类型的数据,只支持 x 轴方向的缩放。
minScale
  • 类型:Number
  • 默认值:linear 类型数据为 null,分类类型以及 TimeCat 类型数据默认为 1
    设置图表缩小时的最小倍数。
maxScale
  • 类型:Number
  • 默认值:linear 类型数据为 null,分类类型以及 TimeCat 类型数据默认为 4
    设置图表放大时的最大倍数。
onStart

类型:Function 默认值:null

事件触发后的回调。

  1. onStart(ev){}
onProcess

类型:Function 默认值:null

事件进行中的回调。

  1. onProcess(ev){}
onEnd
  • 类型: Function
  • 默认值:null
    事件结束后的回调函数,用于可以基于该回调函数进行相应的操作。
  1. onEnd(ev){}
pressThreshold

长按会触发 tooltip。

pressTime

长按会触发 tooltip。

实例

原文: https://antv.alipay.com/zh-cn/f2/3.x/api/interaction.html