初始加载时,C3图表大小太大

Question

我正在使用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>

初始的,不正确的显示(第一个图表延伸到整个方向):

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

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

Answer 1

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

要解决这个问题,您需要在窗口上触发resize事件,以使d3(基础图形库)计算出正确的大小.

jQuery(window).trigger('resize');

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

jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() { jQuery(window).trigger('resize'); });