-1

我在这个 CodePen 中重新创建了这个问题:

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

如您所见,如果您调整 Gridstack tile 的大小,尽管 Highchart 设置为其父 div 的高度和宽度的 100%,但它并不会随之调整大小。

我看过这个线程:

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

其中说使用这种方法应该可以解决问题:

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

但是,我不知道如何或在哪里实施它来解决问题。如果有人可以解释,将不胜感激。附带说明一下,尽管 Highchart 容器默认设置为其父 div 的 100% 高度和宽度,但您可以在 CodePen 中清楚地看到它不是 div 的完整高度 - 谁能解释这是为什么?

非常感谢,G

4

2 回答 2

2

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

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

参考: 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完成(而不是按类)。

于 2018-04-25T08:11:18.710 回答
1

为此,我在 github 存储库中整理了一篇博客文章和代码:

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

于 2018-05-12T22:20:14.963 回答