如何为Chart.js分组柱状图的各数据集标签设置不同字体颜色？

嘿，这个需求很好实现！Chart.js提供了灵活的图例配置项，我们可以通过重写标签生成函数来给每个数据集的标签单独设置字体颜色。下面是两种可行的方案：

方案一：在数据集里自定义颜色属性（更灵活） #

这种方式适合后续可能新增更多数据集的场景，直接在每个dataset里定义好标签颜色，然后统一读取：

new Chart(document.getElementById("bar-chart-grouped"), {
  type: 'bar',
  data: {
    labels: ["1900", "1950", "1999", "2050"],
    datasets: [
      {
        label: "Africa",
        backgroundColor: "#3e95cd",
        data: [133,221,783,2478],
        // 自定义标签颜色属性
        labelColor: "#ff0000"
      },
      {
        label: "Europe",
        backgroundColor: "#8e5ea2",
        data: [408,547,675,734],
        labelColor: "#0000ff"
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Population growth (millions)'
    },
    legend: {
      labels: {
        // 重写标签生成逻辑
        generateLabels: function(chart) {
          // 先获取默认的标签配置
          const defaultLabels = Chart.defaults.global.legend.labels.generateLabels(chart);
          // 遍历替换颜色
          return defaultLabels.map((labelItem, index) => ({
            ...labelItem,
            // 用dataset里定义的颜色，默认黑色兜底
            fillStyle: chart.data.datasets[index].labelColor || '#000000'
          }));
        }
      }
    }
  }
});

方案二：直接根据标签名称判断（更直接） #

如果你的数据集固定，也可以直接在生成函数里根据标签名称指定颜色：

new Chart(document.getElementById("bar-chart-grouped"), {
  type: 'bar',
  data: {
    labels: ["1900", "1950", "1999", "2050"],
    datasets: [
      {
        label: "Africa",
        backgroundColor: "#3e95cd",
        data: [133,221,783,2478]
      },
      {
        label: "Europe",
        backgroundColor: "#8e5ea2",
        data: [408,547,675,734]
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'Population growth (millions)'
    },
    legend: {
      labels: {
        generateLabels: function(chart) {
          return chart.data.datasets.map(dataset => {
            // 根据标签名判断颜色
            const labelColor = dataset.label === 'Africa' ? '#ff0000' : '#0000ff';
            return {
              text: dataset.label,
              fillStyle: labelColor,
              strokeStyle: labelColor,
              lineWidth: 1
            };
          });
        }
      }
    }
  }
});

两种方案都能实现你要的效果，运行后就能看到“Africa”标签是红色，“Europe”是蓝色啦。

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