如何从Chart.js中删除特定数据集？

Question

我想添加＆amp;使用复选框从c​​hart.js中删除数据集。

现在我正在使用这个添加：

var ds1 = {
    label: ..
    data: .. etc
};
data.datasets.push(ds1);

当我取消选中任何复选框时，它总是删除添加的最后一个数据集，这不是复选框中的一个。

我使用data.datasets.pop(ds1);删除了点击复选框的时间。

Answer 1

如果您使用data.datasets.pop(ds1)删除，则您永远无法获得您正在寻找的结果。 dataset属性是一个数组，所以让我们只关注数组并忽略Chart.js。

第一个问题是the pop() method of the Arrays type does not take an argument，因此提供要删除的元素无关紧要。 Pop()将始终从数组中删除最后一个元素。

要从数组中删除特定元素，您需要使用splice()函数。

让我们说ds1是你要删除的元素。

let removalIndex = data.datasets.indexOf(ds1); //Locate index of ds1
if(removalIndex >= 0) { //make sure this element exists in the array
    data.datasets.splice(removalIndex, 1);
}

这将从我们所在的索引ds1开始删除数组中的1条记录。

Answer 2

如果您查看ChartJS的内部对象chart.data.datasets，则可以通过在最初添加数据集时给出的label来区分数据集（很奇怪没有ID）：

因此，实际上只是通过该标签从数组中过滤出对象并调用chart.update();的问题。

// Filter out and set back into chart.data.datasets
chart.data.datasets = chart.data.datasets.filter(function(obj) {
    return (obj.label != targetLabel); 
});
// Repaint
chart.update();

Answer 3

谢谢你JNYRanger！

它是这样的：

...
$(document).ready(function() {
$('#ind4').change(function(){
    if (this.checked) {
        graph.data.datasets.push(ds4);  
        graph.update();
    } else {
        let removalIndex = graph.data.datasets.indexOf(ds4);
        graph.data.datasets.splice(removalIndex, 1);
        graph.update();
    }
});
});

$(document).ready(function() {
$('#ind5').change(function(){
    if (this.checked) {
        graph.data.datasets.push(ds5);  
        graph.update();
    } else {
        let removalIndex = graph.data.datasets.indexOf(ds5);
        graph.data.datasets.splice(removalIndex, 1);
        graph.update();
    }
});

我刚刚添加了graph.data....（当图表是我的图表的var时）和graph.update()到每个操作的结尾。

Answer 4

实际上你可以在你的数据集中添加一个 ID :

var ds1 = {
    label: ..
    data: ..
    id : 'myId'
};
data.datasets.push(ds1);

无论如何它都不会影响您的数据集或图表

然后就可以找到并删除（或更新）了：

data.datasets.find((dataset, index) => {
    if (dataset.id === 'myId') {
       data.datasets.splice(index, 1);
       return true; // stop searching
    }
});
myChart.update();