折线图平移：拖动图表事件未定义 Event is not defined

[WangShuXian6]

版本

"@antv/f2": "^5.5.1",
"@tarojs/taro": "3.6.25",
"react": "^18.0.0",
 "taro-f2-react": "^1.2.0",

使用 ScrollBar 组件时，左右拖动图表时会报错，图表也无法左右滑动。

错误详情:

ReferenceError: Event is not defined
    at FederatedPointerEvent.define.push../node_modules/@antv/g-lite/dist/index.esm.js.FederatedEvent.preventDefault (._node_modules_@antv_g-lite_dist_index.esm.js:8614)
    at ScrollBar.Zoom._doXPan (._node_modules_@antv_f2_es_components_zoom_index.js:384)
    at ._node_modules_@antv_f2_es_components_zoom_index.js:70
    at each (._node_modules_@antv_util_esm_lodash_each.js:11)
    at Rect.Zoom._this.onPan (._node_modules_@antv_f2_es_components_zoom_index.js:68)
    at EventService.define.push../node_modules/@antv/g-lite/dist/index.esm.js.EventService.notifyListeners (._node_modules_@antv_g-lite_dist_index.esm.js:10006)
    at EventService.define.push../node_modules/@antv/g-lite/dist/index.esm.js.EventService.notifyTarget (._node_modules_@antv_g-lite_dist_index.esm.js:9991)
    at EventService.define.push../node_modules/@antv/g-lite/dist/index.esm.js.EventService.propagate (._node_modules_@antv_g-lite_dist_index.esm.js:9726)
    at EventService.define.push../node_modules/@antv/g-lite/dist/index.esm.js.EventService.dispatchEvent (._node_modules_@antv_g-lite_dist_index.esm.js:9697)
    at Rect.define.push../node_modules/@antv/g-lite/dist/index.esm.js.EventTarget.dispatchEvent (._node_modules_@antv_g-lite_dist_index.esm.js:8981)(env: macOS,mp,1.06.2405020; lib: 2.25.3)

这是官方示例：

折线图平移
https://f2.antv.antgroup.com/examples/line/line/#pan

这是我的测试代码

index.tsx

import React, { useCallback, useRef } from 'react'
import { View, Text, Button, Image } from '@tarojs/components'
import F2Canvas from 'taro-f2-react'

import { Chart, Line, Point, Axis, ScrollBar } from '@antv/f2'
import { data } from './data/demo'
import styles from './index.module.scss'

const Index = () => {
  return (
    <View style={{ width: '100%', height: '260px' }}>
      <F2Canvas>
      <Chart data={data}>
          <Axis field="release" tickCount={5} nice={false} />
          <Axis field="count" />
          <Line x="release" y="count" />
          <Point x="release" y="count" />
          <ScrollBar mode="x" range={[0.1, 0.3]} />
        </Chart>
      </F2Canvas>
    </View>
  )
}

export default Index

[domisolo]

Hello，经过测试是 @antv/f2 5.x 版本的问题
如果必须用到 @antv/f2 5.x 中的特性可以给 @antv/f2 提 issues

或者可以将 taro-f2-react 降到 1.1.1 版本，@antv/f2 降到 4.0.51 版本，经实测 ScrollBar 滚动正常

{
  ...
  "dependencies": {
    "@antv/f2": "^4.0.51",
    "taro-f2-react": "^1.1.1"
  }
}

2024-06-28.00.01.43.mov

[WangShuXian6]

Hello，经过测试是 @antv/f2 5.x 版本的问题 如果必须用到 @antv/f2 5.x 中的特性可以给 @antv/f2 提 issues

或者可以将 taro-f2-react 降到 1.1.1 版本，@antv/f2 降到 4.0.51 版本，经实测 ScrollBar 滚动正常

{
  ...
  "dependencies": {
    "@antv/f2": "^4.0.51",
    "taro-f2-react": "^1.1.1"
  }
}

2024-06-28.00.01.43.mov

万分感谢大佬，的确可以了，但必须锁定版本，去掉版本的前的^！万分感谢！

[domisolo]

@WangShuXian6
感谢文章推荐
建议在小程序端使用 @antv/f2 4.x 版本，等待 5.x 版本小程序端完善后再切过去，我自己的项目中使用的也是 @antv/f2 4.x 的版本。