使用Highcharts调整高度

我有一个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

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

这始终有效：

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

Answer 2

根据API参考：

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

因此，您可以使用redraw事件根据父div控制它的height ， 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文档

Answer 4

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

因此，如果您在模态中执行此操作，请将此解决方案与窗口resize事件相结合。

 // 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模式resize时，您将resize。 仅在模态打开时才进行此测量。 我将比率存储为全球，但这可能不是最佳做法。

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

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

宽屏

vs较小

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