Vue+G2:Please specify the container for the chart! + Cannot read property ‘appendChild‘ of null

研究了一下午，终于搞懂了是为啥。

先看一下代码，两个tab标签页，其中一个放chart的挂在节点，但是初始化的时候一直报两个错。

    <a-tabs default-active-key="1" @change="callback"><a-tab-pane key="1" tab="预览"><a-tablesize="small":pagination="false":scroll="{x: 10000, y: 500}":columns="columns":data-source="data"></a-table></a-tab-pane><a-tab-pane key="3" tab="可视化"><div id="chartMountNode"></div></a-tab-pane></a-tabs>

      const graphMountNode = document.getElementById("chartMountNode")this.chart = new G2.Chart({container: graphMountNode,width: 600,height: 300});

`Please specify the container for the chart!`

这个是因为chartMountNode的div不存在导致的，在G2画图之前div还没有渲染。

但问题是，default-active-key指定的是1，所以3标签页里挂载节点的div还没有渲染，所以，不能放在这里。

`TypeError: Cannot read property 'appendChild' of null`

      this.chart = new G2.Chart({container: "chartMountNode",width: 600,height: 300});

这个不知道是为啥，直接从文档里复制过来的代码结果不能运行，只能用document.getElementById先获取元素。

Vue+G2:Please specify the container for the chart! + Cannot read property ‘appendChild‘ of null相关推荐

报错，atmSecondMenu.vue?bcc9:231 Uncaught (in promise) TypeError: Cannot read property ‘length‘ of null
问题: atmSecondMenu.vue?bcc9:231 Uncaught (in promise) TypeError: Cannot read property 'length' of nul ...
vue报错问题记录1-Cannot read property '0' of null
1.场景描述项目采用element ui组件库,出现这个问题是在表格中套用标签. <template>.....<el-table-columnprop="blogTag ...
Vue报错：Uncaught TypeError: Cannot assign to read only property ‘exports‘ of object 的解决方法
Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法参考文章: (1)Vue ...
[Vue warn]: Error in callback for watcher “lists“: “TypeError: Cannot read property ‘length‘ of unde
[Vue warn]: Error in callback for watcher "lists": "TypeError: Cannot read property ' ...
vue.js:597 [Vue warn]: Error in callback for watcher dat: TypeError: Cannot read property 'call'
vue.js:597 [Vue warn]: Error in callback for watcher "dat": "TypeError: Cannot read p ...
[Vue warn]: Error in v-on handler (Promise/async): “TypeError: Cannot read property ‘status‘ of 问题详解
错误样式: [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'stat ...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法...
发现问题运行一下以前的一个Vue+webpack的 vue仿新闻网站小项目,报错由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncau ...
vue引入three.js3维地图_vue-chartjs使用 Chart.js 和 Vue.js 搭建简单和漂亮的图表
简介 vue-chartjs 让你在 Vue 中能更好的使用 Chart.js . 非常适合想要尽快启动和运行简单图表的人.它抽象了一些简单的逻辑, 但是也暴露了 Chart.js 对象, 提供了极大 ...
Please specify the container for the chart!
翻译为:请指定图表的容器! 我这边是使用antV来可视化,和echarts差不多首先会有一个div来承载展示内容下面当然会有js来渲染展示我这边的主要内容就是js在渲染展示内容的时候,指定的di ...

Vue+G2:Please specify the container for the chart! + Cannot read property ‘appendChild‘ of null

`Please specify the container for the chart!`

`TypeError: Cannot read property 'appendChild' of null`

Vue+G2:Please specify the container for the chart! + Cannot read property ‘appendChild‘ of null相关推荐

最新文章

热门文章