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

Question

我正在使用C3 JavaScript库来显示图形数据。当我的页面最初加载时，图表将被隐藏。它不会直到＆＃34;标签＆＃34;在页面上选择图表显示。

我遇到的麻烦是我的第一张图在第一次加载时不适合包含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更改为“ opacity：0”，问题就消失了。