VUE中引入antv/f2不可用，报错 Cannot read property 'addGroup' of undefined about f2 HOT 8 CLOSED

自己研究了一下，已经解决!是因为VUE的设计原理【生命周期】的问题。要使antv/f2能正常使用，必须要等【dom树全部加载完成】，具体做法是将执行方法置于 this.$nextTick(() => {})的函数体中。即this.$nextTick(() => {....your code..})。 最后感谢作者大大开发了这么好的东西。

from f2.

请贴下源码以及使用的 antv/f2 版本。

创建 chart 的时候，需要传入 canvas dom，我看看是不是这个原因。

from f2.

版本是最新版的3.1.1
代码： const data = [
{ year: '1951 年', sales: 38 },
{ year: '1952 年', sales: 52 },
{ year: '1956 年', sales: 61 },
{ year: '1957 年', sales: 145 },
{ year: '1958 年', sales: 48 },
{ year: '1959 年', sales: 38 },
{ year: '1960 年', sales: 38 },
{ year: '1962 年', sales: 38 },
];
const chart = new this.$F2.Chart({
id: 'c1',
width: 375,
height: 265,
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.interval().position('year*sales');
chart.render();

其中c1是对应的dom id ：<canvas id="c1" width="400" height="260"></canvas>

from f2.

这个 dom 是 吗？

<canvas id="c1"></canvas>

from f2.

正是

from f2.

vue 我不太熟悉，报这个错误应该是没有找到这个 dom 容器，你看下是不是 dom 容器还未加载导致的？

from f2.

在Chrome中 页面中该canvas已经渲染出来了：渲染为

调试信息确实是报dom id 的问题

from f2.

给作者小心心

from f2.