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

Question

我遇到了一个问题,即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 = $("<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()

Answer 2

这是一个常见问题解答：

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