如何为Donut图表设置图例显示限制？隐藏指定图例但保留图表元素

针对你提供的甜甜圈图数据，要隐藏Green和Purple的图例但保留它们在图表中的显示，可以通过Chart.js的图例过滤功能实现，具体配置如下：

核心配置逻辑 #

利用Chart.js的图例过滤配置项，自定义规则筛选需要显示的图例，不影响图表内的数据块渲染。

完整代码示例（Chart.js v3+） #

const data = {
  labels: ['E-commerce', 'Enterprise', 'Green', 'Grey', 'Purple'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 3],
      backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'],
      borderWidth: 1,
    },
  ],
};

const options = {
  plugins: {
    legend: {
      labels: {
        // 过滤掉Green和Purple的图例项
        filter: (item) => !['Green', 'Purple'].includes(item.text)
      }
    }
  }
};

// 初始化甜甜圈图
new Chart(document.getElementById('yourChartContainer'), {
  type: 'doughnut',
  data: data,
  options: options
});

关键说明 #

• filter函数接收每个图例项作为参数，返回true则显示该图例，返回false则隐藏。
• 上述代码通过判断图例文本是否属于Green或Purple，返回取反结果，精准隐藏指定图例。
• 图表中的对应数据块不受此配置影响，会正常渲染显示。

兼容Chart.js v2版本的配置 #

如果使用的是Chart.js v2，只需调整配置结构：

const options = {
  legend: {
    filter: (item) => !['Green', 'Purple'].includes(item.text)
  }
};

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