我选择的颜色未在堆叠式条形图中使用

Question

我有以下chart.js堆积条形图。 我正在尝试为每个数据集使用一种颜色。 我的执行方式显然是错误的，因为最终的图表使用的是默认颜色。

this.realTimeUsage = new BarChart();
this.realTimeUsage.Type = 'bar';
this.realTimeUsage.Options = {

  showAllTooltips: false,
  responsive: true,
  legend: {
    position: 'right',
  },
  tooltips: {
    // remove the square color from the tooltip
    displayColors: false,
    callbacks: {
      // Only display the value in the tooltip
      label: (tooltipItem, data) => {
        const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        return String(value);
      }
    }
  },
  scales: {
    xAxes: [{
      //stacked: true,
      stacked: true,
      ticks: {
        beginAtZero: true,
        maxRotation: 0,
        minRotation: 0
      }
    }],
    yAxes: [{
      stacked: true,
    }]
  },

};
this.realTimeUsage.DataSets = [
  {
    label: String(payload.notConnected) + ' : ' + (payload.notConnected > 1 ? LocalizationMessages.getMessage(this.locale, "USAGE_NOTCONNECTED_PLURAL") : LocalizationMessages.getMessage(this.locale, "USAGE_NOTCONNECTED_SINGULAR")),
    type: "bar",
    stack: "actives",
    data: [
      payload.notConnected
    ],
    backgroundColor: 
      'rgba(255, 165, 0, 1)',
  },
  {
    label: String(payload.connected) + ' : ' + (payload.connected > 1 ? LocalizationMessages.getMessage(this.locale, "USAGE_CONNECTED_PLURAL") : LocalizationMessages.getMessage(this.locale, "USAGE_CONNECTED_SINGULAR")),
    type: "bar",
    stack: "actives",
    data: [
      payload.connected
    ],
    backgroundColor:
      'rgba(171, 219, 0, 1)',
  },
  {
    label: String(payload.declared) + ' : ' + (payload.declared > 1 ? LocalizationMessages.getMessage(this.locale, "USAGE_DECLARED_PLURAL") : LocalizationMessages.getMessage(this.locale, "USAGE_DECLARED_SINGULAR")),
    type: "bar",
    stack: "declared",
    data: [
      payload.declared
    ],
    backgroundColor:
      'rgba(253, 216, 53, 1)',
  },
];

这些是最终图形的颜色：

我应该改用黄色，绿色和橙色。 任何帮助表示赞赏。

Answer 1

我找到了解决方案。 我必须指定数据集之外的颜色，如下所示：

this.realTimeUsage.Colors = [
  {
    backgroundColor: ["rgba(255, 165, 0, 1)"]
  },
  {
    backgroundColor: ["rgba(171, 219, 0, 1)"]
  },
  {
    backgroundColor: ["rgba(253, 216, 53, 1)"]
  }
];