Plotly plot failed to automatically scale inside a modal

问题

I have an issue with Plotly.js and bootstrap. When inserting a graph within a modal, the plot is not automatically scaled to the modal width even if the plot width is set to 100%, and the plot layout option autosize set to true.

When opening the modal, the plot is 100px-wide (instead of 100%) and I have to programatically (or manually) click on the "autoscale" modebar button to correctly display the plot.

You can see this in action with this codepen:

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}; -->

I would be very happy if someone has a clue of how to display the plot full-width without having to rescale it after render.

Thanks! Arnaud

PS: also posted on github

回答1:

Issue happen because plot loading before modal opening.

You may generate plot or update plot layout on loading modal that's working fine.

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

or

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

Example here

来源：https://stackoverflow.com/questions/50736399/plotly-plot-failed-to-automatically-scale-inside-a-modal