#1980·F2

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

Author: WangShuXian6Created Jun 28, 2024Updated Apr 21, 2026

我使用 taro3 开发微信小程序，使用 domisooo/taro-f2-react 来作为 taro 和 f2的兼容层，经过 taro-f2-react 作者的测试，该问题是@antv/f2 5.x 版本的问题。请求官方修复！

这是该问题在taro-f2-react的issues: https://github.com/domisooo/taro-f2-react/issues/21

F2 Version:^5.5.1
Platform:微信小程序，Taro实现版本
Mini Showcase(like screenshots):
CodeSandbox Link:

版本

bash

"@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

typescript

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

Source: antvis/F2

View original on GitHub View discussion on GitHub