C3图表会继续在div之外生成，除非在标签上重新聚焦

Question

由于某种原因，当页面加载时，我的c3图表会在div之外生成，但是当我切换标签并返回时，它会自行修复。不知道为什么会这样。

以下是在HTML底部底部的<script>标签中调用的C3图表：

var chart = c3.generate({
    bindto: '#nodes-os-chart',
    data: {
        columns: <%= @data %>,
        type : 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    },
    legend: {
        position: "right"
    }
});

这是应该加载的div：

  <div class="row">
    	<div class="col-lg-5">
    		<center><h4>Top 5 OSes</h4></center>
    		<div id="nodes-os-chart"></div>
    	</div>
    	<div class="col-lg-7">
    		...another table...
    	</div>
    </div>

转到页面时，div实际上将与第二个页面重叠-实际上位于页面的中间，而不是页面的左侧。这是有时的截图：

然后我转到另一个选项卡并返回的那一刻，它很好，并显示在左侧。

有什么办法解决这个问题吗？