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 “显示一半”：

有没有办法解决这个问题？

谢谢

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