初始加载时，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');
});

Answer 2

就我而言，@ Flanamacca的回答只是部分奏效。使用延迟为0的setTimeout加载图表数据似乎可以修复它。

Answer 3

在尝试了各种可能性后，我终于找到了解决方案。这是一个Angular解决方案，所以遇到问题并且不使用Angular的任何其他人都需要适当地修改它。

我是如何解决它的，而不是在父div上使用ng-show，我删除了那个并将其精确副本添加到每个子标签（h2和h2s的兄弟姐妹）。简单的解决方案，但这样的痛苦要弄明白。

Answer 4

jQuery(window).trigger('resize');的东西对我不起作用。但使用C3 resize ( )函数就像老板一样：

var chart = c3.generate({
bindto: '#chart',
data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 0],
        ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
        data1: 'area',
        data2: 'area-spline'
    }
}
});


$('.collapse').on('shown.bs.collapse', function() {//Your event listner
    chart.resize();

});

Answer 5

如果您使用具有多个选项卡的Foundation，则以下内容适用于我，

$('#myPanelId' ).on('toggled', function(){
        jQuery(window).trigger('resize');
 })

其中myPanelId是包含图表的面板ID。

Answer 6

@ Flanamacca的答案对我不起作用，虽然这是一个与引导选项卡相关的问题所以我确实使用了他们建议的jQuery选择器。

对我有用的是c3 flush（）方法，它强制图表重绘（参见http://c3js.org/reference.html#api-flush）。

$('a[data-toggle=tab]').on('shown.bs.tab', function() {
  my_c3_chart.flush();
});

Answer 7

简单地设置包含图表的div的CSS最大宽度对我有用。

Answer 8

我们的情况可能会有所不同，但是对于如何呈现html有更全面理解的人可以从中推断出来。

我的问题是我隐藏了图表，直到我的数据被拉入并且图表是用c3.generate生成的。我使用css“display：none;”隐藏了图形。这就是造成这个问题的原因。一旦我将我的CSS改为“不透明度：0”，问题就消失了。