隐藏父容器时不呈现浮动图答案

【问题标题】：Flot graph does not render when parent container is hidden隐藏父容器时不呈现浮动图
【发布时间】：2018-10-20 21:52:39
【问题描述】：

我遇到了一个问题，即浮动图无法在选项卡式界面中呈现，因为占位符 div 是具有“显示：无”的 div 的子级。将显示轴，但没有图表内容。

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

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;
}

【问题讨论】：

标签： javascript jquery flot

【解决方案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()

【讨论】：

【解决方案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 只需点击“播放器”选项卡，您就会看到上面的示例。

【讨论】：

【解决方案3】：

这是一个常见问题解答：

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

【讨论】：

具有 visibility:hidden 的 div 实际上有尺寸，而具有 display:none 的 div 没有。
如果它是display:none div 的孩子，那么它不会吗？
是的，一个 display:none div 的子级没有可供 Flot 用于渲染图形的尺寸，在 IE 中肯定是这样。这就是这个不可见的加载 div 用来解决的问题，因为它被放置在任何容器 div 之外的顶层。

【解决方案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');
  }
});

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

【讨论】：

这主要是我在IE中看到的一个问题，并做了一个通用的解决方案。如果您在 IE8 中尝试您的示例，您可能会看到相同的问题。首先，你必须使用 excanvas.js 才能让它在 IE 中呈现。
添加 excanvas 后，在 IE7/9 中似乎可以正常工作：jsfiddle.net/dB8UZ/1

【解决方案5】：

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

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

这并不完美，因为您有时会看到可能缩小的非大小图形的闪光。此外，根据您使用的图表类型，某些格式和定位可能会关闭。

【讨论】：