छिपे हुए तत्वों को प्रदर्शित होने के बाद ठीक से लोड नहीं किया गया है

Question

मेरे पास एक टैबड टॉगल आंकड़ा पृष्ठ है, जिसमें 10 अलग-अलग टैब हैं जिनमें चार्ट शामिल हैं। प्रत्येक टैब पर क्लिक करके, प्रीलोडेड संबंधित चार्ट दिखाया जा रहा है। हालांकि, यह इसके कंटेनर में स्केल नहीं करता है। अधिक अजीब बात यह है कि, जब मैं खिड़की का आकार बदलता हूं, दृश्यमान चार्ट ठीक से दिखाया जाता है (मुझे लगता है कि यह कुछ पुनर्मूल्यांकन चीज करता है)। मुझे अपने कोड को कैसे संशोधित करना चाहिए ताकि यह क्लिक के बाद पुनर्मूल्यांकन चीज हो या समस्या पर कोई सुझाव हो?

यहाँ मेरी jsfiddle है: http://jsfiddle.net/g66ut7c6/

<!--BEGIN TABS--> 
       <div class="tabbable tabbable-custom"> 
        <ul class="nav nav-tabs"> 
        <li> 
         <a href="#tab_1_1" data-toggle="tab"> 
         1 
         </a> 
        </li> 
        <li> 
         <a href="#tab_1_2" data-toggle="tab"> 
         2 
         </a> 
        </li> 
        <li> 
         <a href="#tab_1_3" data-toggle="tab"> 
         3 
         </a> 
        </li> 
        </ul> 
        <div class="tab-content"> 
        <div class="tab-pane" id="tab_1_1"> 
         <div class="scroller"> 
          <div class="col-md-6 col-md-offset-3"> 
           <div class="portlet light"> 
           <p> Piechart by ülkeler </p> 

           </div> 
          </div> 
         </div> 
        </div> 
        <div class="tab-pane" id="tab_1_2"> 
         <div class="scroller"> 
          <div class="col-md-6 col-md-offset-3"> 
           <div class="portlet light"> 
           <p> Piechart by step dağılımı </p> 

           </div> 
          </div> 
         </div> 
        </div> 
        <div class="tab-pane" id="tab_1_3"> 
         <div class="scroller"> 
          <div class="col-md-6 col-md-offset-3"> 
           <div class="portlet light"> 
           <p> Piechart by hasta sayısı ay </p> 

           </div> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div> 
       <!--END TABS--> 

पहले

आकार बदलने

एक आकार बदलने के बाद, आकार ठीक

मैं अपने jsfiddle में चार्ट में शामिल नहीं हो सका क्योंकि उनमें शामिल है कुछ रूबी कोड।

पीएस: चार्ट के लिए चार्टिक और Google चार्ट का उपयोग करके, और टैब के लिए मेट्रोनिकजेएस का उपयोग करना।

संपादित करें: डिफ़ॉल्ट रूप से दिखाई देने वाला पहला चार्ट प्रारंभ में ठीक से प्रदर्शित किया जा रहा है, हालांकि अन्य नहीं हैं। एक विंडो के आकार बदलने के बाद जब कोई अन्य चार्ट दिखाई देता है, तो पिछला वाला फिर से टूट जाता है।

Answer 1

आप प्रोग्राम के रूप में 'आकार' ईवेंट को सक्रिय कर सकते हैं:

window.dispatchEvent(new Event('resize')); 

बस 'क्लिक' घटना है कि टैब से पता चलता में संलग्न करें।

आपके मामले में:

window.resizeTo(width, height); 

अद्यतन:

$('div.tabbable > ul > li > a').click(function() { 
    window.dispatchEvent(new Event('resize')); 
}); 

अपने घटक घटना के लिए प्रतिक्रिया के रूप में आकार नहीं है, तो आप वास्तव में खिड़की के साथ आकार परिवर्तन कर सकता है

यदि विंडो को आकार देने के लिए सकारात्मक नहीं है (टिप्पणियां देखें) तो टैब दिखाई देने पर चार्ट को फिर से निकालने का प्रयास कर सकता है। हो सकता है कि चार्ट उचित रूप से उन आयामों की गणना करने में सक्षम हो, जिनके लिए इसे फिट करने की आवश्यकता है। कुछ:

$('div.tabbable > ul > li > a').click(function() { 
    myChart.draw(myData); 
}); 

आशा है कि इससे मदद मिलती है!