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

Posted 2023-02-18

【中文标题】Plotly 绘图无法在模态中自动缩放

【英文标题】：Plotly plot failed to automatically scale inside a modal

【发布时间】：2018-11-17 02:00:43

【问题描述】：

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

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

您可以使用此 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; -->

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

谢谢！ 阿诺

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

Example here

【讨论】：

谢谢！如果我在这个模式中有一个标签面板怎么办？我仍然有从一个选项卡到另一个选项卡的问题。看到这个codepen

好的。 Plotly.Plot.resize() 似乎就足够了。