隐藏选项卡内的绘图,宽度= 0,高度= 400的尺寸无效

Question

当我在隐藏的标签中插入图表时,如第二,第三等,我有这个错误.这里是错误:

Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6.

我使用了bootstrap 2和jquery:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

这是图书馆:

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

和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;
}

带有每个图表id的div(总是将id更改为我需要显示的图表,如plotarea,pie,barmonth,baryear等):

<div id="plotarea"></div>

我添加这种样式来修复宽度错误.ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; },但即使这样,图表也不会在那些隐藏标签内绘制图表,只绘制第一个视图中的第一个标签...如果有一个表单,你现在可以吗？修理它？

我使用魅力模板.

最好的祝福!

Answer 1

好吧,我已经做到了!

如果你有这个库<script src="js/jquery.flot.resize.min.js"></script>,你只需要在styles.css(样式表文件)中更改它:

max-width: none;
height: 400px;

有了这个:

width: 100%;
height: 400px;

现在,图表总是在每个屏幕中调整大小.

Answer 2

我遇到过同样的问题.一个不同的解决方案对我有用.

• 确保设置高度和宽度
• 确保flot没有找到一些不存在的div.这是因为我从一个有三个图的页面复制它,而我使用了第一个和第三个.我可以通过使用chrome的控制台找到它(它在找不到页面中的第二个div后崩溃.因此第三个没有被绘制.只是注释掉js中未使用的绘图并且它工作正常)