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

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

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

有解决这个问题的好方法吗?

最佳答案

我发现解决方案与隐藏时如何确定元素的全宽有关(通常是使用 bootstrap 标签等和其他隐藏元素时的情况)。

要解决此问题,您需要在窗口上触发resize事件,以使d3(基础图形库)确定正确的大小。
jQuery(window).trigger('resize');
您可以使用类似的方法在 bootstrap 上执行此操作
jQuery('a[data-toggle=tab]').on('shown.bs.tab', function() {jQuery(window).trigger('resize');});

10-05 20:41
查看更多