domisooo / taro-f2-react Goto Github PK

View Code? Open in Web Editor NEW

18.0 1.0 4.0 87 KB

支持在 Taro React 开发小程序中，以 React 组件书写方式使用 F2 。

Home Page: https://www.npmjs.com/package/taro-f2-react

License: MIT License

TypeScript 100.00%

taro tarojs antv antv-f2 f2 miniprogram mp react

taro-f2-react's People

Contributors

Stargazers

Watchers

Forkers

liuen12 liuen123 sqleo lhzbxx

taro-f2-react's Issues

在微信小程序上，页面滚动图表不会随着滚动，并且饼图的点击事件不生效。

在微信小程序上，饼图的点击事件不生效。

好像是canvas的错误

error occurred in the component: at taro-canvas-core

支持 @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 应该是主要原因。

引入报错 Component is not found in path "custom-wrapper"

@tarojs/taro: "3.5.0-beta.7"

document.defaultView undefined

微信开发者工具
taro:3.6.20
不知为何没有document.defaultView

现象

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

版本信息

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

效果

无法在钉钉环境下使用

配置
"@antv/f2": "^5.0.39",
"@tarojs/taro": "^3.6.18",
"taro-f2-react": "^1.1.2",

无法显示刻度

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

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

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

真机调试控制台显示：

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 微信小程序无法正常显示

"@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 之后也无法显示

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 };
`

单个页面使用多个图表

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

编译报错：TypeError: Cannot destructure property 'node' of 'res[0]' as it is null.

@antv/f2: "^4.0.39",
Taro v3.5.10

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.