隐藏父容器时，不会呈现绘图图形

我遇到了一个问题，即flot图形不会在标签界面中呈现，因为占位符div是具有’display：none’的div的子元素。 将显示轴，但没有图形内容。

我在下面编写了javascript函数作为plot函数的包装器来解决这个问题。 对其他人做类似事情可能会有用。

function safePlot(placeholderDiv, data, options){ // Move the graph place holder to the hidden loader // div to render var parentContainer = placeholderDiv.parent(); $('#graphLoaderDiv').append(placeholderDiv); // Render the graph $.plot(placeholderDiv, data, options); // Move the graph back to it's original parent // container parentContainer.append(placeholderDiv); } 

这是图形加载器div的CSS，可以放在页面的任何位置。

 #graphLoaderDiv{ visibility: hidden; position: absolute; top: 0px; left: 0px; width: 500px; height: 150px; } 

Answer 1

也许这是更好的解决方案。 它可以用作$.plot()替代品：

 var fplot = function(e,data,options){ var jqParent, jqHidden; if (e.offsetWidth <=0 || e.offetHeight <=0){ // lets attempt to compensate for an ancestor with display:none jqParent = $(e).parent(); jqHidden = $("
"); $('body').append(jqHidden); jqHidden.append(e); } var plot=$.plot(e,data,options); // if we moved it above, lets put it back if (jqParent){ jqParent.append(e); jqHidden.remove(); } return plot; }; 

然后只需将您的电话转到$.plot()并将其更改为fplot()

Answer 2

唯一没有任何CSS技巧的东西是在这之后加载1秒后的情节：

 $('#myTab a[href="#tabname"]').on("click", function() { setTimeout(function() { $.plot($(divChartArea), data, options); }, 1000); }); 

或者对于较旧的jquery

 $('#myTab a[href="#tabname"]').click (function() { setTimeout(function() { $.plot($(divChartArea), data, options); }, 1000); }); 

以上示例适用于Clickfunction的Bootstrap标记。 但应该适用于任何隐藏的div或对象。

工作示例： http ： //topg.org/server-desteria-factions-levels-classes-tokens-id388539只需单击“播放器”选项卡，您就会看到上面的示例。

Answer 3

这个是FAQ：

你的#graphLoaderDiv必须有宽度和高度，不幸的是，不可见的div没有它们。 相反，使其可见，但将其左侧设置为-10000px 。 然后，一旦你准备好显示它，只需将它设置为0px（或其他）。

Answer 4

好的，我现在明白了你真正说的是什么……我仍然认为你的答案太复杂了。 我只是使用选项卡式界面尝试了这一点，其中图形在加载时位于隐藏选项卡中。 它似乎对我很好。

http://jsfiddle.net/ryleyb/dB8UZ/

我没有visibility:hidden在那里，但似乎没有必要……

您还可以拥有visibility:hidden集，然后将选项卡代码更改为以下内容：

 $('#tabs').tabs({ show: function(e,ui){ if (ui.index != 2) { return; } $('#graphLoaderDiv').css('visibility','visible'); } }); 

但鉴于所提供的信息，这些似乎都不是特别必要。

Answer 5

我知道这有点旧，但您也可以尝试使用File的Resize插件。

http://benalman.com/projects/jquery-resize-plugin/

它并不完美，因为你有时会获得可能缩小的非尺寸图形的闪光。 根据您使用的图表类型，也可能会关闭某些格式和定位。