密谋图无法在模态内自动缩放 [英] Plotly plot failed to automatically scale inside a modal

问题描述

我对Plotly.js和引导程序有问题.在模态中插入图形时，即使将图宽设置为100％，并且将图版图选项的autosize设置为true，图也不会自动缩放为模态宽度.

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.

打开模态时，图为 100px宽(而不是100％)，我必须以编程方式(或手动)单击自动缩放"模式栏按钮以正确显示图.

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.

您可以在此Codepen中看到它的作用:

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.

谢谢！阿尔诺(Arnaud)

Thanks! Arnaud

PS:也发布在 github

推荐答案

之所以会发生此问题，是因为在模式打开之前加载了图.

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

或

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

此处的示例

这篇关于密谋图无法在模态内自动缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！