Highchart не будет изменять размер с Gridstack

Question

Я воссоздал проблему в этом CodePen:

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

Как вы можете видеть, если вы измените размер тайла Gridstack, Highchart не изменит его размер, несмотря на то, что он установлен на 100% высоты и ширины его родительского div.

Я видел эту тему:

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

Который говорит, что использование этого подхода должно решить проблему:

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

Тем не менее, я не знаю, как и где это реализовать, чтобы решить проблему. Если бы кто-нибудь мог объяснить это, я был бы очень признателен. Кроме того, несмотря на тот факт, что для контейнера Highchart по умолчанию задана высота и ширина его родительского элемента div на 100%, в CodePen четко видно, что это не полная высота элемента div. Может кто-нибудь объяснить, почему это так??

Большое спасибо, G

Answer 1

Последний комментарий в проблеме GitHub, который вы упоминали в своем вопросе, раскрывает решение. использование Chart.reflow функция для настройки графика в соответствии с его контейнером. Ответ, почему это должно быть сделано вручную, приходит из API:

По умолчанию диаграмма автоматически возвращается в свой контейнер после window.resize событие, согласно chart.reflow вариант. Тем не менее, нет надежных событий для div resize, поэтому если размер контейнера изменяется без события изменения размера окна, это должно вызываться явно.

Ссылка: https://api.highcharts.com/class-reference/Highcharts.Chart

Код JS, который делает работу:

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

Демонстрационная версия: https://codepen.io/anon/pen/Vxjaze

Также вы неправильно сослались на контейнер в своем CSS . Это должно быть сделано по id (не по классу).

Answer 2

Я собрал сообщение в блоге вместе с кодом в репозитории Github только для этого:

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