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

Ricardo's answer是正确的，但是：有时您可能会发现自己处于这样一种情况：容器根本不会随着浏览器窗口大小的变化而调整大小，因此不允许高级图表自行调整大小。

这始终有效：

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

Answer 2

根据API参考：

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

因此，您可以使用height事件根据父div控制它redraw，该事件在更改其大小时调用。

参考

Answer 3

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

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

See other Stackoverflow answer

Highcharts documentation

Answer 4

我有一个类似的高度问题，除了我的图表在一个bootstrap模式弹出窗口内，我已经控制了css的大小。但是，出于某种原因，当窗口水平调整大小时，图表容器的高度将无限扩展。如果您来回拖动窗口，它将无限期地垂直展开。我也不喜欢硬编码的高度/宽度解决方案。

因此，如果您在模式中执行此操作，请将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();
});

＆＃34;比率＆＃34;变为高度/宽度宽高比，您将在引导模式调整大小时调整大小。仅在打开模态时才进行此测量。我将存储比率视为全球存在，但这可能不是最佳做法。

$(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 );
    }       
});

因此，您可以将屏幕拖到一边（调整大小），图表将保持其宽高比。

宽屏

vs较小

（仍然摆弄vw单位，所以后面的一切都太小了，不能阅读大声笑！）

使用Highcharts调整高度

4 个答案: