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

[lemongeek]

• **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
  });

    		chart.source(data);
    		chart.interval().position('year*sales');
    		chart.render();
  

[simaQ]

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

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

[lemongeek]

版本是最新版的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>

[simaQ]

这个 dom 是 吗？

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

[lemongeek]

正是

[simaQ]

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

[lemongeek]

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

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

[lemongeek]

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

[grainXianSen]

给作者小心心