交互行为

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

    说明

    交互模块默认没有打包至 模块包中。使用时需要手动引入，如下：

    • 调用
    1. chart.interaction('name', config);
    • 清除交互行为
    1. chart.clearInteraction()       // 清除 chart 实例上所有的交互行为
    2. chart.clearInteraction('name') // 清除名称为 'type' 的交互行为

    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() 之后调用方可生效

    参数说明

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

    动画参数的设置详见：。

    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. });

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

    注意： 如果需要使用该功能，请在 方法之后调用该交互方法。

    实例

    interval-click.gif

    使用

    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}
      用于设置未被选中柱子的显示样式。如果不需要设置，可以直接设置为 。
    selectAxis
    • 类型：Boolean
    • 默认值：true
      是否高亮坐标轴文本，默认为 true，会高亮。如不需要，可以选择关闭。
    selectAxisStyle
    • 类型：Object
    • 默认值：{ fontWeight: 'bold' }
      设置坐标轴文本高亮的样式。默认只是文字加粗。
    cancelable
    • 类型：Boolean
    • 默认值：true
      当 shape 被选中后，再次点击是否允许取消选中，默认为 true，表示会取消选中。
    onStart

    事件触发后的回调。

    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。

    注意： 如果需要使用该功能，请在 方法之后调用该交互方法。

    实例

    基于 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 两个方向平移
    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

    onProcess

    类型：Function 默认值：null

    事件进行中的回调。

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

    pinch.gif

    基于 Hammer.js 的 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 两个方向
    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。

    实例