antvis / F2

📱📈An elegant, interactive and flexible charting library for mobile.
https://f2.antv.vision/zh
MIT License
7.88k stars 646 forks source link

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

Open WangShuXian6 opened 2 months ago

WangShuXian6 commented 2 months ago

我使用 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

image image

版本

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