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

Posted 2023-02-16

【中文标题】Highcharts - 关于完整图表宽度的问题

【英文标题】：Highcharts - issue about full chart width

【发布时间】：2013-05-02 10:43:24

【问题描述】：

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

谢谢

【问题讨论】：

请创建 jsfiddle ？

你能展示一些图表的javascript代码和容器的一些html和CSS吗？没有它就很难理解问题。

虽然很奇怪，但我创建的 jsfiddle 示例运行良好。我想这可能是一个全局 CSS 或影响我图表的东西。无论如何，这是代码jsfiddle.net/zgsDj，除了在我的真实页面中加载时它不是全宽，而是 600px 宽度。

相关：Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?.

【参考方案1】：

图表的宽度取自jQuery.width(container)，因此如果您在某些隐藏选项卡或类似的东西中有图表，宽度将是未定义的。在这种情况下，会设置默认宽度和高度 (600x400)。

【讨论】：

“标签”正是问题所在。我正在使用带有 jQ​​uery UI 选项卡插件的图表，禁用它后，图表正确呈现。现在我通过在图表呈现后初始化选项卡来解决它。

【参考方案2】：

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

从 Highcharts 4.1.5 开始（也可能在旧版本中），chart 对象具有 reflow() 函数。查看文档here。

回流（）

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

希望对其他人有所帮助。

【讨论】：

只需在我的内部编写类似 $(".tab1").find(".chartContainer").each(function () $(this).highcharts().reflow()) 的东西$(".button").click() 比在隐藏图表之前渲染图表更有用。我的情况要求我根据 ajax-gets 动态创建图表，所以这确实是我能找到的最好（也是唯一）的解决方案。谢谢！

完美！！效果很好！