हाइचार्ट्स

Question

के साथ ऊंचाई का आकार बदलें मेरे पास एक हाईचार्ट है जो खिड़की के आकार के आकार को चौड़ाई का आकार बदलता है। लेकिन ऊंचाई नहीं। मैंने इस सेट चार्ट आकार की कोशिश की लेकिन यह संभवतः काम नहीं कर रहा है। खिड़की के आकार के आकार में स्वचालित रूप से ऊंचाई बदलने के लिए कोई अन्य तरीका है?

यह आउटपुट के लिए मेरा सीएसएस कोड है। मैं एक jQuery के यूआई टैब होता है, अन्य टैब दिखा रहा है datatable

#output-container 
{ 
float: right; 
display: inline; 
position: absolute; 
right: 10px; 
left: 400px; 
top:120px; 
overflow-y: auto; 
} 

यह chartdiv के लिए मेरे सीएसएस है:

#chartContainer{ 
margin: auto; 
} 

और यह js चार्ट समारोह है:

function qchart(){ 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'chartContainer', 
      type: 'column', 
      spacingBottom: 3, 
      //height: (screen.availHeight)-500, 
      marginRight: 30, 
      marginBottom: 30, 
      reflow: true 
     }, 
     //etc.. 
    }; 
    //... 
} 

Answer 1

रिकार्डो का जवाब, सही लेकिन है: कभी कभी आप अपने आप को एक स्थिति है जहाँ कंटेनर बस के रूप में के रूप में वांछित आकार परिवर्तन नहीं करता है में मिल सकता है ब्राउजर विंडो आकार बदलती है, इस प्रकार हाईचार्ट्स को खुद का आकार बदलने की अनुमति नहीं देता है।

यह हमेशा काम करता है:
1. एक समय और पाइपलाइन आकार बदलें श्रोता सेट अप करें। अपने वास्तविक आकार समारोह में Example with 500ms on jsFiddle
2. उपयोग chart.setSize(width, height, doAnimation = true); ऊंचाई सेट और Highcharts-विकल्पों में गतिशील
3. सेट reflow: false चौड़ाई और निश्चित रूप से निर्माण पर height और width सेट पर स्पष्ट रूप है। चूंकि हम अपना खुद का आकार बदलने की घटना कर रहे होंगे, किसी अन्य में हाईचर हुक की आवश्यकता नहीं है।

Answer 2

एपीआई संदर्भ के अनुसार:

By default the height is calculated from the offset height of the containing element. Defaults to null.

तो, आप इसे redraw घटना का उपयोग कर माता पिता div है, जो जब यह के आकार बदलता है कहा जाता है के अनुसार height है नियंत्रित कर सकते हैं।

संदर्भ

• http://api.highcharts.com/highstock#chart.height
• http://api.highcharts.com/highstock#chart.events.redraw

Answer 3

आप कंटेनर स्पष्ट

#container { 
    height:100%; 
    width:100%; 
    position:absolute; } 

See other stackoverflow answer

highcharts documentation

Answer 4

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

तो, यदि आप इसे एक मॉडल में कर रहे हैं, तो विंडो आकार बदलने के साथ this solution को गठबंधन करें।

// from link 
$('#ChartModal').on('show.bs.modal', function() { 
    $('.chart-container').css('visibility', 'hidden'); 
}); 

$('#ChartModal').on('shown.bs.modal.', function() { 
    $('.chart-container').css('visibility', 'initial'); 
    $('#chartbox').highcharts().reflow() 
    //added 
    ratio = $('.chart-container').width()/$('.chart-container').height(); 
}); 

जहां "अनुपात" ऊंचाई/चौड़ाई पहलू अनुपात बन जाता है, तो जब आप बूटस्ट्रैप मोडल का आकार बदलते हैं तो आप आकार बदल देंगे। यह माप केवल तभी लिया जाता है जब वह मोडल खोला जाता है। मैं एक वैश्विक के रूप में अनुपात भंडारित कर रहा हूं लेकिन शायद यह सबसे अच्छा अभ्यास नहीं है।

$(window).on('resize', function() { 
    //chart-container is only visible when the modal is visible. 
    if ($('.chart-container').is(':visible')) { 
     $('#chartbox').highcharts().setSize( 
      $('.chart-container').width(), 
      ($('.chart-container').width()/ratio), 
      doAnimation = true); 
    }  
}); 

तो इसके साथ, आप अपनी स्क्रीन को तरफ खींच सकते हैं (इसका आकार बदल सकते हैं) और आपका चार्ट इसके पहलू अनुपात को बनाए रखेगा।

वाइडस्क्रीन

बनाम छोटे

(अभी भी VW इकाइयों के साथ लगभग नगण्य है, तो पीठ में सब कुछ बहुत lol पढ़ने के लिए छोटा है!)