Javascript Charts.js将画布宽度/高度设置为0，不显示任何内容

我正在尝试使用Charts.js创建默认的折线图，它们在示例中动态显示，并将其放在用户单击时弹出的div中。我的代码如下：

this.chartCanvas = document.createElement('canvas');
this.div.appendChild(this.chartCanvas);
this.chartCanvas.style.height = '480px';
this.chartCanvas.style.width = '900px';
this.chartCanvas.width = 900;
this.chartCanvas.height = 480;
this.ctx = this.chartCanvas.getContext('2d');

this.chart = new Chart(this.ctx).Line(data);

当我调用“new Chart”时，我的画布高度和宽度设置为0，正如我在inspector中看到的那样。当我对这个调用进行注释时，我的画布具有适当的宽度/高度，并按照预期显示。如果我在inspector中手动更改画布的高度/宽度，我的图表仍然不会显示

我的“数据”对象正是我直接从它们的折线图示例中剪切和粘贴的对象：

---

任何人都可以提供一些我可能出错的地方的见解，我对这个库是完全陌生的。

您的代码可以正常工作，除了输入错误。这条线

this.chartCanvs.style.width = '900px';

…应该是这样的：

this.chartCanvas.style.width = '900px';
//            ^ your code is missing this 'a'

这里是一个JS小提琴与打字错误修复：

---

此外，我强烈建议在遇到问题时打开浏览器的开发人员控制台。在控制台中很容易捕捉到这种情况。

问题在于，在调用图表时，画布及其所有父节点不能显示任何内容，因此，如果在弹出窗口中使用图表，则需要显示弹出窗口，构建图表，然后隐藏弹出窗口

正如这个提琴所显示的，如果您尝试在一个隐藏的div中构建一个图表，然后在超时时显示它，那么它将不起作用

如果您改为显示div，制作图表，然后隐藏div，它确实有效

---

上面的提琴可以工作，但如果您取消注释第40行，它就不能工作。

在我的例子中，画布需要用CSS

display:block包装在一个元素中
我的代码实际上没有输入错误，我将其放入堆栈溢出中，但是考虑到你的小提琴工作正常，我应该能够从中判断出它应该是什么，泰。没有控制台错误，我总是将其打开。我想知道您的
this.div.appendChild（this.chartCanvas）
调用是否有问题。在您的代码中，是否确定
this.div
是对DOM中存在的有效
的引用？是的。我相信我解决了这个问题。如果你看这个提琴：你可以看到，如果你将divs显示设置为“无”，然后在1秒超时时显示它，div显示（一个红色的矩形），但图表是空白的。如果注释掉this.div.style.display='none'；在27号线上，一切正常。由于我试图在一个最初隐藏的弹出窗口中显示图表，这可能是我的问题。我在代码中也确认了这一问题。如果在保存图表的弹出div显示出来之前我不创建图表，那么一切都正常。ChartJS必须使用容器div的innerHeight或innerWidth或类似的属性。这在我的angular5应用程序中非常有效。只需在画布周围放置一个。在vue appAny中的隐藏选项卡中为我工作解释了为什么会出现这种情况？@krummens，因为否则检查父元素的宽度和高度计算的代码将得到一个0值。只需设置一些元素：
display:unset
，然后控制台使用JS:
$0注销元素高度。clientHeight
（$0是元素），您将看到：0。（我现在就用你的注释试过了）=>对于元素，显示值最初是设置的（div=>block，span=>inline block），对于其他元素，如新的/自定义的，则不是。
//This will break it
//this.div.style.display = 'none';
this.chart = new Chart(this.ctx).Line(data);
this.div.style.display = 'none';