Chart.js：如何移除堆叠分组图表中的特定标签

嘿，我来帮你搞定这个问题！根据你的需求，我分两种常见场景给出具体方案：

场景1：移除某个数据集的标签（比如示例中的"Orange"系列） #

如果你想隐藏图例里的特定数据集标签，有两种简单方法：

方法1：直接修改数据集的label属性 #

把目标数据集的label设为空字符串或者null，这样图例就不会显示它了：

var barChartData = {
    labels: ['January', 'March', 'June', 'September', 'December'],
    datasets: [{
        label: 'Apple',
        borderColor: 'rgba(255, 50, 50,1)',
        backgroundColor: 'rgba(255, 50, 50,0.5)',
        stack: 'Stack 0',
        data: [3,6,4,8,2]
    }, {
        label: '', // 将这里设为空，即可隐藏该标签
        borderColor: 'rgba(255, 160, 242,1)',
        backgroundColor: 'rgba(255, 160, 242,0.5)',
        stack: 'Stack 0', // 补全stack值，保证堆叠功能正常
        data: [2,4,3,5,1] // 记得补上你的数据哦，不然图表无法正常渲染
    }]
};

方法2：通过图表配置过滤图例 #

如果不想修改原始数据，可以在初始化图表时，通过legend.labels.filter来控制显示哪些标签：

// 假设你的canvas元素id是"stackedChart"
var ctx = document.getElementById('stackedChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        legend: {
            labels: {
                filter: function(item) {
                    // 只保留不是"Orange"的标签，隐藏目标标签
                    return item.text !== 'Orange';
                }
            }
        },
        scales: {
            xAxes: [{ stacked: true }],
            yAxes: [{ stacked: true }]
        }
    }
});

场景2：移除X轴上的特定标签（比如某个月份） #

如果是想隐藏X轴上的特定标签（比如"June"），同样有两种方案：

方法1：直接修改labels数组并同步数据集数据 #

彻底移除标签和对应的数据，保证数据与标签一一对应：

// 过滤掉X轴上的"June"标签
const targetLabel = 'June';
const targetIndex = barChartData.labels.indexOf(targetLabel);

if (targetIndex !== -1) {
    // 删除目标标签
    barChartData.labels.splice(targetIndex, 1);
    // 同步删除每个数据集对应索引的数据
    barChartData.datasets.forEach(dataset => {
        dataset.data.splice(targetIndex, 1);
    });
}

方法2：通过ticks回调隐藏标签（保留数据） #

如果只想隐藏标签但保留对应的数据，可以用X轴刻度的callback方法：

var ctx = document.getElementById('stackedChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        scales: {
            xAxes: [{
                stacked: true,
                ticks: {
                    callback: function(value) {
                        // 如果是目标标签，返回空字符串不显示
                        return value === 'June' ? '' : value;
                    }
                }
            }],
            yAxes: [{ stacked: true }]
        }
    }
});

小提醒 #

• 注意你的示例中"Orange"数据集缺少data属性，记得补充数据才能正常渲染图表；
• 堆叠图表的stack属性要保持一致（比如都设为"Stack 0"），否则无法实现堆叠效果。

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