Plotly 绘图无法在模态中自动缩放答案

【问题标题】：Plotly plot failed to automatically scale inside a modalPlotly 绘图无法在模态中自动缩放
【发布时间】：2018-11-17 02:00:43
【问题描述】：

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

打开模式时，绘图是 100px 宽（而不是 100%），我必须以编程方式（或手动）单击“自动缩放”模式栏按钮才能正确显示绘图。

您可以使用此 codepen 看到这一点：

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

如果有人知道如何在渲染后无需重新缩放绘图全角显示，我会非常高兴。

谢谢！阿诺

PS：也发在github

【问题讨论】：

【解决方案1】：

出现问题是因为在模式打开之前加载了绘图。

您可以在正常工作的加载模式下生成绘图或更新绘图布局。

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

或

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

【讨论】：