Question

我正在尝试将flot图形添加到我的页面中，并且我在向图表添加大小调整时遇到了一些问题。要使resize插件工作宽度和高度，需要将占位符div设置为100％。但是当我这样做并且想要在新窗口中加载图形时，我尝试在doc准备好的情况下调用plot方法，但是高度og我的div是0，而是包含div har height = 600px（所以占位符div应该相同？）。

 <div id ="ResizableContainer" class="ui-widget-content" style="width:900px;height:600px;">
    <div id="placeholderForGraph" class="graph-placeholder" ></div>
</div>

my.css：

.graph-placeholder {
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
    padding: 0; 
    position: relative;
}

my.js

$("#placeholderForGraph").text('');
$("#ResizableContainer").show();
$("#placeholderForGraph").plot([data], options);<- error

错误：绘图的尺寸无效，宽度= 900，高度= 0

如果在调用绘图之前设置了高度，则图形将不会调整高度如何在不破坏调整大小能力的情况下为div添加高度？

提前致谢！

Answer 1

将min-height的{{1}}设置为合理的绝对值，例如.graph-placeholder。

我还建议为可调整大小的容器设置最小值和最大值（请参阅here）。

Answer 2

我的整个解决方案有点hacky但它确实有效。我首先将高度设置为与容器相同

 $("#ResizableContainer").show();
    if ($("#placeholderForGraph").height() === 0) {
        $("#placeholderForGraph").css('min-height', $("#ResizableContainer").height()); 
    }
    plot = $.plot($("#placeholderForGraph"), []);

然后使用我选择的数据和选项填写图表，之后我将样式更改为占位符：

 $("#placeholderForGraph").css('min-height', "100px");
 $("#placeholderForGraph").css('height', "100%");
 $("#placeholderForGraph").css('width', "100%");

非常感谢@Raidri的帮助：）

浮点图调整大小错误，高度无效

2 个答案: