javascript - Charts.js 将 Canvas 宽度/高度设置为 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);

当我调用“新图表”时，我的 Canvas 高度和宽度设置为 0，正如我在检查器中看到的那样。当我注释掉这个调用时，我的 Canvas 具有适当的宽度/高度并按预期显示。如果我在检查器中手动更改 Canvas 高度/宽度，我的图表仍然不会显示。

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

任何人都可以提供一些关于我可能出错的地方的见解，我对图书馆完全陌生。

Answer 1

在我的例子中， Canvas 需要用 CSS display: block; 包裹在一个元素中。