जब पैरेंट कंटेनर छुपाया जाता है तो फ्लोट ग्राफ़ प्रस्तुत नहीं होता है

Question

मुझे कोई समस्या हो रही थी जहां एक फ़्लोट ग्राफ़ एक टैबड इंटरफ़ेस में प्रस्तुत नहीं करेगा क्योंकि प्लेसहोल्डर divs divs के बच्चे 'डिस्प्ले: none' के साथ थे। अक्ष प्रदर्शित होंगे, लेकिन कोई ग्राफ सामग्री नहीं।

मैंने इस मुद्दे को हल करने के लिए साजिश समारोह के लिए एक रैपर के रूप में नीचे जावास्क्रिप्ट फ़ंक्शन लिखा था। यह दूसरों के लिए कुछ ऐसा करने के लिए उपयोगी हो सकता है।

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 जो पृष्ठ पर कहीं भी रखा जा सकता है के लिए सीएसएस है।

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

Answer 1

यह एक एक पूछे जाने वाले प्रश्न है:

आपका #graphLoaderDiv की चौड़ाई और ऊंचाई, और दुर्भाग्य से होना आवश्यक है, अदृश्य divs उन्हें जरूरत नहीं है। इसके बजाय, इसे दृश्यमान बनाएं, लेकिन इसके बाएं को -10000px पर सेट करें। फिर एक बार जब आप इसे दिखाने के लिए तैयार हो जाते हैं, तो बस इसे 0px (या जो कुछ भी) पर छोड़ दें।

Answer 2

ठीक है, मैं अब बेहतर समझ रहा हूं कि आप वास्तव में क्या कह रहे हैं ... मुझे अभी भी लगता है कि आपका जवाब बहुत जटिल है। मैंने बस एक टैबड इंटरफेस का उपयोग करके यह कोशिश की जहां ग्राफ़ लोड होने पर एक छिपे हुए टैब में है। ऐसा लगता है कि मेरे लिए ठीक काम करता है।

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 3

शायद यह बेहतर समाधान है। यह $.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 4

के लिए यह केवल एक चीज है कि किसी भी सीएसएस चाल के बिना काम करता बदल रहा है साजिश लोड करने के लिए 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); 
    }); 

उपर्युक्त उदाहरण क्लिक मज़े के लिए बूटस्ट्रैप टैग पर लागू किया गया है। लेकिन किसी भी छिपे हुए div या वस्तु के लिए काम करना चाहिए।

कार्य उदाहरण: http://topg.org/server-desteria-factions-levels-classes-tokens-id388539 बस "प्लेयर" टैब पर क्लिक करें और आप उपरोक्त उदाहरण को कार्रवाई में देखेंगे।

Answer 5

मुझे पता है कि यह थोड़ा पुराना है लेकिन आप फ्लोट के लिए आकार बदलें प्लगइन का उपयोग करने का भी प्रयास कर सकते हैं।

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

यह सही है क्योंकि आप कभी कभी गैर आकार ग्राफ जो सिकुड़ किया जा सकता है की एक फ्लैश मिलेगा नहीं है।आपके द्वारा उपयोग किए जा रहे ग्राफ के प्रकार के आधार पर कुछ प्रारूपण और स्थिति बंद हो सकती है।