Charts.js 将画布宽度/高度设置为 0 并且不显示任何内容 [英] Charts.js sets canvas width/height to 0 and displays nothing

问题描述

我正在尝试使用 Charts.js 制作它们在示例中动态显示的默认线图，并将其放入用户单击时弹出的 div 中.我的代码是这样的:

I am trying to use Charts.js to make the default line plot that they show in their example dynamically and put it in a div that I pop up on a user click. My code is like this:

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.当我注释掉这个调用时，我的画布具有正确的宽度/高度并按预期显示.如果我在检查器中手动更改画布高度/宽度，我的图表仍然不显示.

When I make the call to "new Chart" my canvas height and width are set to 0 as I can see in the inspector. When I comment out this call my canvas has the proper width/height and displays as one would expect. If I manually change the canvas height/width in the inspector my chart still doesn't display.

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

My "data" object is just what I cut and paste directly from their line chart example here: http://www.chartjs.org/docs/#line-chart-example-usage

谁能就我可能出错的地方提供一些见解，我对图书馆完全陌生.

Can anyone provide some insight on where I might be going wrong, I am completely new to the library.

推荐答案

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

It appears that the issue is that the canvas and all its parent nodes cannot have display none at the time the chart call is made so if you are using a chart in a popup you need to show the popup, construct the chart and then hide the popup.

正如此 Fiddle 所示，如果您尝试在隐藏的 div 中构建图表，然后在超时时显示它，则它不起作用.

As this Fiddle shows, if you try and construct a chart in a hidden div and then show it on a timeout it does not work.

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

If you instead show the div, make the chart and then hide the div, it does work.

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 行，则无效.

The above fiddle works, but if you uncomment line 40 it does not.

这篇关于Charts.js 将画布宽度/高度设置为 0 并且不显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！