使用选项卡时以图表高度调整大小 [英] Plotly chart height resize when using tabs

问题描述

我正在使用Plotly库创建数据图表.我遇到的问题是，当我尝试在不同的选项卡中将它们分开时，除了第一个选项卡的图表可以正常工作外，它没有按预期进行调整大小(只是高度，宽度都可以).

I'm using Plotly library to create charts of my data. The issue that I'm encountering with is that when I tried to separate them in different tabs it's not resizing as it's suppose to do (just with the height, width is OK) except for the chart of the first tab, which works OK.

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

In my index.html I have the following structure:

<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部分如下所示:

And myindex.js part that has to create the chart looks like this:

$( 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()...)开始创建的，因此没有为第二张图表指定正确的高度.(第一个标签的图表调整大小就可以了.)

I'm sure that it's having some issue with the tabs because when I first putted it all together it worked as a charm. I think that since they are being created since the beginning $( document ).ready(function()...) it's not giving the right height to the second chart. (The chart of the first tab resizes just fine.)

现在我很难找到一个可靠的解决方案，所以在此先感谢.

Right now I'm having trouble to found a reliable solution, so thanks in advance.

好吧，我让它在jsfiddle中工作通过选项卡进行工作，所以现在我有了甚至怀疑它为什么不起作用.我正在使用DJango 1.9.2.

Well, I got it working in jsfiddle plotly working with tabs, so now I have even more doubts why it's not working. I'm using DJango 1.9.2.

推荐答案

我在Django中使用了Plotly，并且在使用Bootstrap选项卡时也遇到了类似的问题.加载页面后，仅当前活动选项卡的图的大小会自动正​​确调整.因此，我的解决方法是使用show.bs.tab事件触发每个对应图形的重新呈现.Plotly.Plots.resize或Plotly.relayout(item，{autosize:true})将达到目的

I use Plotly with Django and had a similar issue using Bootstrap tabs. When the page is loaded only currently active tab's plots autosized correctly. So my workaround was to use shown.bs.tab event to trigger rerendering of each corresponding graph. The Plotly.Plots.resize or Plotly.relayout(item, {autosize: true}) will do the trick

$(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的最新版本

Works with the latest versions of Edge, Google Chrome and IE11

这篇关于使用选项卡时以图表高度调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！