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

唯一可以在没有任何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);
    });

以上示例适用于Click功能的Bootstrap标签。但是应该适用于任何隐藏的div或对象。

工作示例：http://topg.org/server-desteria-factions-levels-classes-tokens-id388539 只需点击＆＃34;玩家＆＃34;选项卡，您将看到上面的示例。

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

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

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

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

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

5 个答案: