2013-05-08 10 views
34

के बारे में समस्या मैं हाईचार्ट्स कॉलम चार्ट का उपयोग कर रहा हूं और मैं चाहता हूं कि यह 100% चौड़ाई उत्तरदायी चार्ट हो। कंटेनर बिना किसी प्रारूपण के एक साधारण <div> है। जब दस्तावेज़ लोड होता है, तो चार्ट हमेशा चौड़ाई 600x400px आकार तय होता है। यदि मैं विंडो का आकार बदलता हूं या किसी अन्य ब्राउज़र टैब पर स्विच करता हूं, तो चार्ट चौड़ाई भरता है और जैसा कि मैं चाहता था, उत्तरदायी पूर्ण चौड़ाई चार्ट बन जाता है। अगर मैं पेज को फिर से लोड करता हूं, तो यह निश्चित चौड़ाई है। मैंने कंटेनर और चार्ट दोनों की चौड़ाई निर्धारित करने की कोशिश की, हालांकि, कुछ भी मदद नहीं करता है। यदि मैं कंटेनर div को पैरेंट div से ऊपर एक स्तर ले जाता हूं, तो यह काम करता है। पेज लोड पर चार्ट को पूर्ण चौड़ाई कैसे बनें?हाइचार्ट्स - पूर्ण चार्ट चौड़ाई

धन्यवाद

+0

कृपया jsfiddle बनाएं? –

+0

क्या आप चार्ट के लिए कुछ जावास्क्रिप्ट कोड और कंटेनर के कुछ एचटीएमएल और सीएसएस दिखा सकते हैं? इसके बिना समस्या को समझना मुश्किल होगा। – abletterer

+0

जैसा कि अजीब है, मैंने बनाया जेएसएफल्ड उदाहरण ठीक काम करता है। मुझे लगता है कि यह एक वैश्विक सीएसएस या कुछ ऐसा हो सकता है जो मेरे चार्ट को प्रभावित करता हो। वैसे भी, यह कोड http://jsfiddle.net/zgsDj/ है, सिवाय इसके कि मेरे असली पृष्ठ में यह लोड पर पूर्ण चौड़ाई नहीं है, लेकिन 600px चौड़ाई है। – Deez

उत्तर

41

चार्ट की चौड़ाई jQuery.width(container) से लिया जाता है, इसलिए यदि आप कुछ छिपा टैब या कुछ इसी तरह का चार्ट है, चौड़ाई अपरिभाषित हो जाएगा। उस स्थिति में डिफ़ॉल्ट चौड़ाई और ऊंचाई सेट (600x400) हैं।

+12

"टैब" बिल्कुल समस्या थी। मैं jQuery यूआई टैब प्लगइन के साथ चार्ट का उपयोग कर रहा था, और इसे अक्षम करने के बाद, चार्ट सही ढंग से प्रस्तुत किया गया। अब चार्ट को प्रस्तुत करने के बाद टैब को प्रारंभ करके मैंने इसे हल किया। – Deez

+1

मेरा दिन बचाया :) –

24

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं एक ही मुद्दे में भाग गया और एक और समाधान मिला जो महान काम करता है।

हाईचार्ट्स 4.1.5 के रूप में (पुराने संस्करणों में भी हो सकता है), chart ऑब्जेक्ट में reflow() फ़ंक्शन है। प्रलेखन here देखें।

पुनर्प्रवाहित()

अपने कंटेनर के लिए चार्ट रीफ़्लो। डिफ़ॉल्ट रूप से, चार्ट chart.reflow विकल्प के अनुसार, window.resize ईवेंट के बाद स्वचालित रूप से अपने कंटेनर पर रीफ्लो हो जाता है। हालांकि, div आकार बदलने के लिए कोई विश्वसनीय घटनाएं नहीं हैं, इसलिए अगर कंटेनर को विंडो आकार बदलने के बिना आकार बदल दिया गया है, तो इसे स्पष्ट रूप से कहा जाना चाहिए।

उम्मीद है कि यह किसी और की मदद करेगा।

+3

बस $ ("। Tab1") जैसे कुछ लिखना। ("। ChartContainer") ढूंढें। प्रत्येक (फ़ंक्शन() {$ (यह)। हाइचार्ट्स()। Reflow()}) मेरे $ के अंदर (".button")। क्लिक करें() उन्हें छिपाने से पहले चार्ट को प्रस्तुत करने से कहीं अधिक उपयोगी था। मेरी स्थिति में मुझे गतिशील रूप से AJAX-get के आधार पर चार्ट बनाने की आवश्यकता थी, इसलिए यह वास्तव में सबसे अच्छा (और केवल) समाधान मुझे मिल सकता था। धन्यवाद! – NachoDawg

+0

बिल्कुल सही !! बहुत अच्छा काम करता है! –

संबंधित मुद्दे