Javascript 更改数据集时不显示Chartjs自定义颜色

我试图创建两个不同的折线图，显示两个不同的数据集。这样，我想为每个图表显示2种不同的颜色

<div style="display: block" *ngIf='signalRService.data'>
    <canvas baseChart id="data1"
            [datasets]="signalRService.data1"
            [labels]="chartLabels"
            [options]="chartOptions"
            [legend]="chartLegend"
            [chartType]="chartType"
            [colors]="colors"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <div style="display: block" *ngIf='signalRService.data'>
    <canvas baseChart id="data2"
            [datasets]="signalRService.data2"
            [labels]="chartLabels"
            [options]="chartOptions"
            [legend]="chartLegend"
            [chartType]="chartType"
            [colors]="colors"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

---

我真的弄明白了。如果我将html中对颜色数组的引用替换为信息本身，如下所示

[colors]=" 
            [{
              backgroundColor: 'rgba(0,100,0,0.2)',
              borderColor: 'rgba(0,0,100,1)',
              pointBackgroundColor: 'rgba(148,159,177,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(148,159,177,0.8)',
              fill: false
            }]"

我还将data1和data2变量更改为原始超级数据集的切片（使用Arrays.slice），它可以工作

[colors]=" 
            [{
              backgroundColor: 'rgba(0,100,0,0.2)',
              borderColor: 'rgba(0,0,100,1)',
              pointBackgroundColor: 'rgba(148,159,177,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(148,159,177,0.8)',
              fill: false
            }]"