Html Highcharts - 关于完整图表宽度的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16436666/
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 - issue about full chart width
提问by Deez
I'm using Highcharts column chart and I want it to be 100% width responsive chart. The container is a simple <div>with no any formatting. When the document loads, the chart is always fixed width 600x400px size. If I resize window or switch to another browser tab, the chart fills the width and becomes responsive full width chart just like I wanted. If I reload page, it's fixed width again. I tried setting width to both container and chart, however, nothing helps. If I move the container div one level above the parent div, It works. How to make the chart become full width on page load also?
我正在使用 Highcharts 柱状图，我希望它是 100% 宽度响应图表。容器很简单<div>，没有任何格式。当文档加载时，图表总是固定宽度 600x400px 大小。如果我调整窗口大小或切换到另一个浏览器选项卡，图表会填充宽度并变成我想要的响应式全宽图表。如果我重新加载页面，它又是固定宽度。我尝试为容器和图表设置宽度，但是，没有任何帮助。如果我将容器 div 移动到父 div 上一级，它会起作用。如何使图表在页面加载时也变成全宽？
Thanks
谢谢
回答by Pawe? Fus
Chart's width is taken from jQuery.width(container), so if you have chart in some hidden tabs or something similar, width will be undefined. In that case default width and height are set (600x400).
图表的宽度取自jQuery.width(container)，因此如果您在某些隐藏选项卡或类似内容中有图表，则宽度将是未定义的。在这种情况下，设置默认宽度和高度 (600x400)。
回答by cohenadair
I know this is an old question, but I ran into the exact same issue and found another solution that works great.
我知道这是一个老问题，但我遇到了完全相同的问题，并找到了另一个效果很好的解决方案。
As of Highcharts 4.1.5 (could be in older versions as well), the chartobject has a reflow()function. View the documentation here.
从 Highcharts 4.1.5（也可能是旧版本）开始，该chart对象具有一个reflow()函数。在此处查看文档。
reflow ()
Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
回流 ()
将图表回流到其容器。默认情况下，根据 chart.reflow 选项，图表会在 window.resize 事件之后自动回流到其容器。但是，没有可靠的 div resize 事件，因此如果在没有窗口 resize 事件的情况下调整容器大小，则必须显式调用它。
Hope it helps someone else.
希望它可以帮助别人。
