图例点击和数据更新后c3js隐藏数据

Question

为了解释我的问题，我在 c3js 网站 (http://c3js.org/samples/chart_bar.html) 上使用了以下代码：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
        // or
        //width: 100 // this makes bar width 100px
    }
});

setTimeout(function () {
    chart.load({
        unload : true,
        columns: [
            ['data3', 130, -150, 200, 300, -200, 100]
        ]
    });
}, 3000);

setTimeout(function () {
    chart.load({
       unload : true,
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],

    });
}, 4000);

我点击data1隐藏了其中一条数据未更新，我有以下，这是正常的：

但是在最后一次更新之后，我得到了一个奇怪的行为，其中 data1 是 "half displayed":

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

谢谢

Answer 1

好像是c3的绘图逻辑问题。但是这个问题有一个解决方法。检查以下代码：

setTimeout(function () {
    chart.load({
        unload : true,
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        done : function() {
            // After chart is drawn, shown all the hidden legend.
            chart.show();
        }
    });
}, 4000);

图例点击和数据更新后c3js隐藏数据

c3js Hide data after legend click and data update

javascript

d3.js

c3.js