使用Highcharts调整高度大小 [英] Resize height with Highcharts

问题描述

我有一个Highchart，当窗口改变大小时，调整宽度beatuifully。但不是高度。我尝试这个设置图表大小，但它不工作proberly。是否有其他方法可以在窗口更改大小时自动更改高度？

这是我的输出css代码。我有一个Jquery UI选项卡，其他选项卡显示数据类型

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

这是我的css的chartdiv：

  #chartContainer {
 margin：auto; 
} 
  

这是js Chart函数：

  function qchart（）{
 
 chart = new Highcharts.Chart（{
 chart：{
 renderTo： 'chartContainer'，
 type：'column'，
 spacingBottom：3，
 // height：（screen.availHeight）-500，
 marginRight：30，
 marginBottom：30，
 reflow：true 
}，
 //等.. 
}; 
 // ... 
} 
 
 
   
 p>    
 
 
 
这总是可以工作的：
 
 1.设置定时和流水线调整大小事件侦听器示例，在jsFiddle上显示500ms示例 
 
 2.使用  chart.setSize（width，height，doAnimation = true）;  在您的实际resize函数中动态设置高度和宽度
 
 3.在highcharts中设置 reflow：false  -options，当然在创建时设置 height 和 width 。由于我们将自己调整大小事件处理，因此在另一个中不需要Highcharts钩子。
 
I have a Highchart which resizes the width beatuifully when the window change size. But not the height. I tried this set chart size but it's not working proberly. Is there any other way to automatically change the height when window change size?

This is my css code for the output. I have a Jquery UI tab, the other tab is showing the datatable
#output-container
{
float: right;
display: inline;
position: absolute;
right: 10px; 
left: 400px;
top:120px;
overflow-y: auto;
}
This is my css for the chartdiv:
#chartContainer{
margin: auto;
}
And this is the js Chart function:
function qchart(){

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

解决方案
Ricardo's answer is correct, however: sometimes you may find yourself in a situation where the container simply doesn't resize as desired as the browser window changes size, thus not allowing highcharts to resize itself.

This always works:

1. Set up a timed and pipelined resize event listener. Example with 500ms on jsFiddle

2. use chart.setSize(width, height, doAnimation = true); in your actual resize function to set the height and width dynamically

3. Set reflow: false in the highcharts-options and of course set height and width explicitely on creation. As we'll be doing our own resize event handling there's no need Highcharts hooks in another one.

                        
这篇关于使用Highcharts调整高度大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！