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

Charts.js sets canvas width/height to 0 and displays nothing

本文关键字：显示 任何内 布宽度 设置 高度 js      更新时间：2023-09-26

我试图使用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，正如我在检查器中看到的那样。当我注释掉这个调用时，我的画布有适当的宽度/高度，并显示为人们所期望的。如果我在检查器中手动改变画布的高度/宽度，我的图表仍然不显示。

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

谁能提供一些我可能会出错的地方，我是一个全新的图书馆。

在我的例子中，画布需要用CSS display: block;

包裹在元素中。

问题似乎是画布及其所有父节点在图表调用时不能显示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行注释，它就不能了。

我找到了一个选项:

options: {
    responsive: false,
    ...

这与默认的true冲突。我不知道它现在能不能正常工作。当然，要为画布及其父元素设置宽度和高度

您的代码工作正常，除了一个错别字。这条线…

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

…应该是这样:

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

这里是一个JS的错误修复:http://jsfiddle.net/dun5dhne/

另外，我强烈建议在遇到问题时打开浏览器的开发人员控制台。这种事情很容易在控制台上被抓住。

相关文章：