Highchart 不会使用 Gridstack 调整大小

Question

我在这个 CodePen 中重现了这个问题：

https://codepen.io/GeorgeBT97/pen/BxKdEW

如您所见，如果您调整 Gridstack 磁贴的大小，Highchart 不会随之调整大小，尽管已设置为其父级 div 的高度和宽度的 100%。

我看过这个帖子：

https://github.com/gridstack/gridstack.js/issues/792

也就是说使用这种方法应该可以解决问题：

hChart.setSize(container.width, container.height, false);

但是，我不知道如何或在何处执行此操作来解决问题。如果有人可以解释，将不胜感激。附带一提，尽管 Highchart 容器默认设置为其父级 div 的 100% 高度和宽度，但您可以在 CodePen 中清楚地看到它不是 [=29= 的全高] - 谁能解释这是为什么？

非常感谢， G

Answer 1

您在问题中提到的 github 问题中的最后一条评论揭示了解决方案。使用 Chart.reflow 函数将图表调整到其容器。为什么必须手动完成的答案来自 API:

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.

参考： https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

完成任务的 JS 代码：

$('.grid-stack').on('gsresizestop', function(event, elem) {
    chart.reflow();
});

现场演示： https://codepen.io/anon/pen/Vxjaze

此外，您在 CSS 中错误地引用了容器。它应该由 id 完成（而不是 class）。

Answer 2

我将博客 post 与 github 代码库中的代码放在一起就是为了这个：

https://dylandreams.com/2017/05/06/of-charts-and-dashboards/

Highchart 不会使用 Gridstack 调整大小

Highchart won't resize with Gridstack

javascript

highcharts

gridstack