Highcharts - вопрос о полной ширине диаграммы

Я использую диаграмму столбцов Highcharts, и я хочу, чтобы она была 100% -ной шириной. Контейнер представляет собой простой <div> без какого-либо форматирования. Когда документ загружается, график всегда имеет фиксированную ширину 600x400 пикселей. Если я изменил размер окна или переключился на другую вкладку браузера, диаграмма заполнит ширину и станет гибкой диаграммой полной ширины, как хотелось бы. Если я перезагружаю страницу, она снова фиксирует ширину. Я попытался установить ширину как для контейнера, так и для диаграммы, однако ничего не помогает. Если я перемещаю контейнер div на один уровень выше родительского div, он работает. Как сделать диаграмму также полной шириной при загрузке страницы?

Спасибо

Ответ 1

Ширина диаграммы взята из jQuery.width(container), поэтому, если у вас есть диаграмма в некоторых скрытых вкладках или что-то подобное, ширина будет undefined. В этом случае устанавливаются по умолчанию ширина и высота (600x400).

Ответ 2

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

Как и в Highcharts 4.1.5 (может быть и в более старых версиях), объект chart имеет функцию reflow(). Просмотрите документацию здесь.

reflow()

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

Надеюсь, что это поможет кому-то другому.