Plotly plot 无法在模态内自动缩放

Question

我对 Plotly.js 和 bootstrap 有疑问。在模态中插入图形时，即使将绘图宽度设置为 100% 并且绘图布局选项自动调整大小设置为 true，绘图也不会自动缩放到模态宽度。

打开模式时，情节是 100 像素宽 （而不是 100%），我必须以编程方式（或手动）单击 "autoscale" 模式栏按钮以正确显示绘图。

您可以使用此代码笔查看实际效果：

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

Plotly plot failed to automatically scale inside a modal