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 chart
object 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.
希望它可以帮助别人。