图表不会在 `onchange` 函数中重绘

Question

我设置了一个 HTML 页面，其中包含 C3 驱动的图表。当页面加载时，图表会从 CSV 文件加载数据。我的页面上还有一个 select 元素。当用户更改 select 中的 option 时，我希望图表重新加载新数据。

基本上，这是我的代码。

var chart = c3.generate({
    bindto: "#chart",
    data: {
        url: dataFile,
        x: "year"
    }
});

document.getElementById("select-element").onchange = function(){
    var newData = [ /* an array of JavaScript objects */ ];
    chart.data.json = newData;
};

但是当我 select 在 select 下拉列表中选择一个选项时，没有任何变化。如何修复它以便我的图表从 newData JS 对象数组加载数据？

Answer 1

首先尝试通过 load() 和 unload() 方法加载数据，这是正确的方法（可以是 json、url、行或列），如下所示示例：

chart.load({
  columns: [
    ['data1, 100, 200, 150, ...],
    ...
  ],
  unload: ['data2', 'data3']
});

请注意，此方法有大量文档记录，应阅读：

Link to load method documentation

要强制重绘，可以调用flush()方法：

chart.flush();

图表不会在 `onchange` 函数中重绘

Chart won't redraw in `onchange` function

javascript

d3.js

c3.js