jquery - 使用 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 图表函数:

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

Ricardo's answer然而，这是正确的:有时您可能会发现自己处于这样一种情况，即容器根本不会随着浏览器窗口的大小更改而根据需要调整大小，因此不允许 highcharts 自行调整大小。

这总是有效的:

1. 设置定时和流水线调整大小事件监听器。 Example with500ms on jsFiddle
2. 使用chart.setSize(width, height, doAnimation =
true);在您实际的调整大小功能中设置高度和宽度动态
3. 在 highcharts-options 中设置 reflow: false，当然在创建时明确设置 height 和 width。由于我们将进行自己的调整大小事件处理，因此不需要在另一个事件中使用 Highcharts Hook 。