使用选项卡时绘制图表高度调整大小

Question

我正在使用 Plotly 库来创建我的数据图表。我遇到的问题是，当我尝试在不同的选项卡中将它们分开时，它不会像预期的那样调整大小（仅使用高度，宽度可以），除了第一个选项卡的图表，它工作正常。

在我的 index.html 中，我有以下结构：

<script type="text/javascript" src="{{STATIC_URL}}myindex.js"></script>

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#var1">Var 1</a></li>
  <li><a data-toggle="tab" href="#var2">Var 2</a></li>
</ul>

<div class="tab-content">
  <div id="var1" class="tab-pane fade in active">

    <div class="thumbnail parent_container" style="margin-top: 100px;">
      <div class="thumbnail text-center chart">
          <div id="chart1">
          </div>
      </div>
      ...
    </div>

  </div>

  <div id="var2" class="tab-pane fade">

    <div class="thumbnail parent_container" style="margin-top: 100px;">
      <div class="thumbnail text-center chart">
          <div id="chart2">
          </div>
      </div>
      ...
    </div>

  </div>
</div>

必须创建图表的 myindex.js 部分如下所示：

$( document ).ready(function()
{
  "use strict";  

  var WIDTH_IN_PERCENT_OF_PARENT = 96;
  var HEIGHT_IN_PERCENT_OF_PARENT = 80;

  var chart1 = d3.select('div#chart1')
    .style({
        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
        'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT)/2 + '%',
        height: HEIGHT_IN_PERCENT_OF_PARENT + '%'
    });

  var chart2 = d3.select('div#chart2')
    .style({
        width: WIDTH_IN_PERCENT_OF_PARENT + '%',
        'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT)/2 + '%',
        height: HEIGHT_IN_PERCENT_OF_PARENT + '%'
    });

  var chart1_node = chart1.node();
  var chart2_node = chart2.node();

  var time_Array = [];
  var var1_value = [];
  var var2_value = [];

  var data_var1 = [{
    x: time_Array,
    y: var1_value,
    ...
  }];

  var data_var2 = [{
    x: time_Array,
    y: var2_value,
    ...
  }];

  var layout_var1 = {
    xaxis: {...},
    yaxis: {...}
  };

  var layout_var2 = {
    xaxis: {...},
    yaxis: {...}
  };

  Plotly.plot(chart1_node, data_var1, layout_var1);
  Plotly.plot(chart2_node, data_var2, layout_var2);

  ...
});

我敢肯定它的标签有一些问题，因为当我第一次把它们放在一起时，它很有魅力。我认为因为它们是从一开始$( document ).ready(function()...)就被创建的，所以它没有为第二张图表提供正确的高度。（第一个选项卡的图表大小调整得很好。）

现在我很难找到可靠的解决方案，所以提前致谢。

编辑 1：

好吧，我让它在 jsfiddle 中与 tabs 一起工作，所以现在我更加怀疑为什么它不起作用。我正在使用 DJango 1.9.2。

Answer 1

我将 Plotly 与 Django 一起使用，并在使用 Bootstrap 选项卡时遇到了类似的问题。当页面加载时，只有当前活动选项卡的绘图正确自动调整大小。所以我的解决方法是使用 shows.bs.tab 事件来触发每个相应图形的重新渲染。Plotly.Plots.resize 或 Plotly.relayout(item, {autosize: true}) 可以解决这个问题

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (event) {
    var doc = $(".tab-pane.active .plotly-graph-div");
    for (var i = 0; i < doc.length; i++) {
        Plotly.relayout(doc[i], {autosize: true});
    }
})

适用于最新版本的 Edge、Google Chrome 和 IE11