jQuery 使用 Highcharts 调整高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13768565/
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
Resize height with Highcharts
提问by Joe
I have a Highchart which resizes the width beatuifully when the window change size. But not the height. I tried this set chart size but it's not working proberly. Is there any other way to automatically change the height when window change size?
我有一个 Highchart，当窗口改变大小时，它会很好地调整宽度。但不是高度。我试过这个设定的图表大小，但它不能正常工作。当窗口改变大小时，有没有其他方法可以自动改变高度？
This is my css code for the output. I have a Jquery UI tab, the other tab is showing the datatable
这是我的输出 css 代码。我有一个 Jquery UI 选项卡，另一个选项卡显示数据表
#output-container
{
float: right;
display: inline;
position: absolute;
right: 10px;
left: 400px;
top:120px;
overflow-y: auto;
}
This is my css for the chartdiv:
这是我的chartdiv css：
#chartContainer{
margin: auto;
}
And this is the js Chart function:
这是 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..
};
//...
}
回答by Philzen
Ricardo's answeris correct, however: sometimes you may find yourself in a situation where the container simply doesn't resize as desired as the browser window changes size, thus not allowing highcharts to resize itself.
然而，Ricardo 的回答是正确的：有时您可能会发现自己处于这样一种情况，即当浏览器窗口更改大小时，容器根本不会根据需要调整大小，因此不允许 highcharts 自行调整大小。
This always works:
这始终有效：
- Set up a timed and pipelined resize event listener. Example with 500ms on jsFiddle
- use
chart.setSize(width, height, doAnimation = true);in your actual resize function to set the height and width dynamically - Set
reflow: falsein the highcharts-options and of course setheightandwidthexplicitly on creation. As we'll be doing our own resize event handling there's no need Highcharts hooks in another one.
- 设置定时和流水线调整大小事件侦听器。jsFiddle 上 500ms 的示例
chart.setSize(width, height, doAnimation = true);在实际的调整大小功能中使用动态设置高度和宽度- 设置
reflow: false在highcharts选项与课程设置的height和width明确的创作。由于我们将进行自己的调整大小事件处理，因此不需要在另一个中使用 Highcharts 挂钩。
回答by Ricardo Alvaro Lohmann
According to the API Reference:
根据 API 参考：
By default the height is calculated from the offset height of the containing element. Defaults to null.
By default the height is calculated from the offset height of the containing element. Defaults to null.
So, you can control it's heightaccording to the parent div using redrawevent, which is called when it changes it's size.
因此，您可以height根据父 div 使用redraw事件来控制它，该事件在更改其大小时被调用。
References
参考
回答by Ronan Quillevere
You must set the height of the container explicitly
您必须明确设置容器的高度
#container {
height:100%;
width:100%;
position:absolute;
}
回答by Lucretius
I had a similar problem with height except my chart was inside a bootstrap modal popup, which I'm already controlling the size of with css. However, for some reason when the window was resized horizontally the height of the chart container would expand indefinitely. If you were to drag the window back and forth it would expand vertically indefinitely. I also don't like hard-coded height/width solutions.
我有一个类似的高度问题，除了我的图表在引导模式弹出窗口中，我已经用 css 控制了它的大小。但是，由于某种原因，当窗口水平调整大小时，图表容器的高度将无限扩展。如果您来回拖动窗口，它将无限期地垂直扩展。我也不喜欢硬编码的高度/宽度解决方案。
So, if you're doing this in a modal, combine this solution with a window resize event.
因此，如果您在模态中执行此操作，请将此解决方案与窗口大小调整事件结合使用。
// 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();
});
Where "ratio" becomes a height/width aspect ratio, that will you resize when the bootstrap modal resizes. This measurement is only taken when he modal is opened. I'm storing ratio as a global but that's probably not best practice.
其中“比率”成为高度/宽度纵横比，当引导模式调整大小时，您将调整大小。此测量仅在打开模态时进行。我将比率存储为全局，但这可能不是最佳实践。
$(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 );
}
});
So with this, you can drag your screen to the side (resizing it) and your chart will maintain its aspect ratio.
因此，您可以将屏幕拖到一边（调整其大小），您的图表将保持其纵横比。
Widescreen
宽屏
vs smaller
与较小的
(still fiddling around with vw units, so everything in the back is too small to read lol!)
（仍在摆弄大众汽车，所以后面的所有东西都太小了，看不懂哈哈！）
