交互行为

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