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 по умолчанию задана высота 100% и ширина его родительского элемента div, в CodePen четко видно, что это не полная высота элемента div. Может кто-нибудь объяснить, почему это так??

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

Answer 1

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

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

Answer 2

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

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

Ссылка: 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 (не по классу).