Git Product home page Git Product logo

taro-f2-react's Issues

支持 @antv/f2 5.x ?

实测想要输出雷达图不可行。
相同环境 getting-started 里简单的柱状图是没有问题的。

update:
已确定是因为升级 @antv/f2 至 5.x 才出现的问题，退回4.x即可

<F2Canvas id="myChart">
  {/* <Chart
    data={[
      { genre: "Sports", sold: 275 },
      { genre: "Strategy", sold: 115 },
      { genre: "Action", sold: 120 },
      { genre: "Shooter", sold: 350 },
      { genre: "Other", sold: 150 },
    ]}>
    <Interval x="genre" y="sold" />
  </Chart> */}
  <Chart
    data={[
      {
        item: "Design",
        user: "用户 A",
        score: 70,
      },
      {
        item: "Design",
        user: "用户 B",
        score: 30,
      },
      {
        item: "Development",
        user: "用户 A",
        score: 60,
      },
      {
        item: "Development",
        user: "用户 B",
        score: 70,
      },
      {
        item: "Marketing",
        user: "用户 A",
        score: 50,
      },
    ]}
    coord="polar"
    scale={{
      score: {
        min: 0,
        max: 120,
        nice: false,
        tickCount: 4,
      },
    }}>
    <Axis field="item" />
    <Axis field="score" />
    <Line x="item" y="score" color="user" />
    <Point x="item" y="score" color="user" />
    <Legend />
  </Chart>
</F2Canvas>
TypeError: canvas.canvas.get is not a function
    at Object.<anonymous> ([email protected]_node_modules_taro-f2-react_es_index.js:51)
    at Function.<anonymous> (WAServiceMainContext.js?t=wechat&s=1703467546811&v=3.1.5:1)
    at :59047/appservice/<SelectorQuery callback function>
    at WAServiceMainContext.js?t=wechat&s=1703467546811&v=3.1.5:1
    at WAServiceMainContext.js?t=wechat&s=1703467546811&v=3.1.5:1
    at Array.forEach (<anonymous>)
    at WAServiceMainContext.js?t=wechat&s=1703467546811&v=3.1.5:1(env: macOS,mp,1.06.2310080; lib: 3.1.5)
TypeError: this.canvas.getContext is not a function
    at OffscreenCanvasCreator.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.OffscreenCanvasCreator.getOrCreateCanvas (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:9947)
    at TextService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.TextService.measureFont (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:11224)
    at TextService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.TextService.measureText (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:11298)
    at TextUpdater.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.TextUpdater.update (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:8262)
    at DefaultStyleValueRegistry.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.DefaultStyleValueRegistry.updateGeometry (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:6939)
    at DefaultStyleValueRegistry.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.DefaultStyleValueRegistry.processProperties (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:6747)
    at DefaultStyleValueRegistry.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.DefaultStyleValueRegistry.recalc (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:6919)
    at Canvas.handleMounted (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:14774)
    at EventService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.EventService.notifyListeners (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:9877)
    at EventService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.EventService.dispatchEvent (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:9574)(env: macOS,mp,1.06.2310080; lib: 3.1.5)
TypeError: Cannot set property 'font' of undefined
    at TextService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.TextService.measureFont (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:11228)
    at TextService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.TextService.measureText (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:11298)
    at TextUpdater.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.TextUpdater.update (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:8262)
    at DefaultStyleValueRegistry.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.DefaultStyleValueRegistry.updateGeometry (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:6939)
    at DefaultStyleValueRegistry.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.DefaultStyleValueRegistry.processProperties (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:6747)
    at DefaultStyleValueRegistry.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.DefaultStyleValueRegistry.recalc (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:6919)
    at RenderingService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.RenderingService.renderDisplayObject (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:10124)
    at ._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:10157
    at Array.forEach (<anonymous>)
    at RenderingService.define.push../node_modules/.pnpm/@[email protected]/node_modules/@antv/g-lite/dist/index.esm.js.RenderingService.renderDisplayObject (._node_modules_.pnpm_@[email protected]_node_modules_@antv_g-lite_dist_index.esm.js:10156)(env: macOS,mp,1.06.2310080; lib: 3.1.5)
  "dependencies": {
    "@antv/f2": "^5.0.39",
    "@tarojs/components": "3.6.21",
    "@tarojs/helper": "3.6.21",
    "@tarojs/plugin-framework-react": "3.6.21",
    "@tarojs/plugin-html": "3.6.21",
    "@tarojs/plugin-platform-alipay": "3.6.21",
    "@tarojs/plugin-platform-h5": "3.6.21",
    "@tarojs/plugin-platform-jd": "3.6.21",
    "@tarojs/plugin-platform-qq": "3.6.21",
    "@tarojs/plugin-platform-swan": "3.6.21",
    "@tarojs/plugin-platform-tt": "3.6.21",
    "@tarojs/plugin-platform-weapp": "3.6.21",
    "@tarojs/react": "3.6.21",
    "@tarojs/runtime": "3.6.21",
    "@tarojs/shared": "3.6.21",
    "@tarojs/taro": "3.6.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.14.0",
    "taro-f2-react": "^1.1.2",
    ...
  }

简单柱状图TypeError: canvas.canvas.get is not a function错误同样存在，但不影响显示效果。TypeError: this.canvas.getContext is not a function 应该是主要原因。

无法正常展示图表

现象

控制台无报错，真机预览无报错，图表没有渲染出来

版本信息

  • "@tarojs/taro": "3.4.13",
  • "taro-f2-react": "^1.0.5",
  • "@antv/f2": "^4.0.42",

效果

image

taro 微信小程序无法正常显示

"@antv/f2": "^4.0.45",
"taro-f2-react": "^1.1.1",
"@tarojs/taro": "3.6.6",

index.js 已配置
compiler: {
type: "webpack5",
prebundle: { enable: false },
},
空白的
控制台没有报错
build 之后也无法显示
image

官方示例报错：Cannot read property 'node' of null

版本：

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

代码：

import { View } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import F2Canvas from "taro-f2-react";
import { Chart, Interval } from "@antv/f2";
import styles from "./index.module.scss";

const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 },
];

const data2 = [
  {
    name: "长津湖",
    percent: 0.4,
    a: "1",
  },
  {
    name: "我和我的父辈",
    percent: 0.2,
    a: "1",
  },
  {
    name: "失控玩家",
    percent: 0.18,
    a: "1",
  },
  {
    name: "宝可梦",
    percent: 0.15,
    a: "1",
  },
  {
    name: "峰爆",
    percent: 0.05,
    a: "1",
  },
  {
    name: "其他",
    percent: 0.02,
    a: "1",
  },
];

interface Props {}

const HealthRecords = ({}: Props) => {
  useLoad(() => {
    console.log("Page loaded.");
  });
  useLoad(() => {
    console.log("Page loaded.");
  });

  return (
    <View className='index'>
      <View style={{ width: "100%", height: "260px" }}>
        <F2Canvas id='f2Canvas1'>
          <Chart data={data}>
            <Interval x='genre' y='sold' />
          </Chart>
        </F2Canvas>
      </View>

      <View style={{ width: "100%", height: "260px" }}>
        <F2Canvas id='f2Canvas2'>
          <Chart
            data={data2}
            coord={{
              type: "polar",
              transposed: true,
            }}
          >
            <Interval x='a' y='percent' adjust='stack' color='name' />
          </Chart>
          <Chart
            data={data}
            coord={{
              type: "polar",
            }}
          >
            <Interval x='name' y='percent' color='name' />
          </Chart>
        </F2Canvas>
      </View>
    </View>
  );
};

export default HealthRecords;
TypeError: Cannot read property 'node' of null
    at Object.<anonymous> (._node_modules_taro-f2-react_es_index.js:52)
    at Function.<anonymous> (WAServiceMainContext.js?t=wechat&s=1719464693810&v=2.25.3:1)
    at :57054/appservice/<SelectorQuery callback function>
    at WAServiceMainContext.js?t=wechat&s=1719464693810&v=2.25.3:1
    at WAServiceMainContext.js?t=wechat&s=1719464693810&v=2.25.3:1
    at Array.forEach (<anonymous>)
    at WAServiceMainContext.js?t=wechat&s=1719464693810&v=2.25.3:1
    at WAServiceMainContext.js?t=wechat&s=1719464693810&v=2.25.3:1
    at WASubContext.js?t=wechat&s=1719464693810&v=2.25.3:1
    at Y (WASubContext.js?t=wechat&s=1719464693810&v=2.25.3:1)(env: macOS,mp,1.06.2405020; lib: 2.25.3)

单个页面使用多个图表

单个页面使用多个图表时会重叠，只会绘制出最后的图表。我认为是canvas的id固定写死了。可不可以改成动态id呢？

微信开发者工具中正常显示的图表在真机调试中报错并无法显示

真机调试控制台显示：

VM13:2 SystemError (appServiceSDKScriptError)
g.g.Canvas is not a constructor
TypeError: g.g.Canvas is not a constructor
    at dU (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:1319279)
    at new pU (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:1319656)
    at nq (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:1359502)
    at eval (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:1360356)
    at Generator.next (<anonymous>)
    at n (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:3841)
    at s (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:4044)
    at H (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:71202)
    at eval (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:72829)
    at I (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:40901)
VM13:2 MiniProgramError
Cannot set property 'width' of null
TypeError: Cannot set property 'width' of null
    at Object.eval (weapp:///package-details/pages/note/note.js:19087:18)
    at Function.eval (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:1776167)
    at <SelectorQuery callback function>
    at eval (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:166059)
    at eval (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:1776270)
    at Array.forEach (<anonymous>)
    at eval (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:1776258)
    at H (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:71202)
    at eval (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:71424)
    at I (eval at Ce.t.call.document (http://127.0.0.1:46009/remote-debug/runtime.js?devtools_ignore=true:1:18937), <anonymous>:2:40901)

开发环境没有报错信息

  "dependencies": {
    "taro-f2-react": "^1.1.2",
    "@antv/f2": "^4.0.51",
    "@babel/runtime": "^7.23.6",
    "@taro-hooks/plugin-react": "^2.0.8",
    "@tarojs/components": "3.6.21",
    "@tarojs/components-advanced": "^3.6.21",
    "@tarojs/helper": "3.6.21",
    "@tarojs/plugin-framework-react": "3.6.21",
    "@tarojs/plugin-html": "3.6.21",
    "@tarojs/plugin-platform-alipay": "3.6.21",
    "@tarojs/plugin-platform-h5": "3.6.21",
    "@tarojs/plugin-platform-jd": "3.6.21",
    "@tarojs/plugin-platform-qq": "3.6.21",
    "@tarojs/plugin-platform-swan": "3.6.21",
    "@tarojs/plugin-platform-tt": "3.6.21",
    "@tarojs/plugin-platform-weapp": "3.6.21",
    "@tarojs/react": "3.6.21",
    "@tarojs/runtime": "3.6.21",
    "@tarojs/shared": "3.6.21",
    "@tarojs/taro": "3.6.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-refresh": "^0.14.0"
  },

无法显示刻度

Taro: 3.6.23
"@antv/f2": "^5.4.2",
"taro-f2-react": "^1.1.2",

可以正常显示Line， 但是添加Axis后无法显示刻度信息

image image

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

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

微信小程序下图形标签渲染不出来，H5正常

`
/** @jsxImportSource @antv/f2 */

const Hello = () => {
return (

<rect
attrs={{
x: 10,
y: 10,
width: 40,
height: 40,
lineWidth: "2px",
stroke: "#000",
fill: "red",
}}
/>
<circle
attrs={{
x: 80,
y: 30,
r: 20,
lineWidth: "2px",
stroke: "#000",
fill: "red",
}}
/>
<text
attrs={{
x: 120,
y: 30,
text: "文本",
fontSize: 20,
fill: "#000",
}}
/>

);
};

export { Hello };
`
1683869990166
1683870011351

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.