कंटेनर आयामों में बदलावों पर मॉरिस.जेएस चार्ट का आकार कैसे बदलें

Question

मैं 2 फ्लेक्स आइटमों के साथ फ्लेक्स कंटेनर में मॉरिस जे डोनट चार्ट डालने का प्रयास करता हूं, मुझे उम्मीद है कि फ्लेक्स में चार्ट: 1 कंटेनर आकार बदल जाएगा, लेकिन ऐसा नहीं है। क्या किसी को पता है कि चार्ट को फ्लेक्स आइटम में उत्तरदायी कैसे बनाया जाए?

$(function() { 
    Morris.Donut({ 
     element: 'container', 
     resize: true, 
     data: [ 
      {label: "Download Sales", value: 12}, 
      {label: "In-Store Sales", value: 30}, 
      {label: "Mail-Order Sales", value: 20} 
     ] 
    }); 

सीएसएस:

html, body { 
height: 100%; 
margin: 0; 
} 

body { 
    display: -webkit-flex; 
} 

#container { 
    flex: 1; 
} 

.flex1 { 
    flex: 1; 
    border: 1px solid red; 
} 

Answer 1

एक $(window).on('resize', ...) ईवेंट हैंडलर जोड़ें तो रेखांकन फोन redraw() समारोह

यहाँ मेरी उदाहरण यह

जे एस आकार बदलने के लिए कोशिश example है।

यदि कोई गतिशील UI तत्व है जो उपयोगकर्ता इनपुट के आधार पर लेआउट को "फ्लेक्स" का कारण बनता है, तो आप वहां redraw() पर कॉल करना चाहते हैं और साथ ही div के आकार बदलने के लिए कोई तरीका नहीं है।

फ़िक्स के साथ अपडेट किया गया आपका पहेली यहां है।

jsFiddle

इसके अलावा, यहां Morris.js

नोट के डेवलपर से एक नोट है: मैं सुझाव है कि आप पुनः बनाने फोन() किफ़ायत के रूप में यह काफी एक महंगी आपरेशन है। इंटरमीडिएट आकार बदलने की घटनाओं के लिए इसे कॉल करने से बचने के लिए सेटटाइमआउट चाल या इसी तरह का उपयोग करने का प्रयास करें।

इस सलाह पर ध्यान करने के लिए एक तरह से नीचे है:

$(window).on('resize', function() { 
    if (!window.recentResize) { 
     window.m.redraw(); 
     window.recentResize = true; 
     setTimeout(function(){ window.recentResize = false; }, 200); 
    } 
}); 

यहाँ के साथ एक बेला है यह लागू किया:

jsFiddle