javascript - 无法在模态中获取 Plotly 绘图中心

Question

我的目标是加载一个模态并在该模态中呈现一个 Plotly 图。这成功地完成了，但是，对齐都是错误的。看起来模态似乎在 Plotly 绘图完成创建之前居中，因此模态不会考虑绘图的大小。

这是我的 HTML 代码（我使用的是 Flask，因此是模板）：

{% extends "base.html" %}

{% block content %}


  <!-- Trigger the modal with a button -->
  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Short modal
  </button>

<!-- Modal -->
  <!-- Modal -->
  <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->


<script type="text/javascript">

    var graphs = {{graphJSON | safe}};

    var layout = {
                  width: 1200,
                  height: 800
                };

    Plotly.plot('myDiv',graphs,layout);

</script>

{% endblock %}

这是结果并显示了不正确的对齐方式。

根据我的研究，我发现了一些解决此类问题的尝试，但是，这些都没有奏效，例如，Plotly plot failed to automatically scale inside a modal。我对 Javascript 的了解是初学者水平，我认为这是问题的一半。任何帮助将非常感激！

标签： javascripthtmlplotlybootstrap-modal