javascript - 图例点击和数据更新后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);