用d3.js/c3.js替换图表数据集

Question

在这里演示

在演示中,我试图卸载所有当前数据集并加载新的数据集,如下所示:

使用C3.js

chart.unload();
chart.load({
    columns: [
        ['data1', 130, 120, 150, 140, 160],
        ['data2', 30, 20, 50, 40, 60, 50],
    ],
});

这显然不是处理此过程的正确方法,如演示所示,这不能正常工作.

C3教程声明数据集应该像这样替换:

chart.load({
    columns: [
        ['data1', 130, 120, 150, 140, 160],
        ['data2', 30, 20, 50, 40, 60, 50],
    ],
    unload: ['data3', 'data4', 'data5'],
});

再次演示显示这种方法正常但是...

题

如何卸载所有当前数据集并将其替换为新数据集,而无需指定其各自的数据名称(data3,data4)等？

注意:数据集在名称和数量上是可变的,因此我只想卸载ALL.

从根本上说,我想要做的就是用点击替换新的数据集.

Answer 1

我不知道它是否对你有用,过去我曾经使用过这个(在相同的加载功能中卸载).对于你的代码应该是

chart.load({
     columns: [
          ['data1', 130, 120, 150, 140, 160, 150],
          ['data4', 30, 20, 50, 40, 60, 50],
      ],
     unload: chart.columns,
});

工作小提琴

$('#A').on('click', function () {

    chart.load({
        columns: [
            ['data1', 130, 120, 150, 140, 160, 150],
            ['data4', 30, 20, 50, 40, 60, 50],
        ],
            unload: chart.columns,
    });
});

$('#B').on('click', function () {
    chart.load({
        columns: [
            ['data1', 130, 120, 150, 140, 160, 150],
            ['data4', 30, 20, 50, 40, 60, 50],
        ],
        unload: chart.columns,
    });
});