图表不会在onchange函数中重绘

时间:2018-08-03 17:34:36

标签: javascript d3.js c3.js

我已经建立了一个带有C3图表的HTML页面。页面加载后,图表将从CSV文件加载数据。我的页面上还有一个select元素。当用户更改option中的select时,我希望图表重新加载新数据。

基本上,这是我的代码。

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下拉列表中选择一个选项时,没有任何变化。如何解决该问题,以便图表可以从JS对象的newData数组中加载数据?

1 个答案:

答案 0 :(得分:2)

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

String contentType = con.getHeaderField("Content-Type");

请注意,此方法已被详细记录,应阅读:

Link to load method documentation

要强制重绘,可以调用flush()方法:

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