曲线图调整大小错误，高度无效 [英] Flot graph resizing error, invalid height

问题描述

我试图添加flot图表到我的页面，我有一些问题，添加调整大小到图表。对于resize插件工作宽度和高度og占位符div需要设置为100％。
但是当我这样做，并希望在新窗口中加载图表我尝试调用的方法在doc准备好，但高度og我的div是0 althoug containg div har height = 600px（因此占位符div应该具有相同的？）。

I'm trying to add flot graph to my page, and i'm having some problems with adding resizing to the graph. For the resize plugin to work width and height og placeholder div need to be set to 100%. But when i do that and want to load the graph in new window i try to call the plot method on doc ready but the height og my div is 0 althoug the containg div har height = 600px(so the placeholder div should have the same?).

 <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

$ b b

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

Error: Invalid dimensions for plot, width = 900, height = 0

如果在调用绘图前设置高度，图形将不会调整高度
如何在div中添加高度而不破坏调整大小的能力？

If you set heigth before calling plot, the graph will not resize in height how can i add height to the div without destroying the resizing ability?

提前感谢！

推荐答案

我的整个修复是有点hacky，但它的工作原理。
我首先将高度设置为与容器相同

My whole fix is a bit hacky but it works. I first set the height to be the same as the containers

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

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

And then fill out the graph with data and options of my choice and after that i change the style og the placeholder:

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

感谢@Raidri的帮助：）

Big thanks to @Raidri for help :)

这篇关于曲线图调整大小错误，高度无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！