Highcharts - 如何获得具有动态高度的图表？

Question

我想要一个使用浏览器窗口调整大小的图表，但问题是高度固定为400px。 This JSFiddle example也有同样的问题。

我该怎么做？我尝试使用chart.events.redraw事件处理程序来调整图表的大小（使用.setSize），但我猜它会启动一个永无止境的循环（fire事件处理程序，它调用setSize，它会触发另一个事件处理程序等）。

Answer 1

只要不在HighCharts中设置height属性，只要在图表的包含元素上设置高度，它就会动态处理它。如果位置是绝对的，它可以是固定数字或甚至是百分比。

Highcharts docs：

  

默认情况下，高度是根据偏移高度计算的   包含元素

示例：http://jsfiddle.net/wkkAd/149/

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

Answer 2

如果您挂钩窗口调整大小事件该怎么办：

$(window).resize(function() 
{    
    chart.setSize(
       $(document).width(), 
       $(document).height()/2,
       false
    );   
});

参见示例小提琴here。

Highcharts API参考：setSize()。

Answer 3

删除高度将解决您的问题，因为如果您调整屏幕高亮度设计会响应，它也会重新调整大小。

Answer 4

或者，您可以直接使用javascript的window.onresize

例如，我的代码（使用scriptaculos）是：

window.onresize = function (){
    var w = $("form").getWidth() + "px";
    $('gfx').setStyle( { width : w } );
}

其中form是我网页上的html表单，gfx是高图图形。

Answer 5

另一个好的选择是传递renderTo HTML参考。 如果是字符串，则使用该id的元素。 否则，您可以这样做：

chart: {
    renderTo: document.getElementById('container')
},

或使用jquery：

chart: {
    renderTo: $('#container')[0]
},

更多信息可以在这里找到： https://api.highcharts.com/highstock/chart.renderTo

Answer 6

使用百分比时，高度相对于宽度的百分比将随之动态变化：

chart: {
    height: (9 / 16 * 100) + '%' // 16:9 ratio
},

JSFiddle Highcharts with percentage height

Answer 7

我遇到了同样的问题，并用以下方法解决了该问题：

<div id="container" style="width: 100%; height: 100%; position:absolute"></div>

即使我调整图表大小，该图表也非常适合浏览器。您可以根据需要更改百分比。