javascript - C3 图表在 Bootstrap 网格布局中不可见

Question

我使用 Bootstrap 3 和 bootstrap grid layout并且想要渲染一个C3饼图，但是C3饼图在一列中是不可见的。如果我不使用 bootstrap 网格布局，图表是可见的。

jsfiddle

html

<div class="row">
    <div class="col-md-6" id="fst-chart">
    </div>
    <div class="col-md-6" id="snd-chart">
    </div>
</div>

javascript

var chart = c3.generate({
                bindto: '#snd-chart',
                size: {
                    width: 300
                    //height: 300
                },
                padding: {
                    top: 10,
                    left: 200
                },
                legend: {
                    position: 'right'
                },
                tooltip: {
                    format: {
                        value: function (value, ratio, id, index) { return "ratio: " + ratio + " value: " + value; }
                    }
                },
                data: {
                    // iris data from R
                    columns: [
                        ['data1', 30],
                        ['data2', 120]
                    ],
                    type : 'pie',
                    onclick: function (d, i) { console.log("onclick", d, i); }
                }
            });

            setTimeout(function () {
                chart.load({
                    columns: [
                        ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
                        ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
                        ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8]
                    ]
                });
            }, 1500);

            setTimeout(function () {
                chart.unload({
                    ids: 'data1'
                });
                chart.unload({
                    ids: 'data2'
                });
            }, 2500);

Answer 1

尝试将图表绘制到 bootstrap 列内的 div。

<div class="row">
  <div class="col-md-6">
    <p>Col #1</p>
  </div>
  <div class="col-md-6">
    <div id="snd-chart">
    </div>
  </div>
</div>

(我只是将占位符文本放在第一列中，因为在此示例中您似乎没有绘制该图表)。

https://jsfiddle.net/sco_tt/xvn1daLu/