jQuery 绘图尺寸无效，隐藏选项卡内的宽度 = 0，高度 = 400
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22310896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invalid dimensions for plot, width = 0, height = 400 inside of hidden tab
提问by asterix_jv
I have this error when I insert charts in hidden tabs like second, third, etc. here is the error:
当我在第二、第三等隐藏选项卡中插入图表时出现此错误。这是错误：
Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6.
I used bootstrap 2 and jquery:
我使用了引导程序 2 和 jquery：
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
Here are the libraries:
以下是图书馆：
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
And the css:
和CSS：
#plotarea
{
max-width: none;
height: 400px;
}
#pie
{
max-width: none;
height: 400px;
}
#barmonth
{
max-width: none;
height: 400px;
}
#baryear
{
max-width: none;
height: 400px;
}
The div with the id of every chart(always change the id to the chart I need to show, like plotarea, pie, barmonth, baryear, etc):
带有每个图表 id 的 div（总是将 id 更改为我需要显示的图表，例如 plotarea、pie、barmonth、baryear 等）：
<div id="plotarea"></div>
And I add this style to fix the width error .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; }, but even this the chart doesn't draw the charts inside of those hidden tabs only draw the first tab which is in the first view...can you now if there is a form to fix it?
我添加了这种样式来修复宽度错误.ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; }，但即使这样，图表也不会在这些隐藏选项卡内绘制图表，只绘制第一个视图中的第一个选项卡......如果有表格，你现在可以吗？修理它？
I use the charisma template.
我使用魅力模板。
Best regards!
此致！
回答by asterix_jv
Well I already made it!
好吧，我已经做到了！
If you have this library <script src="js/jquery.flot.resize.min.js"></script>, you only need to change this inside of styles.css(the stylesheets file):
如果你有这个库<script src="js/jquery.flot.resize.min.js"></script>，你只需要在styles.css（样式表文件）中更改它：
max-width: none;
height: 400px;
with this:
有了这个：
width: 100%;
height: 400px;
Now the charts always resize in every screen.
现在图表总是在每个屏幕上调整大小。
回答by my account_ram
I had the same issue. A different solution worked for me.
我遇到过同样的问题。一个不同的解决方案对我有用。
- Make sure you set the height and width
- Make sure flot is not looking for some div which DOES NOT exist. This was the case since I copied it from a page which had three plots, whereas I used the first and the third. I could locate it by using chrome's console (It crashed after not finding the second div in the page. Hence the third one was not being plotted. Just comment out the unused plotting in the js and it worked fine)
- 确保您设置了高度和宽度
- 确保 flot 不是在寻找一些不存在的 div。这是因为我从一个有三个图的页面复制它，而我使用了第一个和第三个。我可以使用 chrome 的控制台找到它（它在页面中找不到第二个 div 后崩溃了。因此第三个没有被绘制。只需在 js 中注释掉未使用的绘图，它就可以正常工作）
回答by dev101
I had same issue under IE8 and sometimes Android, mine charts are initially hidden with toggle function and that caused the error trying to plot a chart inside a hidden div. CSS was already defined, so that did not help.
我在 IE8 下遇到了同样的问题，有时在 Android 下，我的图表最初是用切换功能隐藏的，这导致尝试在隐藏的 div 中绘制图表时出现错误。CSS 已经定义了，所以没有帮助。
Moving jQuery hide and toggle code AFTER the plotting div elements solved the issue.
在绘制 div 元素后移动 jQuery 隐藏和切换代码解决了这个问题。
回答by Ash McConnell
I had similar trouble when the div wasn't hidden. It would show a similar error in IE11. It took a long time to track down that the container needs to be a block element, i.e. display: block. Hope this helps someone waste less time than me!
当 div 没有隐藏时，我遇到了类似的问题。它会在 IE11 中显示类似的错误。花了很长时间才发现容器需要是块元素，即display: block. 希望这有助于有人比我浪费更少的时间！
