जब फ्लो ग्राफ का आकार बदलता है तो इसका आकार आकार बदलता है

Question

मैं फ़्लोट ग्राफ़िंग लाइब्रेरी jQuery प्लगइन का उपयोग कर रहा हूं और मुझे ग्राफ़ का आकार बदलने में एक अच्छा तरीका नहीं मिला है जब इसमें <div> परिवर्तन आकार है (उदाहरण के लिए, देय खिड़की का आकार बदलने के लिए)। ऑनरेज़ ईवेंट को संभालने पर, मैंने यह सुनिश्चित कर लिया है कि <div> युक्त चौड़ाई और ऊंचाई को सही आकार में अपडेट किया गया है और फिर सेटअप ग्रिड को कॉल करने और प्लॉट ऑब्जेक्ट पर ड्रॉ करने का प्रयास किया लेकिन बिना किसी प्रभाव के। मुझे <div> युक्त बस हटाने और पढ़ने के दृष्टिकोण के साथ कुछ सफलता मिली है और इसमें ग्राफ को दोबारा बदलना है। हालांकि, मुझे असीमित आकार बदलने की घटनाओं में फंसने की प्रवण प्रतीत होती है यदि मुझे एक ही समय में दस्तावेज़ में अन्य <div> तत्व जोड़ना है (जैसे ग्राफ के लिए टूलटिप्स के लिए) क्योंकि मुझे लगता है कि वे आकार बदलने की घटनाओं को ट्रिगर कर सकते हैं ? क्या इसे संभालने का कोई अच्छा तरीका है कि मुझे याद आ रही है?

(मैं भी IE के लिए ExplorerCanvas उपयोग कर रहा हूँ क्रम में Flot उपयोग करने के लिए, कि यह से कोई लेना देना हो सकता है यदि सक्षम होने के लिए। मैं वास्तव में किसी भी अन्य ब्राउज़र में प्रयास नहीं किया है अभी तक)

Answer 1

मुझे खिड़की पर आकार बदलने के लिए बाध्यकारी पाया गया है और कॉलिंग प्लॉट वास्तव में अच्छी तरह से काम करता है। उदाहरण के लिए मेरे पास पृष्ठ पर चर में संग्रहीत मेरे डेटा और विकल्प हैं। तब मैं सेटअप $ पर इस (document) .ready():

$(window).resize(function() {$.plot($('#graph_div'), data, opts);});

Answer 2

मैं प्रतीत समाधान ढूंढने के लिए, हालांकि मुझे पूरी तरह से यकीन नहीं है कि यह क्यों काम करता है। मैं अभी भी दस्तावेज़ से युक्त <div> को हटाने और पढ़ने के दृष्टिकोण का उपयोग कर रहा हूं और इसमें ग्राफ को दोबारा बदल रहा हूं। हालांकि जहां पहले मैं

window.onresize = redrawFunc; //redrawFunc removes and readds the containing div and replots 

जो क्या एक अनंत क्या redrawFunc दस्तावेज़ के लिए क्या किया पर निर्भर करता है पाश लग रहा था में हो रही होने का खतरा लग रहा था कर रहा था।

इसके बजाय मैं jQuery के आकार बदलने के लिए बाध्य उपयोग करने की कोशिश

$(window).resize = redrawFunc; 

अब तक, कोई बात नहीं क्या अन्य परिवर्तन मैं दस्तावेज़ redrawFunc में मैं इस दृष्टिकोण के साथ एक समस्या एक पाश में अभी तक अटक नहीं किया है करने के लिए कर । मुझे यकीन नहीं है क्यों।

Answer 3

मैं सिर्फ एक समाधान यह करने के लिए अपने आप को मिल गया। मैंने अपनी कॉल $.plot() पर लपेट ली है, जो कि मेरी विशिष्ट समस्या का मूल कारण हो सकता है लेकिन जब मैंने jQuery resize ईवेंट का उपयोग किया तब भी फ्लोट ने समय-समय पर आकार बदलने से इंकार कर दिया।

$(window).resize(function() { 
    // erase the flot graph, allowing the div to shrink correctly 
    $('#graph_div').text(''); 

    // redraw the graph in the correctly sized div 
    $.plot($('#graph_div'), data, opts); 
}); 

Answer 4

flot API डॉक्स के नवीनतम संस्करण, कम से कम, एक आकार बदलने घटना है जो के रूप में विज्ञापित काम करता है वर्णन करता है: यहाँ मेरी कोड परिवर्तन है कि सब कुछ तय हो गई है।

आकार()

प्लेसहोल्डर के आकार के आरेखण कैनवास का आकार बदलने के Flot कहता है। आपको setupGrid() और draw() को बाद में कैनवास आकार बदलने के लिए एक विनाशकारी ऑपरेशन चलाने की आवश्यकता है। इसका आकार बदलने के लिए आंतरिक रूप से का उपयोग किया जाता है।

Answer 5

आकार बदलने का सबसे आसान तरीका प्लगइन का उपयोग करना है।यह यहाँ का प्रदर्शन किया है: http://www.flotcharts.org/flot/examples/resize/

लेकिन तुम सिर्फ

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>