New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
VUE中引入antv/f2不可用,报错 Cannot read property 'addGroup' of undefined #82
Comments
请贴下源码以及使用的 antv/f2 版本。 创建 chart 的时候,需要传入 canvas dom,我看看是不是这个原因。 |
版本是最新版的3.1.1 其中c1是对应的dom id : |
这个 dom 是 吗? <canvas id="c1"></canvas> |
正是 |
vue 我不太熟悉,报这个错误应该是没有找到这个 dom 容器,你看下是不是 dom 容器还未加载导致的? |
自己研究了一下,已经解决!是因为VUE的设计原理【生命周期】的问题。要使antv/f2能正常使用,必须要等【dom树全部加载完成】,具体做法是将执行方法置于 this.$nextTick(() => {})的函数体中。即this.$nextTick(() => {....your code..})。 最后感谢作者大大开发了这么好的东西。 |
给作者小心心 |
**F2 Version3.1.1:
代码如下【和实例代码一致】
html:
<canvas
id="c1" width="400" height="260">script:
import
F2 from '@antv/f2'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 F2.Chart({
id: 'c1',
width: 375,
height: 265,
pixelRatio: window.devicePixelRatio
});
The text was updated successfully, but these errors were encountered: