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中清楚地看到它不是div的完整高度 - 任何人都可以解释为什么这是？

非常感谢， ģ

Answer 1

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

  

默认情况下，图表会自动回流到其容器中   根据{{​​1}}选项，window.resize事件。但是，那里   div调整大小是不可靠的事件，所以如果容器调整大小   如果没有窗口大小调整事件，必须明确调用它。

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

完成工作的JS代码：

chart.reflow

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

您也错误地在CSS中引用了容器。它应该由 id （不是按类）完成。