使用Highcharts调整高度

Question

我有一个Highchart,当窗口改变大小时,它会大大调整宽度.但不是高度.我试过这个设定的图表大小,但它不能正常工作.当窗口改变大小时,有没有其他方法可以自动更改高度？

这是我输出的css代码.我有一个Jquery UI选项卡,另一个选项卡显示数据表

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

这是我对chartdiv的css:

#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
        },
        //etc..
    };
    //...
}

Answer 1

然而,里卡多的回答是正确的:有时你可能会发现自己处于这样一种情况:容器根本不会随着浏览器窗口的大小改变而调整大小,因此不允许高图调整自身大小.

这总是有效的:

1. 设置定时和流水线调整大小事件侦听器.jsFiddle上500ms的示例
2. chart.setSize(width, height, doAnimation = true); 在您的实际调整大小函数中使用动态设置高度和宽度
3. 设置reflow: false在highcharts-options中,当然也可以设置height并width明确地创建.由于我们将进行自己的resize事件处理,因此不需要在另一个中使用Highcharts钩子.

Answer 2

根据API参考:

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

所以,你可以height根据父div使用redraw事件来控制它,当它改变它的大小时调用它.

参考

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

Answer 3

您必须明确设置容器的高度

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

请参阅其他Stackoverflow答案

Highcharts文档