antvis / antvis/F2

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

Open
#1,980 1 comment 0 reactions 0 assignees View on GitHub
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**:

![image](https://github.com/domisooo/taro-f2-react/assets/30850497/dd47c95c-e9b4-44df-b8ec-04115976664d)
![image](https://github.com/domisooo/taro-f2-react/assets/30850497/1a799b76-a001-47d1-9ec0-95a55143964c)

## 版本
```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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.