Question

我正在尝试使用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);

当我打电话给＆＃34;新图表＆＃34;正如我在检查器中看到的那样，我的画布高度和宽度设置为0。当我注释掉这个调用时，我的画布具有适当的宽度/高度并显示为人们所期望的。如果我在检查器中手动更改画布高度/宽度，我的图表仍然无法显示。

我的＆＃34;数据＆＃34;对象就是我直接从其折线图示例中剪切和粘贴的内容：http://www.chartjs.org/docs/#line-chart-example-usage

任何人都可以对我可能出错的地方提供一些见解，我对图书馆来说是全新的。

Answer 1

在我的情况下，画布需要用CSS display: block;

包装在一个元素中

Answer 2

看来问题是画布及其所有父节点在进行图表调用时不能显示任何一个，因此如果您在弹出窗口中使用图表，则需要显示弹出窗口，构建图表和然后隐藏弹出窗口。

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

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

http://jsfiddle.net/bjudheoq/4/

//This will break it
//this.div.style.display = 'none';
this.chart = new Chart(this.ctx).Line(data);
this.div.style.display = 'none';

以上小提琴有效，但如果你取消注释第40行则不然。

Answer 3

您的代码有效，但拼写错误除外。这条线......

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

......应该是这样的：

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

这里有一个错误的JS小提琴：http://jsfiddle.net/dun5dhne/

此外，我强烈建议您在遇到问题时打开浏览器的开发者控制台。这种东西很容易在控制台中捕获。

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

3 个答案: