javascript - 使用函数删除 c3 中的图形

Question

当在函数内创建图表时，如何处理图表#.destroy()，例如:

function create(i){
    chart = 'chart' + i
    chart = c3.generate(...)
}
create(1)
create(2)
create(3)

这样它就会创建图表1、图表2、图表3。

我正在尝试让按钮调用函数:clear_chart:

function clear_chart(){
    for(i=1; i<4; i++){
       chart = 'chart' +i
       chart.destroy()
    }
}

我收到错误:未捕获类型错误:无法读取未定义的属性“销毁”

Answer 1

发生这种情况是因为您没有选择执行此操作的图表:

chart = 'chart' +i

您还可以从创建方法中删除同一行，因为它不对您的代码执行任何操作。您为图表变量分配一个值，然后在生成图表时重新分配它，变量的名称仍然是“chart”。

使用图表对象的最简单方法是将它们存储在数组中，然后使用它们:

var charts = [];
function create(){
    var chart = c3.generate(...);
    charts.push(chart);
}
//call create function...

function clear_chart(){
    for(i = 1; i < 4; i++){
        var chart = charts[i - 1]; 
        chart.destroy();     
    }
}

如果您只想通过名称选择特定的一个，我建议您看一下 jQuery 选择器(如果可能的话，将 jQuery 添加到您的项目中)或 d3 选择函数。