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是＆＃34;显示了一半＆＃34;：

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

谢谢

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