Chart.js中如何隐藏特定数据集图例仅显示其他数据集图例

云原生阿岚

2026-8-28

实现方案

要单独隐藏某一个数据集的图例，不需要全局关闭图例组件，两种常用实现方式都能达到效果：

方式1（最简便）：直接在需要隐藏图例的柱状图dataset配置项中，增加showInLegend: false属性即可。
这个属性是Chart.js数据集层面的图例控制开关，默认值为true，设为false后只会让当前数据集不生成图例项，不会影响其他数据集的图例展示，也不会影响图表本身渲染、tooltip交互。修改后的柱状图数据集代码片段如下：
```
{
  type: 'bar',
  label: "Recordings",
  showInLegend: false, // 新增这一行即可实现需求
  backgroundColor: ["rgba(2,117,216,0.2)","rgba(75, 192, 192, 0.2)"],
  borderColor: ["rgba(2,117,216,1)","rgba(75, 192, 192, 1)"],
  data: [this.data.singledrivemode,this.data.dualdrivemode],
  order: 2,
  borderWidth: 2,
  barPercentage:0.4
}
```

方式2（兼容所有v3+版本）：在全局图例配置中通过filter回调过滤掉不需要显示的图例项，适合需要批量控制图例显示规则的场景。配置位置在options.plugins.legend.labels下，示例代码：

options: {
  plugins: {
    // 新增图例过滤规则
    legend: {
      labels: {
        filter: (legendItem) => {
          // 过滤掉标签为Recordings的图例项，其余保留
          return legendItem.text !== "Recordings";
        }
      }
    },
    // 原有的tooltip配置保持不变
    tooltip: {
      callbacks: {
        title: (ttItems) => (ttItems[0].dataset.type === 'line' ? '' : ttItems[0].label),
      }
    }
  },
  // 原有的scales等其余配置全部不需要改动
  scales: {
    xAxis: {
      ticks: {
        maxTicksLimit: 6
      }
    },
    yAxis: {
      ticks: {
        maxTicksLimit: 5
      }
    },
    xAxis2: {
      display: false,
      offset: false,
      ticks: {
        display: false
      }
    }
  }
}