我正在使用Highcharts柱形图,我希望它是100%宽度响应图表。容器是一个简单的<div>
,没有任何格式。加载文档时,图表的宽度始终固定为600x400px。如果我调整窗口大小或切换到另一个浏览器选项卡,图表将填充宽度并成为响应全宽图表,就像我想要的那样。如果我重新加载页面,它再次固定宽度。我尝试将宽度设置为容器和图表,但是没有任何帮助。如果我将容器div移动到父div之上一级,它就可以工作。如何使图表在页面加载时变为全宽?
由于
答案 0 :(得分:41)
图表的宽度取自jQuery.width(container)
,因此如果您在某些隐藏的标签或类似内容中有图表,则宽度将不确定。在这种情况下,默认宽度和高度设置为(600x400)。
答案 1 :(得分:24)
我知道这是一个老问题,但我遇到了完全相同的问题,并找到了另一个效果很好的解决方案。
从Highcharts 4.1.5开始(也可能是旧版本),chart
对象具有reflow()
功能。查看文档here。
reflow()
将图表重新流回其容器。默认情况下,根据chart.reflow选项,图表会根据window.resize事件自动回流到其容器。但是,div resize没有可靠的事件,因此如果在没有窗口大小调整事件的情况下调整容器大小,则必须显式调用它。
希望它可以帮助别人。