我正在使用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');});