2013-07-29 10 views
5

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

$(window).bind("resize", resizeChart); 
    function resizeChart() { 
     var width = $(document).width() - 55; 
     var height = $(document).height() - 60; 
     $("#container").css("width", width); 
     $("#container").css("height", height); 
    } 

कुछ उदाहरण: http://jsfiddle.net/CwnDw/

मेरे समस्या यह है, कि y- अक्ष के पैमाने अक्सर बहुत बदसूरत देखो। जब चार्ट वाई-अक्ष लोड करता है तो केवल एक टिक होता है। चार्ट को + 10 पीएक्स में बदलने के बाद, इसमें कोई टिक नहीं है, और आंतरिक आकार में आकार बदलने के बाद, वाई-अक्ष 5 टिक के साथ प्रस्तुत करता है। मुझे समझ में नहीं आता क्यों। मेरे उदाहरण में मुझे केवल तब ही प्रभाव मिलता है जब मैं चार्ट को छोटे आकार से बड़े आकार में बदलता हूं।

क्या चार्ट का आकार बदलने का कोई बेहतर तरीका है? मैंने chart.setSize() फ़ंक्शन को करने की कोशिश की, लेकिन कोई प्रभाव नहीं। या: क्या y-axis को पुन: प्रस्तुत/पुन: गणना करने का कोई तरीका है?

धन्यवाद टॉर्बेन

उत्तर

0

इस प्रयास करें: का उपयोग कर

function resizeChart() { 
    var width = $(document).width() - 55; 
    var height = $(document).height() - 60; 
    $("#container").css("width", width); 
    $("#container").css("height", height); 
    setTimeout(function() { 
     chart1.setSize(
      width, 
      height, 
      false 
     ); 
    },10); 
} 

http://jsfiddle.net/9YFB8/2/

+0

इसका कोई प्रभाव नहीं पड़ता है। मुझे लगता है कि आसपास के आईफ्रेम के साथ एक समस्या है। मैं अपने जेएसएफल्ड उदाहरण को संपादित करने की कोशिश करता हूं – Torben

1

मैं एक redrawing विधि हासिल करेगी आप के लिए क्या देख रहे के बारे में यकीन नहीं है, लेकिन मेरे अनुभव के साथ हाइचार्ट्स, मैंने पाया कि किसी भी अप्रत्याशित परिणामों से बचने के लिए टिक पदों को निर्दिष्ट करना सबसे अच्छा है।

यहाँ yAxis: tickPosition

http://api.highcharts.com/highcharts#yAxis.tickPositions

के बारे में एक बहुत अच्छा jsFiddle वहाँ उदाहरण है कि कार्यान्वयन को शामिल करना चाहिए नहीं है Highchart प्रलेखन के लिए एक कड़ी है।

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