使用Highcharts调整图表高度

Question

我有一个 Highchart，在窗口大小改变时可以自动调整宽度，但高度不会变化。我尝试使用 set chart size 方法，但效果不理想。是否有其他方法可以在窗口大小改变时自动更改图表的高度？

以下是输出的 CSS 代码。我有一个 jQuery UI 选项卡，另一个选项卡显示数据表格。

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

这是用于图表区域的我的 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..
    };
    //...
}

- Joe

---

可能是重复的问题：Highcharts - 如何创建一个具有动态高度的图表？ - Ronan Quillevere

调整隐藏图表和调整窗口大小。请参见我的stackoverflow答案 - Davide

Answer 1

Ricardo的回答是正确的，但是：有时您可能会发现自己处于这样一种情况，即容器在浏览器窗口大小更改时不会按预期调整大小，因此不允许高图自行调整大小。

以下方法始终有效：

1. 设置定时和流水线式的调整事件侦听器。在jsFiddle上使用500ms的示例
2. 在实际的调整函数中使用 chart.setSize(width, height, doAnimation = true);来���态设置高度和宽度
3. 在highcharts选项中设置reflow: false，当然在创建时明确设置height和width。由于我们将自己进行调整事件处理，因此没有必要将Highcharts挂钩到另一个事件中。

- Philzen

---

我对Highcharts和jQuery / JavaScript还很陌生，你能给我提供一个代码示例让我参考吗？ - newbie

Answer 2

根据API参考文档：
默认情况下，高度是从包含元素的偏移高度计算的。默认为null。
因此，您可以使用redraw事件控制它的高度，该事件在更改大小时调用。
参考资料

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

- Ricardo Alvaro Lohmann

---

最诚挚的道歉-我刚刚重新测试了一下，如果您正确调整直接父容器的大小，它实际上可以正常工作。我不能取消我的投票（系统显示“投票现已锁定，除非编辑帖子”），如果您编辑一两行，我一定会取消投票。 - Philzen

Answer 3

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

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

查看其他Stackoverflow答案

Highcharts文档

- Ronan Quillevere

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

"ratio"指的是高度/宽度的比例，在Bootstrap模态框调整大小时会随之调整。这个测量只在模态框打开时进行。我将“ratio”作为全局变量存储，但这可能不是最佳实践。

$(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 smaller

（我还在尝试使用vw单位，所以后面的所有内容都太小了，看不清楚，哈哈！）

- Lucretius