如何移除图表指定数据集而非最后添加的数据集？

我完全懂你的困扰——pop()方法确实只能删掉数组最后一个元素，当图表里有多个数据集时，根本没法精准定位到你想移除的那个"2016"数据集。别慌，咱们有两种靠谱的方法能解决这个问题，让你想删哪个就删哪个。

方法一：定位索引后删除（最精准） #

核心思路是先找到目标数据集在数组里的位置，再用splice()方法把它删掉，不管它在数组的哪个位置都能精准命中。

修改后的代码如下：

$('#radar2015').on('change', function () {
    var newDataset2 = {
        label: '2016',
        data: [2019, 552, 750, 1280, 1190, 2345, 2123, 534, 1234],
        backgroundColor: 'rgba(0, 183, 253, .25)',
        borderColor: 'rgb(0, 183, 253)',
        borderWidth: 2
    };
    if ($(this).is(':checked')) {
        radarChart.data.datasets.push(newDataset2);
    } else {
        // 找到label为"2016"的数据集的索引
        const targetIndex = radarChart.data.datasets.findIndex(dataset => dataset.label === '2016');
        // 确认找到后再删除，避免索引无效报错
        if (targetIndex !== -1) {
            radarChart.data.datasets.splice(targetIndex, 1);
        }
    }
    // 关键！必须调用update让图表重新渲染
    radarChart.update();
})

代码说明： #

• findIndex()会遍历数据集数组，返回第一个label等于"2016"的项的索引；如果找不到，就返回-1，所以我们要先判断索引有效再执行删除。
• 最后一定要加radarChart.update()，不然Chart.js不会感知到数据集的变化，图表也不会更新。

方法二：过滤数组重新赋值（更简洁） #

如果不需要关注具体索引，我们可以直接创建一个新数组，只保留不是"2016"的数据集，再把新数组赋值给原数据集数组。这种写法更简洁，代码量更少。

代码示例：

$('#radar2015').on('change', function () {
    var newDataset2 = {
        label: '2016',
        data: [2019, 552, 750, 1280, 1190, 2345, 2123, 534, 1234],
        backgroundColor: 'rgba(0, 183, 253, .25)',
        borderColor: 'rgb(0, 183, 253)',
        borderWidth: 2
    };
    if ($(this).is(':checked')) {
        radarChart.data.datasets.push(newDataset2);
    } else {
        // 过滤掉所有label为"2016"的数据集
        radarChart.data.datasets = radarChart.data.datasets.filter(dataset => dataset.label !== '2016');
    }
    // 别忘了更新图表
    radarChart.update();
})

额外提醒： #

• 不管用哪种方法，都要确保你的数据集label是唯一的，不然可能会误删其他同名数据集。如果有重名需求，建议给每个数据集加一个唯一的id属性，用id来判断会更稳妥。

内容的提问来源于stack exchange，提问作者Christoff