折线图平移:拖动图表事件未定义 Event is not defined
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description
>我使用 taro3 开发微信小程序,使用 [domisooo](https://github.com/domisooo)/[taro-f2-react](https://github.com/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`
```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 (
)
}
export default Index
```
Contributor guide
Research direction
Start with the official line-chart pan example and reproduce the failure using the provided Taro WeChat Mini Program code with ScrollBar. Trace ScrollBar.Zoom._doXPan into @antv/g-lite's FederatedPointerEvent.preventDefault, where the stack reports Event is not defined. Done means horizontal dragging works without the ReferenceError on the stated F2 and Taro versions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization, mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100