如何在ChartJS中仅显示图例矩形而不显示图例文本？

AI 小北

2026-5-21

在ChartJS中仅显示图例矩形（隐藏文本）的方法

当然有办法实现这个需求！我整理了几个实用的方案，你可以根据自己的场景选择：

方法1：通过自定义图例生成函数（推荐，保留交互性）

这个方法是利用ChartJS的generateLabels钩子，重写图例项的文本内容，把它设为空字符串。好处是完全保留图例的点击交互（比如点击矩形隐藏对应数据系列），只是去掉了旁边的文本。

示例代码：

const chart = new Chart(ctx, {
  type: 'bar', // 替换为你的图表类型
  data: { /* 你的数据配置 */ },
  options: {
    plugins: {
      legend: {
        labels: {
          // 自定义图例生成逻辑
          generateLabels: function(chart) {
            // 获取默认的图例配置
            const defaultLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
            // 遍历每个图例项，清空文本
            return defaultLabels.map(label => ({
              ...label,
              text: ''
            }));
          },
          // 可选：调整图例矩形的大小，让它更显眼
          boxWidth: 20
        }
      }
    }
  }
});

方法2：用CSS直接隐藏文本

如果不需要太复杂的逻辑，用CSS隐藏图例文本是最简单的方式。直接针对ChartJS的图例文本元素写样式：

/* 隐藏所有ChartJS图例的文本 */
.chartjs-legend-item text {
  display: none;
}

/* 如果只想针对特定图表，给图表容器加类名 */
.my-custom-chart .chartjs-legend-item text {
  display: none;
}

注意：这个方法会直接隐藏文本，不会影响图例的交互功能，但如果页面有多个ChartJS图表，记得加类名区分，避免误隐藏其他图表的图例文本。