加载到非活动选项卡中时，Dygraphs无法正确显示

Question

我将Dygraph设置为在Bootstrap中具有多个选项卡的页面中呈现。默认情况下不会选中带有图形的选项卡，但是在页面加载时我会将其渲染。这是发生的事情：

如果不是标签，那么图表将会正常加载。有没有解决这个问题？

Answer 1

这个错误实际上是div没有显示的问题，而且dygraphs不知道正确的宽度。如果在显示dygraph的情况下调整窗口大小，它将正确显示。所以，要解决这个问题：

$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    g.resize(); // resize the dygraph
});

Answer 2

隐藏选项卡时，对应于该选项卡的div的宽度值将为负值。因此，根据使用情况，有必要创建一个图形包装div，并通过boostrap来获取其大小。

然后在处理调整大小窗口消息时，给图div一个 visible 元素的宽度和高度，然后一切都会正常运行。

这是我使用Boostrap 3在现实生活中解决问题的方式。

<!-- these are my tabs -->
<ul class="nav nav-tabs ">
    <li class="active"><a id="plot-tab-link" data-toggle="tab" href="#image">Graph Bitmap Image</a></li>
    <li><a id="dygraph-tab-link" data-toggle="tab" href="#dygraph">Dygraph</a></li>
</ul>

<!-- we want to display an image and a dygraph -->
<div class="tab-content col-sm-12">
    <div id="image" class="tab-pane active">
        <div id="plot-wrapper" class="col-sm-12 text-center">
            <image src=""
                   class="best-fit-image"
                   alt="Loading image ... Please wait!" id="plot"/>
        </div>
    </div>
    <div id="dygraph" class="tab-pane">
        <div id="graph-wrapper" class="col-sm-12 text-center">
            <div id="graph"></div>
        </div>
    </div>
</div>

这是我调整窗口大小的功能代码。

const RESIZE_FACTOR = 0.7; // fix it accordingly

var resizeWindow = function() {
    var graphHeight = $(window).height() * RESIZE_FACTOR;
    var graphWidth;

    $('#plot-wrapper').height(graphHeight);
    $('#graph').height(graphHeight);

    graphWidth = $('#plot-wrapper').width();
    if (graphWidth <= 0)
        graphWidth = $('#graph-wrapper').width();
    $('#graph').width(graphWidth);

    if (graph)
        graph.resize();
};