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

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);

当我调用"新图表"时,我的画布高度和宽度设置为0,正如我在检查器中看到的那样.当我注释掉这个调用时,我的画布具有适当的宽度/高度并显示为人们所期望的.如果我在检查器中手动更改画布高度/宽度,我的图表仍然不会显示.

我的"数据"对象就是我直接从他们的折线图中剪切和粘贴的对象:http://www.chartjs.org/docs/#line-chart-example-usage

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

Answer 1

在我的情况下,画布需要用CSS包装在一个元素中 display: block;

Answer 2

似乎问题是画布及其所有父节点在进行图表调用时不能显示none,因此如果您在弹出窗口中使用图表,则需要显示弹出窗口,构造图表然后隐藏弹出.

正如这个小提琴所示,如果你试图在一个隐藏的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行则没有.