C3 图表大小在最初加载时太大答案

【问题标题】：C3 chart sizing is too big when initially loadedC3 图表大小在最初加载时太大
【发布时间】：2014-11-18 03:52:02
【问题描述】：

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

最初的不正确显示（第一张图一直延伸）：

加载新数据后的正确结果，在显示第一个结果（上图）之后：

这个问题有好的解决办法吗？

【问题讨论】：

标签： javascript html css c3.js

【解决方案1】：

我发现解决方案与它在隐藏时如何确定元素的全宽有关（在使用引导选项卡等和其他隐藏元素时通常是这种情况）。

要解决这个问题，您需要在窗口上触发 resize 事件，以使 d3（底层图形库）计算出正确的大小。

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

您可以使用类似于

的方式在引导程序上执行此操作

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

在尝试了各种可能之后，我终于找到了解决方案。这是一个 Angular 解决方案，因此遇到此问题且未使用 Angular 的其他任何人都需要对其进行适当修改。

我的解决方法是，我没有在父 div 上使用 ng-show，而是删除了那个，并将它的精确副本添加到每个子标签（h2 和 h2s 的兄弟姐妹）。简单的解决方案，但很难弄清楚。

【讨论】：

我们的 UI/UX 人员声称他通过在 c3.generate() 调用周围使用超时也取得了成功。他使用的是 100，但他说低至零的值 (??!!) 也可以。
看我上面的回答:)

【解决方案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();

});

【讨论】：

【解决方案5】：

如果您正在使用具有多个选项卡的 Foundation，那么以下内容对我有用，

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

myPanelId 是包含图表的面板 ID。

【讨论】：

【解决方案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();
});

【讨论】：

【解决方案7】：

只需设置包含图表的 div 的 CSS 最大宽度即可。

【讨论】：

【解决方案8】：

我们的情况可能会有所不同，但也许对 html 的呈现方式有更全面了解的人可以从中推断出来。

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

【讨论】：