隐藏父容器时，不会呈现绘图图形 [英] Flot graph does not render when parent container is hidden

问题描述

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

I was having an issue where a flot graph would not render in a tabbed interface because the placeholder divs were children of divs with 'display: none'. The axes would be displayed, but no graph content.

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

I wrote the javascript function below as a wrapper for the plot function in order to solve this issue. It might be useful for others doing something similar.

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，可以放置
页面上的任何位置。

Here is the CSS for the graph loader div which can be placed anywhere on the page.

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

推荐答案

也许这是更好的解决方案。它可以用作替换 $。plot（）：

Perhaps this is better solution. It can be used as a drop in replacement for $.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 = $("<div style='visibility:hidden'></div>");
    $('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（）

Then just take your call to $.plot() and change it to fplot()

这篇关于隐藏父容器时，不会呈现绘图图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！