domisooo / taro-f2-react Goto Github PK
View Code? Open in Web Editor NEW支持在 Taro React 开发小程序中,以 React 组件书写方式使用 F2 。
Home Page: https://www.npmjs.com/package/taro-f2-react
License: MIT License
支持在 Taro React 开发小程序中,以 React 组件书写方式使用 F2 。
Home Page: https://www.npmjs.com/package/taro-f2-react
License: MIT License
实测想要输出雷达图不可行。
相同环境 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
应该是主要原因。
@antv/f2: "^4.0.39",
Taro v3.5.10
在微信小程序上,饼图的点击事件不生效。
版本:
"@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)
error occurred in the component: at taro-canvas-core
单个页面使用多个图表时会重叠,只会绘制出最后的图表。我认为是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"
},
"@antv/f2": "^5.5.1",
"@tarojs/taro": "3.6.25",
"react": "^18.0.0",
"taro-f2-react": "^1.2.0",
错误详情:
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
`
/** @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",
}}
/>
);
};
引入报错 Component is not found in path "custom-wrapper"
@tarojs/taro: "3.5.0-beta.7"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.