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

score 39 · Accepted Answer

然而， Ricardo 的回答是正确的：有时您可能会发现自己处于这样一种情况，即容器根本没有根据浏览器窗口的大小调整大小，因此不允许 highcharts 自行调整大小。

这总是有效的：

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

score 17 · Accepted Answer

根据 API 参考：

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

因此，您可以height根据父 div 使用redraw事件来控制它，当它改变它的大小时会调用它。

参考

score 12 · Accepted Answer

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

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

查看其他 Stackoverflow 答案

Highcharts 文档

score 1 · Accepted Answer

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

因此，如果您在模式中执行此操作，请将此解决方案与窗口调整大小事件结合使用。

// 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 );
    }       
});

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

宽屏

与更小

（还在摆弄大众单位，所以后面的所有东西都太小了，看不懂哈哈！）

jquery - 使用 Highcharts 调整高度

4 回答 4

Related

Reference