javascript - c3js单击图例和更新数据后隐藏数据

为了解释我的问题，我在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 display”：




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

谢谢

最佳答案

问题似乎是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);

关于javascript - c3js单击图例和更新数据后隐藏数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47770921/