如何使用Chart.js仅显示分组柱状图中的前2个数据系列？

核心思路 #

Chart.js本身没有直接的配置项用来隐藏指定数据集的柱状条，但可以通过控制数据集的显示状态结合自定义tooltip逻辑实现需求——既隐藏不需要的柱状条，又保留原始数据用于tooltip展示。

具体实现方案 #

1. 标记数据集的显示状态 #

给不需要展示的数据集（如Facebook点赞、Twitter点赞等）设置display: false，这样这些柱状条不会在图表中渲染，但数据会保留在图表实例中，供tooltip调用：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['文章1', '文章2', '文章3'],
    datasets: [
      {
        label: '总点赞数',
        data: [240, 320, 450],
        backgroundColor: '#ff7f50',
        display: true // 显示该柱状条
      },
      {
        label: '总评论数',
        data: [80, 120, 90],
        backgroundColor: '#87cefa',
        display: true // 显示该柱状条
      },
      {
        label: 'Facebook点赞数',
        data: [150, 180, 220],
        backgroundColor: '#ffd700',
        display: false // 隐藏柱状条，保留数据
      },
      {
        label: 'Twitter点赞数',
        data: [90, 140, 230],
        backgroundColor: '#98fb98',
        display: false // 隐藏柱状条，保留数据
      }
    ]
  }
});

2. 自定义tooltip展示全量数据 #

默认tooltip只会显示display: true的数据集，因此需要通过回调函数强制读取所有数据集的数据：

options: {
  plugins: {
    tooltip: {
      callbacks: {
        label: function(context) {
          const tooltipContent = [];
          // 遍历所有数据集，拼接标签和对应数据
          chart.data.datasets.forEach(dataset => {
            tooltipContent.push(`${dataset.label}: ${dataset.data[context.dataIndex]}`);
          });
          return tooltipContent;
        }
      }
    }
  }
}

3. 灵活控制备选方案（插件方式） #

如果需要动态调整显示的柱状条数量，可通过Chart.js插件在绘制前隐藏指定数据集：

plugins: [{
  beforeDraw: function(chart) {
    // 仅保留前2个数据集的显示
    chart.data.datasets.forEach((dataset, idx) => {
      if (idx >= 2) {
        dataset._meta[0].hidden = true;
      }
    });
  }
}]

注意事项 #

• 设置display: false后，图例中对应项也会隐藏；若需保留图例但不显示柱状条，可改用hidden: true，但需额外处理图例点击的切换逻辑。
• 自定义tooltip时，要确保context.dataIndex与数据集的索引一一对应，避免数据错位。

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