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

Question

我想要一个使用浏览器窗口调整大小的图表,但问题是高度固定为400px.这个JSFiddle示例有同样的问题.

我怎样才能做到这一点？我尝试使用chart.events.redraw事件处理程序来调整图表的大小(使用.setSize),但我猜它会启动一个永无止境的循环(fire事件处理程序,它调用setSize,它会触发另一个事件处理程序等).

Answer 1

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

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

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

我注意到了,谢谢.我真正想做的是让图表随着数据的增长而增长.有了mt demo,如果我有一个吧,它会将它扩展到一个巨大的栏,如果我有100个栏,它们都被挤压在一起.我想使页面增长并保持每个栏之间的填充.这是我的问题,尚无回复.http://stackoverflow.com/questions/30868963/highcharts-bar-chart-auto-height (3认同)

Answer 2

如果你挂钩窗口调整大小事件怎么办:

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

见例如拨弄这里.

Highcharts API参考:setSize().

Answer 3

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

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