初始加载时，C3图表大小过大 [英] C3 chart sizing is too big when initially loaded

问题描述

我使用C3 JavaScript库来显示图形数据。当我的网页初始加载时，图表将被隐藏。直到选择页面上的选项卡，图形才会显示。

I am using the C3 JavaScript library for the display of graph data. When my page initially loads, the graphs are hidden. It isn't until a "tab" on the page is selected that the graphs display.

我看到的麻烦是我的第一个图形不适合它的div标记。我可以通过点击一个按钮来更改查看数据的日期范围，此时图表的大小将正确。

The trouble I am seeing is that my first graph doesn't fit its containing div tag when first loaded. I can change the date range I'm viewing data for by clicking a button, at which time the graphs will be correctly sized.

这里是相关的HTML， m使用的图形（注意，我使用AngularJS，万一帮助/阻碍事情）：

Here is the relevant HTML that I'm using for the graphs (notice that I am using AngularJS, in case that helps/hinders things at all):

<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>

初始的不正确的显示（第一个图形在整个方向上延伸）：
< img src =https://i.stack.imgur.com/SJIuu.jpgalt =第一个图形上的初始宽度不正确>

The initial, incorrect display (the first graph stretches the entire way across):

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

And the correct result after loading new data, after the first result (above) has been displayed:

这个问题有没有很好的解决方案？

Is there a good solution to this problem?

推荐答案

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

After trying a variety of possibilities, I finally found a solution. It's an Angular solution, so anyone else experiencing the problem and not using Angular will need to modify it appropriately.

我是如何解决的，而不是使用ng-show在父div，我删除那一个，并添加到每个子标记（h2和h2s的兄弟姐妹）的精确副本。简单的解决方案，但是这么痛苦想出来。

How I solved it was, rather than using an ng-show on the parent div, I removed that one and added exact copies of it to each sub-tag (the h2 and the h2s' siblings). Simple solution, but such a pain to figure out.

这篇关于初始加载时，C3图表大小过大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！