javascript – 最初加载时,C3图表的大小过大

我使用C3 JavaScript库显示图形数据.当我的页面最初加载时,图形将被隐藏.直到选择页面上的“选项卡”,才能显示图形.

我看到的麻烦是,我的第一个图形在首次加载时不符合其包含的div标签.我可以通过单击一个按钮来更改查看数据的日期范围,此时图形的大小正确.

以下是我用于图形的相关HTML(请注意,我使用AngularJS,以帮助/阻止事情)

<div class="chartgrouping">

<div ng-show="showGraphSection" class="graphA">
    <h2 class="section-main-heading">Data A</h2>
    <div id="dataAChart" class="chart c3"></div>
</div>
<div ng-show="showGraphSection" class="graphB">
    <h2 class="section-main-heading">Data B</h2>
    <div class="stats">
        <div class="highest-value">Data Breakdown<span>{{percentageOfSubstance}}%</span></div>
        <div class="goals">GOAL: 20%</div>
    </div>
    <div id="dataBChart" class="c3" style="max-height: 320px; position: relative;"></div>
</div>

</div>

初始的,不正确的显示(第一个图形横跨整个过程)：

加载新数据后,在显示第一个结果(上图)之后的正确结果：

这个问题有很好的解决方案吗？

解决方法

我发现解决方案涉及到如何在隐藏时确定元素的全部宽度(通常使用引导选项卡等和其他隐藏元素时).

为了解决这个问题,您需要在窗口上触发resize事件,使d3(底层图形库)可以正确的调整大小.

jQuery的(窗口).trigger( ‘调整’);

您可以使用类似的东西在引导上执行此操作

jQuery(‘a [data-toggle = tab]’).on(‘shown.bs.tab’,function(){jQuery的(窗口).trigger( ‘调整’);});