Chart.js Doughnut Chart双数据集图例显示异常求助

问题根源 #

你的代码里全局labels数组有7个标签，但两个数据集的data长度分别是3和4，Chart.js环形图默认按全局标签生成图例，导致：

• 第一个数据集的3个数据能匹配前3个标签，图例颜色正常
• 第二个数据集的4个数据对应后4个标签，但Chart.js无法自动关联第二个数据集的颜色，反而复用第一个数据集的首个颜色，且图例无法对应到环形图的正确分段

解决方案：自定义图例生成器 #

通过自定义generateLabels方法，手动遍历两个数据集的所有数据项，为每个分段生成正确的图例条目，关联对应的标签和颜色。

修改后的完整代码：

data = {
    // 移除全局labels，给每个数据集单独配置专属标签
    datasets: [
      {
        labels: ['Red', 'Blue', 'Yellow'],
        data: [300, 50, 100],
        borderWidth: 1,
        backgroundColor: ['#CB4335', '#1F618D', '#F1C40F']
      },
      {
        labels: ['Orange', 'Dings', 'Bums', 'Yada'],
        data: [345.56, 56.47, 987.12, 78.01],
        borderWidth: 1,
        backgroundColor: ['#ff5604', '#ff0000', '#00ff00', '#0000ff']
      }
    ]
  };

chartConfig = {
    type: 'doughnut',
    data: this.data,
    options: {
      responsive: true,
      plugins: {
        legend: {
          onClick: this.handleClick,
          onHover: this.handleHover,
          onLeave: this.handleLeave,
          labels: {
            // 自定义图例生成逻辑
            generateLabels: (chart) => {
              const legendItems = [];
              // 遍历所有数据集
              chart.data.datasets.forEach((dataset, datasetIndex) => {
                // 遍历当前数据集的每个数据项
                dataset.data.forEach((_, index) => {
                  legendItems.push({
                    text: dataset.labels[index],
                    fillStyle: dataset.backgroundColor[index],
                    strokeStyle: dataset.backgroundColor[index],
                    lineWidth: dataset.borderWidth,
                    // 绑定数据集和索引，确保交互事件正常工作
                    datasetIndex,
                    index
                  });
                });
              });
              return legendItems;
            }
          }
        }
      }
    }
  };

关键调整说明 #

1. 移除全局labels，数据集单独设labels：让每个数据项都有明确对应的标签，避免全局标签和数据集数据长度不匹配的问题
2. 自定义generateLabels：遍历所有数据集的所有数据项，手动构建图例条目，确保每个条目都关联正确的颜色、标签，并且保留交互所需的datasetIndex和index
3. 保留原有交互事件：因为自定义图例条目包含了必要的索引信息，onClick、onHover等事件可以正常控制对应分段的显示/隐藏、高亮等操作

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