График Plotly не смог автоматически масштабироваться внутри модального

Question

У меня проблема с Plotly.js и начальной загрузкой.При вставке графика в модальный график автоматически не масштабируется до модальной ширины, даже если ширина графика установлена ​​на 100%, а для параметра макета графика автоматически задано значение true.

При открытии модальногоГрафик 100px в ширину (вместо 100%), и мне нужно программно (или вручную) нажать кнопку на панели режима «автомасштаб», чтобы правильно отобразить график.

Вы можете видетьэто в действии с этим кодом:

https://codepen.io/anon/pen/PaGOWv?editors=1010

<div class="modal-body">
    <div id="myDiv" style="width: 100%;"></div>
 </div>
 <!-- with plotly option: var layout = {autosize: true}; -->

Я был бы очень рад, если бы кто-то имел представление о том, как отобразить график на всю ширину без необходимости масштабировать его послерендер.

Спасибо!Арно

PS: также опубликовано на github

Answer 1

Проблема возникает из-за загрузки графика перед открытием режима.

Вы можете создать график или обновить макет графика при загрузке модального режима, который работает нормально.

$('#myModal').on('shown.bs.modal', function (e) {
  Plotly.newPlot('myDiv', data, layout);
})

или

$('#myModal').on('shown.bs.modal', function (e) {
  Plotly.relayout('myDiv',layout);
})

Пример здесь