chart.js - Chartjs 中是否可以隐藏某些数据集图例？

Question

是否可以在 ChartJS 中仅隐藏某些数据集图例？我知道可以用

隐藏所有内容

options: {
    legend: {
        display: false

Answer 1

简短回答:是的，这是可能的。不幸的是，它并不像开发人员想象的那么简单。

如果您知道图例中显示的项目的text 值是什么，那么您可以将其过滤掉。阅读 Chart.js 文档后，我发现了 Legend Label Configuration 部分详细介绍了可用于“过滤掉图例项”的 filter 函数，尽管此函数必须在父图表选项对象上设置，而不是作为数据集本身的选项:

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            labels: {
                filter: function(item, chart) {
                    // Logic to remove a particular legend item goes here
                    return !item.text.includes('label to remove');
                }
            }
        }
    }
});

现在，每次数据发生变化并且图表通过 chart.update() 更新时都会调用此过滤器函数。

为了方便起见，我将其设置为 jsfiddle供你玩。

注意:此解决方案是围绕 ChartJS 2.7.1 版本的 API 设计的。 future 版本可能会改进对数据集图例标签的控制。