Highcharts - 关于完整图表宽度的问题

Dee*_*eez 36 html javascript css highcharts

我正在使用Highcharts柱形图,我希望它是100%宽度响应图表.容器很简单<div>,没有任何格式.加载文档时,图表的宽度始终固定为600x400px.如果我调整窗口大小或切换到另一个浏览器选项卡,图表将填充宽度并成为响应全宽图表,就像我想要的那样.如果我重新加载页面,它再次固定宽度.我尝试将宽度设置为容器和图表,但是没有任何帮助.如果我将容器div移动到父div之上一级,它就可以工作.如何使图表在页面加载时变为全宽?

谢谢

Paw*_*Fus 41

图表的宽度取自jQuery.width(container),因此如果您在某些隐藏的标签或类似的图表中有图表,则宽度将是未定义的.在这种情况下,默认宽度和高度设置(600x400).

  • "标签"就是问题所在.我正在使用带有jQuery UI选项卡插件的图表,并在禁用它后,图表正确呈现.现在我只是通过在渲染图表后初始化标签来解决它. (12认同)

coh*_*air 24

我知道这是一个老问题,但我遇到了完全相同的问题,并找到了另一个效果很好的解决方案.

从Highcharts 4.1.5开始(也可能是旧版本),该chart对象具有一个reflow()功能.在此处查看文档.

回流()

将图表重新流回其容器.默认情况下,根据chart.reflow选项,图表会根据window.resize事件自动回流到其容器.但是,div resize没有可靠的事件,因此如果在没有窗口大小调整事件的情况下调整容器大小,则必须显式调用它.

希望它可以帮助别人.

  • 只需在我的$(".button")中写一些像$(".tab1").find(".chartContainer").each(function(){$(this).highcharts().reflow()}). click()比隐藏它们之前渲染图表更有用.我的情况要求我根据ajax-gets动态创建图表,所以这真的是我能找到的最好(也是唯一)的解决方案.谢谢! (3认同)