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

I want to have a chart that resizes with the browser window, but the problem is that the height is fixed to 400px. This JSFiddle example has the same problem.

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

How can I do that? I tried using the chart.events.redraw event handler to resize the chart (using .setSize), but I guess it starts a never-ending loop (fire event handler, which calls setSize, which fires another event handler, etc.).

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

6 个解决方案

#1

Just don't set the height property in HighCharts and it will handle it dynamically for you so long as you set a height on the chart's containing element. It can be a fixed number or a even a percent if position is absolute.

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

Highcharts docs:

By default the height is calculated from the offset height of the containing element

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

Example: http://jsfiddle.net/wkkAd/149/

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

#2

What if you hooked the window resize event:

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

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

See example fiddle here.

请参见示例小提琴。

Highcharts API Reference : setSize().

Highcharts API参考:setSize()。

#3

Remove the height will fix your problem because highchart is responsive by design if you adjust your screen it will also re-size.

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

#4

Alternatively, you can directly use javascript's window.onresize

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

As example, my code (using scriptaculos) is :

例如,我的代码(使用scriptaculos)是:

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

Where form is an html form on my webpage and gfx the highchart graphics.

表单是我网页上的html表单,gfx是高清图形。

#5

Another good option is, to pass a renderTo HTML reference. If it is a string, the element by that id is used. Otherwise you can do:

另一个好的选择是传递renderTo HTML引用。如果是字符串,则使用该id的元素。否则你可以这样做:

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

or with jquery:

或者使用jquery:

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

Further information can be found here: https://api.highcharts.com/highstock/chart.renderTo

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

#6

When using percentage, the height it relative to the width and will dynamically change along with it:

使用百分比时,它相对于宽度的高度会随之动态变化:

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

JSFiddle Highcharts with percentage height

JSFiddle Highcharts百分比高度

#1