如何在Chart.js中配置堆叠柱状图的多色图例？

完全可以做到！Chart.js默认的图例是按整个数据集（dataset）生成的，但通过自定义图例的生成逻辑，我们能轻松实现每个数据点对应颜色的多色图例效果。针对你现有的代码，我整理了一套修改方案：

const stacked_bar_data = {
  labels: ['Axi-cel', 'Tisa-cel'],
  datasets: [
    {
      label: 'Bridging therapy 2',
      data: [25, 25],
      backgroundColor: ['rgb(224, 178, 40)', 'rgb(78, 235, 255)']
    },
    {
      label: 'Bridging therapy 1',
      data: [25, 25],
      backgroundColor: ['rgb(204, 158, 20)', 'rgb(58, 215, 240)']
    }
  ]
}

const stacked_bar_config = {
  type: 'bar',
  data: stacked_bar_data,
  options: {
    responsive: true,
    scales: {
      x: {
        stacked: true,
        grid: { display: false }
      },
      y: {
        stacked: true,
        grid: { display: false },
        title: { display: true, text: 'Use, %' }
      }
    },
    plugins: {
      legend: {
        // 自定义图例项生成逻辑
        labels: {
          generateLabels: function(chart) {
            const legendItems = [];
            // 遍历每个数据集和对应的数据点
            chart.data.datasets.forEach((dataset, datasetIdx) => {
              dataset.data.forEach((_, dataIdx) => {
                legendItems.push({
                  text: `${dataset.label} - ${chart.data.labels[dataIdx]}`,
                  fillStyle: dataset.backgroundColor[dataIdx],
                  strokeStyle: dataset.backgroundColor[dataIdx],
                  datasetIndex: datasetIdx,
                  dataIndex: dataIdx, // 记录数据点索引用于后续控制
                  hidden: !chart.getDataVisibility(datasetIdx, dataIdx)
                });
              });
            });
            return legendItems;
          }
        },
        // 自定义图例点击事件，控制单个数据点的显示/隐藏
        onClick: function(event, legendItem) {
          const chart = this.chart;
          const { datasetIndex, dataIndex } = legendItem;
          // 切换对应数据点的可见状态
          chart.setDataVisibility(datasetIndex, dataIndex, !chart.getDataVisibility(datasetIndex, dataIndex));
          chart.update();
        }
      }
    }
  }
}

var stacked_bar = new Chart(document.getElementById('stacked-bar').getContext('2d'), stacked_bar_config)

关键修改说明 #

• 自定义图例生成器：通过plugins.legend.labels.generateLabels遍历所有数据集的每个数据点，生成包含「数据集名称 + X轴标签」的组合文本，以及对应数据点的颜色，让每个颜色都能在图例中单独显示。
• 自定义图例点击逻辑：默认点击图例会控制整个数据集的显示/隐藏，这里通过chart.setDataVisibility方法，实现点击单个图例项仅控制对应数据点的柱子，保证交互逻辑符合预期。
• 保留原有堆叠配置：你的基础堆叠柱状图配置完全保留，只新增了图例相关的自定义插件逻辑，不会影响原有图表的堆叠效果。

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