Javascript 使用选项卡时打印图表高度调整

我正在使用Plotly库创建数据图表。我遇到的问题是，当我尝试在不同的选项卡中分离它们时，除了第一个选项卡的图表外，它并没有按照预期调整大小（只是高度、宽度是可以的），这一点可以正常工作

在my 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>

我敢肯定，它的标签有一些问题，因为当我第一次把它放在一起，它作为一个魅力。我认为，由于它们是从一开始就创建的

$（document）.ready（function（）…）

，因此没有为第二个图表提供正确的高度。（第一个选项卡的图表调整得很好。）

现在我很难找到一个可靠的解决方案，所以请提前感谢

编辑1：

---

好吧，我在JSFIDLE中得到了它的工作，所以现在我更怀疑它为什么不工作。我正在使用DJango 1.9.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>

我将Plotly与Django一起使用，并且在使用引导选项卡时遇到了类似的问题。加载页面时，只有当前活动选项卡的绘图自动正确调整大小。所以我的解决方法是使用show.bs.tab事件触发每个对应图形的重新排序。 Plotly.Plots.resize或Plotly.relayout（项，{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});
    }
})

$（document）.on（'show.bs.tab'，'a[data toggle=“tab”]”，函数（事件）{
var doc=$（“.tab-pane.active.plotly graph div”）；
对于（变量i=0；i

---

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

这对我很有用。我只需要将函数的内容添加到现有的单击展开函数中，就删除了doc var中的.tab-pane.active。此信息是黄金信息，很难找到！。

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