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 plotly working with tabs中工作，所以现在我更加怀疑为什么它不起作用。我使用的是DJango 1.9.2。

Answer 1

我在Django上使用了Plotly，使用Bootstrap选项卡也遇到了类似的问题。加载页面后，仅当前活动选项卡的图的大小会自动正确调整。因此，我的解决方法是使用show.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的最新版本

Answer 2

这是一年前，但人们可能会像我一样寻找这个。

(function() {
        var d3 = Plotly.d3;

        // .content is the class of the parent element.
        // So I take the size from there
        var contentInnerWidth = $('.content').innerWidth();
        var contentInnerHeight = $('.content').innerHeight();

        /* I am selecting the parent element and it has a child 
           element with the class .tab.content, where I append a new 
           div with an id (to call it from the tab-menu), it gets the 
           necessary classes and the width and height of its parent 
           element */
        var gd3 = d3.select('.content').selectAll('div.tab-content')
            .append('div')
            .attr('id', 'durationDateArea')
            .attr('class', 'tab-pane fade')
            .style({
                width: contentInnerWidth + 'px',
                height: contentInnerHeight + 'px'
            });

        // Building a graph
        var gd = gd3.node();

        Plotly.plot(gd, [{
            type: 'bar',
            x: [1, 2, 3, 4],
            y: [5, 10, 2, 8],
            marker: {
                color: '#C8A2C8',
                line: {
                    width: 2.5
                }
            }
        }], {
            title: 'Auto-Resize',
            font: {
                size: 16
            }
        });

        // I encountered some problems with the autoresize of Plotly
        // This is my fix for it
        $(window).resize(function() {

            // Getting the height of the window
            var windowheight = $(window).height();

            // Apply window height to .content
            $(".content").css({
                "height": windowheight + "px"
            });

            // Getting the width of .content
            var contentInnerWidth = $('.content').innerWidth();

            // Apply width and height to two divs that are created by 
            // Plotly. Fixed some issueswith hidden overfull elements.
            $(".js-plotly-plot").css({
                "width": contentInnerWidth + "px",
                "height": windowheight + "px"
            });
            $(".plotly").css({
                "width": contentInnerWidth + "px",
                "height": windowheight + "px"
            });

            // Applying width and height to a new variable for Plotly
            var update = {
                width: contentInnerWidth,
                height: windowheight
            };
            // Using Plotly's relayout-function with graph-name and 
            // the variable with the new height and width
            Plotly.relayout(gd, update);
        });

html文件的结构是：

<div class="content">
    <ul class="nav nav-tabs" role="tablist">
        <!-- Navigation Tab Items. All Tabs have to be in here. -->
        <li class="nav-item active">
            <a class="nav-link" data-toggle="tab" href="#durationDateLine">
                <i class="fa fa-line-chart" aria-hidden="true"></i> Line Chart
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#durationDateArea">
                <i class="fa fa-area-chart" aria-hidden="true"></i> Area Chart
            </a>
        </li>

    </ul>
    <!-- Element where the charts will be shown and the JS-file may append the divs to. -->
    <div class="tab-content">
        <div id="durationDateLine" class="tab-pane fade in active"></div>
    </div>
</div>

使用标签

2 个答案: