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

Posted 2023-02-22

【中文标题】用 d3.js / c3.js 替换图表数据集

【英文标题】：Replacing chart datasets with d3.js / c3.js

【发布时间】：2015-02-14 18:13:58

【问题描述】：

DEMO HERE

在演示中，我尝试卸载所有当前数据集并像这样加载新数据集：

使用 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）等？

注意：数据集的名称和数量是可变的，因此我只想卸载所有。

基本上我想做的就是在点击时用新的数据集替换数据集。

【参考方案1】：

我不知道它是否对你有用，过去我使用过这个（在相同的加载函数中卸载）。对于您的代码，它应该是

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

工作fiddle

$('#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,
    );
);

【讨论】：

感谢您的意见，但正如我上面提到的，这是推荐的方法。我需要能够在不指定名称的情况下卸载所有数据集。

@Obsidian 我已经更新了我的答案。是你要找的吗？

不应该卸载刚刚添加的列吗？