Javascript Highcharts - 如何拥有动态高度的图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8809852/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts - how to have a chart with dynamic height?
提问by duality_
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 examplehas 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），但我猜它会启动一个永无止境的循环（触发事件处理程序，它调用 setSize，它触发另一个事件处理程序等）。
回答by tybro0103
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 属性，只要您在图表的包含元素上设置高度，它就会为您动态处理它。如果位置是绝对的，它可以是一个固定的数字，甚至可以是一个百分比。
By default the height is calculated from the offset height of the containing element
默认情况下，高度是根据包含元素的偏移高度计算的
Example: http://jsfiddle.net/wkkAd/149/
示例：http: //jsfiddle.net/wkkAd/149/
#container {
height:100%;
width:100%;
position:absolute;
}
回答by Mark
回答by RAM
Remove the height will fix your problem because highchart is responsive by design if you adjust your screen it will also re-size.
删除高度将解决您的问题，因为如果您调整屏幕，highchart 会根据设计进行响应，它也会重新调整大小。
回答by destroyedlolo
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.
其中 form 是我网页上的 html 表单，gfx 是 highchart 图形。
回答by ill
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
回答by Phil
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
},
