當父容器被隱藏時，Flot圖不會呈現

我遇到了一個問題，即flot圖不會在選項卡式界面中呈現，因爲佔位符div是'display：none'的div子元素。將顯示軸，但不顯示圖形內容。當父容器被隱藏時，Flot圖不會呈現

爲了解決這個問題，我編寫了下面的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; 
}

來源

2011-03-25 beauburrier

這一個是一個常見問題：

你#graphLoaderDiv必須有一個寬度和高度，不幸的是，無形的div沒有他們。相反，使其可見，但將其左側設置爲-10000px。然後，一旦準備好顯示它，只需將其設置爲0px（或其他）即可。

來源

2011-03-25 15:36:30 Ryley

具有可見性的div：hidden實際上有尺寸，它是帶顯示的div：沒有。 – beauburrier 2011-03-25 17:39:15

如果它是'display：none' div的孩子，那麼它不會嗎？ – Ryley 2011-03-25 18:38:46

對，顯示的孩子：沒有div的尺寸不可用於Flot用於渲染圖形，在IE中肯定。這就是這個隱形加載div用來解決這個問題的原因，因爲它被放置在任何容器div之外的頂層。 – beauburrier 2011-03-27 16:04:22

好的，現在我明白了你現在在說什麼......我仍然認爲你的回答太複雜了。我剛剛使用了一個標籤界面，在加載時圖形處於隱藏選項卡中。它似乎爲我工作得很好。

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

我沒有足夠的visibility:hidden位在那裏，但似乎有必要也沒有......

你也可以有visibility:hidden集，然後標籤的代碼更改爲類似這樣：

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

但是鑑於提供的信息，沒有一個看起來特別有必要。

來源

2011-03-26 23:11:01 Ryley

這主要是我在IE中看到的一個問題，併爲其提供了一個通用解決方案。如果你在IE8中嘗試你的例子，你可能會看到同樣的問題。首先，你必須使用excanvas.js才能在IE中渲染它。 – beauburrier 2011-03-27 16:08:27

似乎在IE7/9中正常工作，一旦我添加excanvas：http://jsfiddle.net/dB8UZ/1/ – Ryley 2011-03-28 15:11:22

也許這是更好的解決方案。它可以作爲替代的下降爲$.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()

來源

2012-11-07 17:43:14 jsd

，沒有任何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); 
    });

上面的例子適用於點擊功能的Bootstrap標籤。但應該爲任何隱藏的div或對象工作。

工作示例：http://topg.org/server-desteria-factions-levels-classes-tokens-id388539 只需單擊「播放器」選項卡，即可看到上面的示例。

來源

2014-09-27 02:40:14

謝謝，好的！總是更好地避免招數:) – 2015-01-29 07:27:24

我知道這有點舊，但你也可以嘗試使用Flot的Resize插件。

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

，因爲你有時會非大小的圖形可收縮的閃光燈，是不完美的。此外，根據您使用的圖形類型，某些格式和位置可能會關閉。

來源

2016-04-06 23:23:06 slopapa

當父容器被隱藏時，Flot圖不會呈現

回答

相關問題