为chart.js中的每个数据定义特定颜色

Question

您好我有以下问题。有没有办法为每个数据设置一种颜色......这是代码。

带图表的HTML

    <canvas 
     baseChart height="100"
            [datasets]="lineChartData"
            [options]="lineChartOptions"
            [colors]="lineChartColors"
            [legend]="lineChartLegend"
            [chartType]="lineChartType"
      ></canvas>

</div>
<button 
type="button"
class="btn btn-sm btn-secondary"
data-toggle="tooltip" data-placement="top" title=""
(click)="ventanaSincro()">Actualizar Rx1</button> <br>
</div>

初始化组件中的图表

public lineChartData:any[] =  [
    { label: 'IG',data : [{x: this.intGua ,y: 60,}, {x: this.intGua,y: 0}], borderDash : [ 60 , 5]},


];
public chart_visible: boolean = true

public  lineChartOptions: any = {
    responsive: true,
    animation: false,
    scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
  };
public lineChartColors: Array<any> = [
    { // grey
      backgroundColor: 'rgba(33,150,243,0.2)',
      borderColor: 'rgba(33,150,243,1)',
      pointBackgroundColor: 'rgba(33,150,243,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(33,150,243,0.8)'
    },
    { // dark grey
      backgroundColor: 'rgba(76,175,80,0.2)',
      borderColor: 'rgba(76,175,80,1)',
      pointBackgroundColor: 'rgba(76,175,80,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(76,175,80,1)'
    },
    { // grey
      backgroundColor: 'rgba(244,67,54,0.2)',
      borderColor: 'rgba(244,67,54,1)',
      pointBackgroundColor: 'rgba(244,67,54,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(244,67,54,0.8)'
    },
    { // grey
      backgroundColor: 'rgba(103,58,183,0.2)',
      borderColor: 'rgba(103,58,183,1)',
      pointBackgroundColor: 'rgba(103,58,183,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(103,58,183,0.8)'
    },
    { // grey
      backgroundColor: 'rgba(255,152,0,0.2)',
      borderColor: 'rgba(255,152,0,1)',
      pointBackgroundColor: 'rgba(255,152,0,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(255,152,0,0.8)'
    },
    { // grey
      backgroundColor: 'rgba(96,125,139,0.2)',
      borderColor: 'rgba(96,125,139,1)',
      pointBackgroundColor: 'rgba(96,125,139,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(96,125,139,0.8)'
    }    
  ];

  public lineChartLegend: boolean = true;
  public lineChartType: string = 'scatter';
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

更新图表数据的方法

     ventanaSincro() {
             this.intGua =  this._moduladorService.obtenerIntGua();
             this.Deltas = this._markerService.getDeltasRx1();
             var DeltaPrueba : any = [ this.Deltas[0], this.Deltas[1], this.Deltas[2], this.Deltas[3]];
             var DeltaCR : any = [ this.Deltas[4], this.Deltas[5], this.Deltas[6], this.Deltas[7]];
             var DistanciaRx1 = this._markerService.getDistanacias();
            console.log("aca",DeltaPrueba);




                let temp = [{  label: 'Tx1',data : [{x: this.Deltas[0],y: DistanciaRx1[0],}, {x: this.Deltas[0],y: 0}]},
                { label: 'Tx2',data : [{x: this.Deltas[1],y: DistanciaRx1[1]}, {x: this.Deltas[1],y: 0}]},
                { label: 'Tx3',data : [{x: this.Deltas[2],y: DistanciaRx1[2]}, {x: this.Deltas[2],y: 0}]},
                { label: 'Tx4',data : [{x: this.Deltas[3],y: DistanciaRx1[3]}, {x: this.Deltas[3],y: 0}]},
                { label: 'Tx1CR',data : [{x: this.Deltas[4],y: DistanciaRx1[4]}, {x: this.Deltas[4],y: 0}]},
                { label: 'Tx2CR',data : [{x: this.Deltas[5],y: DistanciaRx1[5]}, {x: this.Deltas[5],y: 0}]},
                { label: 'Tx3CR',data : [{x: this.Deltas[6],y: DistanciaRx1[6]}, {x: this.Deltas[6],y: 0}]},
                { label: 'Tx4CR',data : [{x: this.Deltas[7],y: DistanciaRx1[7]}, {x: this.Deltas[7],y: 0}]},
                ]


            this.chart_visible = false
            let lineChartData:any[] =  Object.assign([],[
                 { label: 'IG',data : [{x: this.intGua ,y: 60,}, {x: this.intGua,y: 0}], borderDash : [ 60 , 5]},


                ]);
            console.log('testing ---')

            for (let i=0; i<=3; i++){
                let val = this['tra'+i];
                console.log(val)
                if (val){
                    lineChartData.push(temp[i]);
                }
            }
            if(this.obst && this.tra0){
                lineChartData.push(temp[4]);
            }    
            if(this.obst && this.tra1){
                lineChartData.push(temp[5]);
            }    
            if(this.obst && this.tra2){
                lineChartData.push(temp[6]);
            }    
            if(this.obst && this.tra3){
                lineChartData.push(temp[7]);
            }    
            this.lineChartData = Object.assign([],lineChartData)
            this.lineChartOptions = Object.assign({}, this.lineChartOptions)
            console.log(lineChartData)
            setTimeout(()=>{
                this.chart_visible = true
            })




  }

我需要标签IG的数据示例：蓝色。 对于标签Tx1的数据：红色。 对于标签Tx2的数据：greeen。

依此类推，但事实是他们需要为每个标签及其数据只有一个常量颜色。

谢谢！