C3 图表在 Bootstrap 网格布局中不可见答案

【问题标题】：C3 chart is not visible in Bootstrap grid layoutC3 图表在 Bootstrap 网格布局中不可见
【发布时间】：2016-05-26 13:52:34
【问题描述】：

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

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

【问题讨论】：

标签： javascript twitter-bootstrap d3.js twitter-bootstrap-3 c3.js

【解决方案1】：

尝试将图表绘制到引导列内的 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/

【讨论】：