jQuery चार्ट टैब में शामिल होने पर Google चार्ट बहुत छोटा लोड होता है

Question

मैं Google के line chart का उपयोग कर रहा हूं, लगभग डेमो - केवल डेटा बदल गया है - this jQuery tab plugin के अंदर कोई संशोधन नहीं है। शायद 50% समय, चार्ट 400x200 पर लोड होगा भले ही इसे 700x250 पर लोड करने के लिए निर्दिष्ट किया गया हो। युक्त div में उचित चौड़ाई और ऊंचाई होगी, लेकिन एपीआई द्वारा प्रस्तुत चार्ट को 400x200 पर इसके अंदर लोड किया जाएगा।

मुझे संदेह है कि यह इसलिए है क्योंकि जब एपीआई प्रस्तुत करने का प्रयास करता है तो टैब प्रदर्शित नहीं होते हैं। इसके कारण, यह उस चीज़ को प्रस्तुत करने का प्रयास करता है जो इसे शून्य मानता है और इसलिए स्वयं को सबसे छोटे डिफ़ॉल्ट संकल्प में मजबूर करता है।

मेरा विचार यह है कि यदि चार्ट का प्रदर्शन तब तक देरी हो सकती है जब तक उचित टैब क्लिक नहीं किया जाता है, यह समस्या का समाधान करेगा। अफसोस की बात है, मुझे नहीं पता कि यह कैसे करना है, और मेरा शोध फलदायी नहीं रहा है। सबसे नज़दीकी मुझे मिल सकता है this thread, लेकिन मुझे वहां कोई वास्तविक जवाब नहीं मिला।

यदि आपके पास कोई सलाह है तो मैं किसी भी सलाह की सराहना करता हूं, और यदि आवश्यक हो तो मुझे अधिक जानकारी के साथ पालन करने में खुशी होगी।

Answer 1

परिवर्तन चार्ट विकल्प चौड़ाई और ऊंचाई सेट करने के लिए के रूप में आप एक छिपा div में चार्ट प्रतिपादन (जो कि एक टैब यूआई के गैर चयनित टैब सबसे अधिक संभावना कर रहे हैं) की जरूरत है

var options = { 
      title: 'Company Performance' 
      ,width:900 
      ,height:500 
     }; 

Answer 2

दृश्य के साथ छेड़छाड़ न एपीआई की आयामों का पता लगाने की क्षमता, इसलिए आप दो चीजों में से एक करना चाहते हैं: या तो टैब को तत्काल करने से पहले सभी चार्ट प्रस्तुत करें, या (जैसा कि आपने इसे पकड़ लिया है) बाइबल ईवेंट श्रोताओं को टैब को पहली बार खोले जाने पर चार्ट खींचने के लिए बाध्य करें। चार्ट के विकल्पों में ऊंचाई और चौड़ाई निर्धारित करना सभी ब्राउज़रों में समस्या को हल करने के लिए अपर्याप्त है।

मैं easytabs प्रलेखन से अधिक स्कैन किया, और ऐसा लगता है कि आप इस तरह से कुछ करने के लिए सक्षम होना चाहिए:

// draw chart(s) in your default open tab 

// track which tabs you've drawn charts in 
var chartsDrawn = { 
    tab1: true, 
    tab2: false, 
    tab3: false 
    // etc 
}; 

$('#tab-container').bind('easytabs:after', function (e) { 
    if (e.tab == 'tab-2' && !chartsDrawn.tab2) { 
     // draw chart(s) in tab 2 
     chartsDrawn.tab2 = true; 
    } 
    else if (e.tab == 'tab-3' && !chartsDrawn.tab3) { 
     // draw chart(s) in tab 3 
     chartsDrawn.tab3 = true; 
    } 
    // etc 
}); 

Answer 3

यह वह जगह है मैं कैसे का उपयोग कर हल https://angular-ui.github.io/bootstrap/

<div class="google-chart" google-chart chart="chartObject1" on-ready="displayGoogleCharts()"></div> 

<tab heading="Past Week" select="googleChartSizeFix()"> 

googleChartSizeFix = function() { 
    $('svg').parent().css({ opacity:"0" }); 
    $(window).resize(); 
}; 

displayGoogleCharts = function() { 
    $('svg').parent().css({ opacity:"1" }); 
}; 

प्रत्येक कोणीय बूटस्ट्रैप समय टैब का चयन किया जाता है (फ़ंक्शन googleChartSizeFix ट्रिगर किया जाता है) Google चार्ट पारदर्शी (opacity = 0 पर सेट होता है, इसलिए यह छुपा() के उपयोग से गायब नहीं होता है, लेकिन इसकी सामग्री को तब तक रखा जाता है जब इसकी सामग्री पारदर्शी होती है) इसके बाद खिड़की का आकार ट्रिगर है घ, इस Google चार्ट बलों, div जिसमें यह है फिट करने के लिए की चौड़ाई 100% और ऊंचाई 100% उपयोग के द्वारा:

"options": { 
    "chartArea": { 
     "width":'100%', 
     "height":'100%' 
    } 
} 

और अंत में एक बार Google चार्ट तैयार (आकार बदलने के बाद) displayGoogleCharts समारोह शुरू हो रहा है और Google चार्ट की अस्पष्टता 1 पर रीसेट हो गई है, इसलिए सामग्री एक बार फिर दिखाई दे रही है।

Answer 4

मैं बूटस्ट्रैप टैब के इस "फीचर" में फंसे हुए थे। जब मेरे एचटीएमएल में कई टैब कट और पेस्ट करते हैं, तो मैंने गलती से सभी टैब के लिए "सक्रिय" स्थिति में < div class = "tab-pane active"> छोड़ा। नतीजा यह था कि सभी टैब के लिए सामग्री पहले टैब में अनुक्रमिक रूप से प्रदर्शित होती है, लेकिन जब आप टैब स्विच करते हैं तो चले जाते हैं।

छिपे हुए टैबों का मेरा समाधान उन्हें सक्रिय के रूप में परिभाषित करना है और फिर div.draw को कॉल करने के बाद div से "सक्रिय" कक्षा को हटा दें।

<div class="tab-pane active" id="myid" role="tabpanel"> 
    <script type="text/javascript"> 
     // all the chart stuff 
     chart.draw(data, options); 
     $('#myid').removeClass('active'); 
    </script> 
</div> 

मुझे लगता है कि jQuery टैब भी "सक्रिय" वर्ग का उपयोग करते हैं। शायद यह चाल भी वहां काम करेगी।