как я могу правильно изменять размеры диаграмм с помощью угловой гибкой компоновки

#angular #highcharts #flexbox #angular-flex-layout

Вопрос:

У меня проблема, когда я помещаю диаграмму highcharts в контейнер flex, созданный с помощью углового гибкого макета, у него есть некоторые проблемы с высотой, когда дело доходит до изменения размера экрана.

Макет довольно простой, есть верхний колонтитул и область содержимого. Когда приложение загружается, все выглядит нормально, и ширина хорошо настраивается при изменениях. Но когда высота увеличивается и снова уменьшается, она не уменьшается. Я думаю, что это как-то связано с моими гибкими коробками, но я действительно не понимаю, почему. С активированными devtools я вижу, что контейнер highcharts остается того же размера.

https://stackblitz.com/edit/stackoverflow-angular-flex-layout-holy-grail-design-8wdp4k?file=src/app/footer/footer.component.html

Комментарии:

1. Вы пробовали оплавление? api.highcharts.com/class-reference/Highcharts. Диаграмма#переплавка

2. в этом примере, если диаграмма растет, ни одно из событий (окно или div) не срабатывает, так как их размер больше не меняется. Таким образом, при изменении размера окна нет крючка, вызывающего перепрошивку. Как окно, так и другие не стреляют. Если я удалю диаграмму, все события будут срабатывать. Я действительно в замешательстве и не знаю, что происходит

3. Я подозреваю, что источник этой проблемы кроется в angular/-flex-layout . Потому что после того, как я упростил этот макет, размер диаграммы изменился правильно. Пожалуйста, проверьте home.component.html файл stackblitz.com/edit/…

4. да, я тоже это подозреваю. Но при ваших изменениях высота компонента не уменьшается. Тогда это то же самое поведение, что и раньше… Я постараюсь сделать новый репродуктор без углового изгиба