G2 vue3引用g2报错index.esm.js:617 Uncaught TypeError: Cannot read properties of undefined (reading 'font')

问题描述

Uncaught TypeError: Cannot read properties of undefined (reading 'font') at TextRenderer.render (index.esm.js:617:28) at CanvasRendererPlugin.renderDisplayObject (index.esm.js:282:27) at eval (index.esm.js:202:31) at Array.forEach () at eval (index.esm.js:199:22) at eval (index.esm.js:8211:22) at Array.forEach () at SyncHook.call (index.esm.js:8209:24) at RenderingService.render (index.esm.js:10381:33) at Canvas.render (index.esm.js:15448:26) TextRenderer.render @ index.esm.js:617 CanvasRendererPlugin.renderDisplayObject @ index.esm.js:282 eval @ index.esm.js:202 eval @ index.esm.js:199 eval @ index.esm.js:8211 SyncHook.call @ index.esm.js:8209 RenderingService.render @ index.esm.js:10381 Canvas.render @ index.esm.js:15448 tick @ index.esm.js:15458 requestAnimationFrame (async) tick @ index.esm.js:15459 Canvas.run @ index.esm.js:15461 eval @ index.esm.js:15533 RenderingService.init @ index.esm.js:10331 Canvas.initRenderingService @ index.esm.js:15502 Canvas.initRenderer @ index.esm.js:15490 Canvas @ index.esm.js:15255 _createCanvas @ runtime.js:281 render @ runtime.js:77 mounted @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/view/ser/serDemoView.vue?vue&type=script&lang=js:163 callWithErrorHandling @ runtime-core.esm-bundler.js:284 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:293 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2813 flushPostFlushCbs @ runtime-core.esm-bundler.js:484 flushJobs @ runtime-core.esm-bundler.js:529 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:411 queueCb @ runtime-core.esm-bundler.js:433 queuePostFlushCb @ runtime-core.esm-bundler.js:439 queueEffectWithSuspense @ runtime-core.esm-bundler.js:1708 scheduler @ runtime-core.esm-bundler.js:1930 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:418 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 set value @ reactivity.esm-bundler.js:1074 finalizeNavigation @ vue-router.esm-bundler.js:3217 eval @ vue-router.esm-bundler.js:3090 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js:3061 push @ vue-router.esm-bundler.js:2989 install @ vue-router.esm-bundler.js:3406 use @ runtime-core.esm-bundler.js:4450 eval @ main.js:11 ./src/main.js @ app.js:2021 webpack_require @ app.js:5602 (anonymous) @ app.js:6724 webpack_require.O @ app.js:5648 (anonymous) @ app.js:6725 (anonymous) @ app.js:6727 Show 47 more frames Show less index.esm.js:7260 Uncaught (in promise) TypeError: filter.forEach is not a function at DefaultStyleValueRegistry.updateGeometry (index.esm.js:7260:20) at DefaultStyleValueRegistry.processProperties (index.esm.js:6914:22) at DisplayObject.internalSetAttribute (index.esm.js:12781:36) at DisplayObject.setAttribute (index.esm.js:12768:18) at eval (index.esm.js:13089:23) at Array.forEach () at DisplayObject.attr (index.esm.js:13088:31) at Path.eval (index.js:87:18) at Selection.each (selection.js:264:22) at eval (index.js:85:37) DefaultStyleValueRegistry.updateGeometry @ index.esm.js:7260 DefaultStyleValueRegistry.processProperties @ index.esm.js:6914 DisplayObject.internalSetAttribute @ index.esm.js:12781 DisplayObject.setAttribute @ index.esm.js:12768 eval @ index.esm.js:13089 DisplayObject.attr @ index.esm.js:13088 eval @ index.js:87 Selection.each @ selection.js:264 eval @ index.js:85 Selection.join @ selection.js:234 renderGridLine @ index.js:84 Grid.render @ index.js:163 Component.connectedCallback @ component.js:42 Canvas.mountChildren @ index.esm.js:15619 Element.appendChild @ index.esm.js:12147 Selection.append @ selection.js:78 eval @ grid.js:83 Selection.join @ selection.js:234 renderGrid @ grid.js:83 eval @ axis.js:63 ifShow @ if-show.js:11 Axis.render @ axis.js:63 Component.connectedCallback @ component.js:42 Canvas.mountChildren @ index.esm.js:15619 Element.appendChild @ index.esm.js:12147 append @ selection.js:91 eval @ plot.js:633 join @ selection.js:216 eval @ plot.js:629 eval @ plot.js:30 __awaiter @ plot.js:26 plotView @ plot.js:570 eval @ plot.js:169 each @ selection.js:250 eval @ plot.js:168 join @ selection.js:216 eval @ plot.js:163 fulfilled @ plot.js:27 Promise.then (async) step @ plot.js:29 fulfilled @ plot.js:27 Promise.then (async) step @ plot.js:29 fulfilled @ plot.js:27 Promise.then (async) step @ plot.js:29 eval @ plot.js:30 __awaiter @ plot.js:26 plot @ plot.js:62 eval @ render.js:94 Promise.then (async) render @ render.js:94 eval @ runtime.js:81 render @ runtime.js:81 mounted @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/view/ser/serDemoView.vue?vue&type=script&lang=js:163 callWithErrorHandling @ runtime-core.esm-bundler.js:284 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:293 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2813 flushPostFlushCbs @ runtime-core.esm-bundler.js:484 flushJobs @ runtime-core.esm-bundler.js:529 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:411 queueCb @ runtime-core.esm-bundler.js:433 queuePostFlushCb @ runtime-core.esm-bundler.js:439 queueEffectWithSuspense @ runtime-core.esm-bundler.js:1708 scheduler @ runtime-core.esm-bundler.js:1930 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:418 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 set value @ reactivity.esm-bundler.js:1074 finalizeNavigation @ vue-router.esm-bundler.js:3217 eval @ vue-router.esm-bundler.js:3090 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js:3061 push @ vue-router.esm-bundler.js:2989 install @ vue-router.esm-bundler.js:3406 use @ runtime-core.esm-bundler.js:4450 eval @ main.js:11 ./src/main.js @ app.js:2021 webpack_require @ app.js:5602 (anonymous) @ app.js:6724 webpack_require.O @ app.js:5648 (anonymous) @ app.js:6725 (anonymous) @ app.js:6727 Show 79 more frames Show less selection.js:13 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ownerDocument') at select (selection.js:13:51) at selectG2Elements (utils.js:63:68) at tooltip (tooltip.js:577:22) at eval (tooltip.js:719:16) at eval (plot.js:249:37) at Generator.next () at fulfilled (plot.js:27:58) select @ selection.js:13 selectG2Elements @ utils.js:63 tooltip @ tooltip.js:577 eval @ tooltip.js:719 eval @ plot.js:249 fulfilled @ plot.js:27 Promise.catch (async) render @ runtime.js:85 mounted @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/view/ser/serDemoView.vue?vue&type=script&lang=js:163 callWithErrorHandling @ runtime-core.esm-bundler.js:284 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:293 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2813 flushPostFlushCbs @ runtime-core.esm-bundler.js:484 flushJobs @ runtime-core.esm-bundler.js:529 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:411 queueCb @ runtime-core.esm-bundler.js:433 queuePostFlushCb @ runtime-core.esm-bundler.js:439 queueEffectWithSuspense @ runtime-core.esm-bundler.js:1708 scheduler @ runtime-core.esm-bundler.js:1930 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:418 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 set value @ reactivity.esm-bundler.js:1074 finalizeNavigation @ vue-router.esm-bundler.js:3217 eval @ vue-router.esm-bundler.js:3090 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js:3061 push @ vue-router.esm-bundler.js:2989 install @ vue-router.esm-bundler.js:3406 use @ runtime-core.esm-bundler.js:4450 eval @ main.js:11 ./src/main.js @ app.js:2021 webpack_require @ app.js:5602 (anonymous) @ app.js:6724 webpack_require.O @ app.js:5648 (anonymous) @ app.js:6725 (anonymous) @ app.js:6727 Show 36 more frames Show less index.esm.js:7260 Uncaught (in promise) TypeError: filter.forEach is not a function at DefaultStyleValueRegistry.updateGeometry (index.esm.js:7260:20) at DefaultStyleValueRegistry.processProperties (index.esm.js:6914:22) at DisplayObject.internalSetAttribute (index.esm.js:12781:36) at DisplayObject.setAttribute (index.esm.js:12768:18) at eval (index.esm.js:13089:23) at Array.forEach () at DisplayObject.attr (index.esm.js:13088:31) at Path.eval (index.js:87:18) at Selection.each (selection.js:264:22) at eval (index.js:85:37) DefaultStyleValueRegistry.updateGeometry @ index.esm.js:7260 DefaultStyleValueRegistry.processProperties @ index.esm.js:6914 DisplayObject.internalSetAttribute @ index.esm.js:12781 DisplayObject.setAttribute @ index.esm.js:12768 eval @ index.esm.js:13089 DisplayObject.attr @ index.esm.js:13088 eval @ index.js:87 Selection.each @ selection.js:264 eval @ index.js:85 Selection.join @ selection.js:234 renderGridLine @ index.js:84 Grid.render @ index.js:163 Component.connectedCallback @ component.js:42 Canvas.mountChildren @ index.esm.js:15619 Element.appendChild @ index.esm.js:12147 Selection.append @ selection.js:78 eval @ grid.js:83 Selection.join @ selection.js:234 renderGrid @ grid.js:83 eval @ axis.js:63 ifShow @ if-show.js:11 Axis.render @ axis.js:63 Component.update @ component.js:58 eval @ plot.js:640 eval @ selection.js:272 each @ selection.js:250 transition @ selection.js:271 eval @ plot.js:633 join @ selection.js:217 eval @ plot.js:629 eval @ plot.js:30 __awaiter @ plot.js:26 plotView @ plot.js:570 eval @ plot.js:172 each @ selection.js:250 eval @ plot.js:171 join @ selection.js:217 eval @ plot.js:163 fulfilled @ plot.js:27 Promise.then (async) step @ plot.js:29 fulfilled @ plot.js:27 Promise.then (async) step @ plot.js:29 fulfilled @ plot.js:27 Promise.then (async) step @ plot.js:29 eval @ plot.js:30 __awaiter @ plot.js:26 plot @ plot.js:62 eval @ render.js:94 Promise.then (async) render @ render.js:94 eval @ runtime.js:81 render @ runtime.js:81 _renderTrailing @ runtime.js:240 eval @ runtime.js:86 Promise.then (async) render @ runtime.js:86 mounted @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/view/ser/serDemoView.vue?vue&type=script&lang=js:163 callWithErrorHandling @ runtime-core.esm-bundler.js:284 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:293 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2813 flushPostFlushCbs @ runtime-core.esm-bundler.js:484 flushJobs @ runtime-core.esm-bundler.js:529 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:411 queueCb @ runtime-core.esm-bundler.js:433 queuePostFlushCb @ runtime-core.esm-bundler.js:439 queueEffectWithSuspense @ runtime-core.esm-bundler.js:1708 scheduler @ runtime-core.esm-bundler.js:1930 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:418 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 set value @ reactivity.esm-bundler.js:1074 finalizeNavigation @ vue-router.esm-bundler.js:3217 eval @ vue-router.esm-bundler.js:3090 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js:3061 push @ vue-router.esm-bundler.js:2989 install @ vue-router.esm-bundler.js:3406 use @ runtime-core.esm-bundler.js:4450 eval @ main.js:11 ./src/main.js @ app.js:2021 webpack_require @ app.js:5602 (anonymous) @ app.js:6724 webpack_require.O @ app.js:5648 (anonymous) @ app.js:6725 (anonymous) @ app.js:6727 Show 83 more frames Show less selection.js:13 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'ownerDocument') at select (selection.js:13:51) at selectG2Elements (utils.js:63:68) at tooltip (tooltip.js:577:22) at eval (tooltip.js:719:16) at updateInteractions (plot.js:231:41) at eval (plot.js:254:9) at Generator.next () at fulfilled (plot.js:27:58) select @ selection.js:13 selectG2Elements @ utils.js:63 tooltip @ tooltip.js:577 eval @ tooltip.js:719 updateInteractions @ plot.js:231 eval @ plot.js:254 fulfilled @ plot.js:27 Promise.catch (async) _renderTrailing @ runtime.js:246 eval @ runtime.js:86 Promise.then (async) render @ runtime.js:86 mounted @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/view/ser/serDemoView.vue?vue&type=script&lang=js:163 callWithErrorHandling @ runtime-core.esm-bundler.js:284 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:293 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2813 flushPostFlushCbs @ runtime-core.esm-bundler.js:484 flushJobs @ runtime-core.esm-bundler.js:529 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:411 queueCb @ runtime-core.esm-bundler.js:433 queuePostFlushCb @ runtime-core.esm-bundler.js:439 queueEffectWithSuspense @ runtime-core.esm-bundler.js:1708 scheduler @ runtime-core.esm-bundler.js:1930 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:418 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 eval @ reactivity.esm-bundler.js:1161 triggerEffect @ reactivity.esm-bundler.js:428 triggerEffects @ reactivity.esm-bundler.js:413 triggerRefValue @ reactivity.esm-bundler.js:1032 set value @ reactivity.esm-bundler.js:1074 finalizeNavigation @ vue-router.esm-bundler.js:3217 eval @ vue-router.esm-bundler.js:3090 Promise.then (async) pushWithRedirect @ vue-router.esm-bundler.js:3061 push @ vue-router.esm-bundler.js:2989 install @ vue-router.esm-bundler.js:3406 use @ runtime-core.esm-bundler.js:4450 eval @ main.js:11 ./src/main.js @ app.js:2021 webpack_require @ app.js:5602 (anonymous) @ app.js:6724 webpack_require.O @ app.js:5648 (anonymous) @ app.js:6725 (anonymous) @ app.js:6727 Show 39 more frames Show less

重现链接

No response

重现步骤

import { Chart } from "@antv/g2";

// 准备数据 const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, ];

// 初始化图表实例 const chart = new Chart({ container: 'containerId', });

// 声明可视化 chart .interval() // 创建一个 Interval 标记 .data(data) // 绑定数据 .encode('x', 'genre') // 编码 x 通道 .encode('y', 'sold'); // 编码 y 通道

// 渲染可视化 chart.render(); this.chart = chart; this.chart.render();