Chart.js 修改图例彩色方块关联数据源为第4条数据问题咨询

你提到的options.plugins.legend.label.sort配置仅用于调整多个图例项的排列顺序，无法修改图例色块绑定的数据源，所以无法满足你的需求。

你可以通过plugins.legend.label.generateLabels配置自定义图例项的生成逻辑，手动指定图例色块取第4条（索引为3，数组从0开始计数）数据集的颜色即可，修改后的完整配置如下：

const options = {
  scales: {
    x: {
      grid: {
        display: false,
        color: 'rgba(0,0,0)'
      }
    },
    y: {
      display: false,
      min: 0,
      max: 4
    },
  },
  plugins: {
     legend: {
        position: 'bottom',
        labels: {
          generateLabels: (chart) => {
            // 获取默认生成的图例项
            const defaultLabels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
            // 固定取第4条数据集的颜色，若后续柱子数量不固定可替换为 chart.data.datasets.length - 1
            const targetDataset = chart.data.datasets[3];
            // 批量修改图例色块颜色，仅单个图例的话可直接返回单条配置无需遍历
            return defaultLabels.map(label => {
              label.fillStyle = targetDataset.backgroundColor;
              // 同步修改边框色，没有边框配置可删除此行
              label.strokeStyle = targetDataset.borderColor || targetDataset.backgroundColor;
              return label;
            });
          }
        }
     }
   }
}

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