Chart.js柱状图如何配置多个顶部标签并匹配对应颜色

开发柱状图功能时，需要在图表顶部展示2个标签并匹配对应标识颜色，实际编码时将label字段设为标签数组、同时配置两个背景色，运行后两个数据项只显示同一种颜色，未达到预期效果。

异常代码 #

this.chartData = {
  labels: [
    ...labelList
  ],
  datasets: [
    {
      label: ['Digital Revenue', 'Standard Revenue'], // 期望两个标签都展示在顶部
      data: [
        ...dataList
      ],
      backgroundColor: [
        'rgb(255, 99, 132)',  // 配置了两个颜色，但数据都显示为单色
        'rgb(54, 162, 235)',
      ],
      hoverOffset: 4,
    },
  ],
};
this.chartConfig = {
  type: CHART_CONFIG.BAR_CHART,
  data: this.chartData,
  options: {},
};

this.myChart = new Chart(
  document.getElementById('myChart') as HTMLCanvasElement,
  this.chartConfig
);

Chart.js的datasets配置规则为：数组内每个独立对象对应一个单独的图例标签、一组同标识的数据系列，不支持在单个dataset对象内给label传数组生成多个标签。
当前写法中，框架会把传入的标签数组整体识别为单个标签的文本内容，配置的双色数组只会给同个数据系列下不同索引的柱子交替上色，既不会生成两个独立的顶部标签，也无法给两类数据匹配固定的标识色。

将两个标签拆分为两个独立的dataset配置项，每个项单独设置标签文本、对应数据集、专属背景色。

修正后代码 #

this.chartData = {
  labels: [
    ...labelList
  ],
  datasets: [
    {
      label: 'Digital Revenue',
      data: [
        // 填入Digital Revenue维度对应的数值序列，顺序与labels一一对应
        ...digitalRevenueDataList
      ],
      backgroundColor: 'rgb(255, 99, 132)',
      hoverOffset: 4,
    },
    {
      label: 'Standard Revenue',
      data: [
        // 填入Standard Revenue维度对应的数值序列，顺序与labels一一对应
        ...standardRevenueDataList
      ],
      backgroundColor: 'rgb(54, 162, 235)',
      hoverOffset: 4,
    }
  ],
};
this.chartConfig = {
  type: CHART_CONFIG.BAR_CHART,
  data: this.chartData,
  options: {},
};

this.myChart = new Chart(
  document.getElementById('myChart') as HTMLCanvasElement,
  this.chartConfig
);

• 修正后图表顶部会自动生成两个带对应颜色标识的标签，同一x轴分类下两个系列的柱子会并列展示，即标准分组柱状图效果
• 若之前将两类营收数据统一存在dataList数组中，需要先按业务维度拆分出两个独立的数值数组，分别传入两个dataset的data字段，保证数据顺序与labels的分类顺序对齐即可。

内容的提问来源于stack exchange，提问作者Package.JSON