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中未使用的绘图并且它工作正常）

Answer 3

我在IE8下有同样的问题，有时Android，我的图表最初隐藏了切换功能，导致错误尝试在隐藏的div中绘制图表。 CSS已经定义，所以没有帮助。

在绘制div元素解决问题之后移动jQuery隐藏和切换代码。

Answer 4

未隐藏div时，我遇到了类似的麻烦。它将在IE11中显示类似的错误。花费很长时间来追踪该容器需要成为一个块元素，即display: block。希望这可以帮助某人比我少浪费时间！

Answer 5

以上答案均不适合我。

我这样解决了：

<div id="flot-line-chart-moving" style="width:500px;height: 200px;"></div>

我们可以通过手动设置宽度来解决错误，但是问题是，宽度在上面的代码中是硬编码的，并且您并不总是希望图表使用500px。

所以图表绘制成功后，我们可以通过jquery设置图表的宽度：

$('#flot-line-chart-moving').css('width','100%');

您还需要添加

<script src="js/jquery.flot.resize.min.js"></script>

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

5 个答案: