Ng2-Charts 数据更改时图表的颜色意外变化

Question

在我的项目中，我使用ng2-charts。一切正常，图表按预期显示（数据、标签、图表颜色），但是当数据更改时，图表颜色默认变为灰色。有人可以帮助纠正图表颜色的问题吗？

这是我的代码：

import { ChartDataSets } from 'chart.js';
import { Color, Label } from 'ng2-charts';
...
export class JuridicalBidPrimaryComponent extends BidComponent {
  lineChartData: ChartDataSets[];
  lineChartLabels: Label[];

  lineChartLegend = true;
  lineChartType = 'line';
  lineChartColors: Color[] = [
    {
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)'
    },
    {
      backgroundColor: 'rgba(77,83,96,0.2)',
      borderColor: 'rgba(77,83,96,1)'
    }];
  options: any = {
    legend: { position: 'bottom' }
  }

  constructor(
     ...//inject services
  ) {
    super();

    this.initData();
  };

  initData(): void {
    this.lineChartData = [];
    this.lineChartLabels = [];

    if (this.cabinetId)
      this.getData(this.year);
  }

  getData(year: number) {
    this.isLoading = true;

    var limitPromise = this.juridicalLimitService.getPrimary(this.cabinetId, year).catch(error => {
      this.notificationService.error(error);
      return Observable.throw(error);
    });

    var analyticsPromise = this.juridicalAnalyticsService.getUsedEnergy(this.cabinetId, year).catch(error => {
      this.notificationService.error(error);
      return Observable.throw(error);
    });

    forkJoin([limitPromise, analyticsPromise]).subscribe(data => {
      this.limits = data[0];

      this.lineChartLabels = data[1].map(e => e.Period);
      this.lineChartData.push(
        {
          data: data[1].map(e => e.Limit),
          label: 'Bid'
        },
        {
          data: data[1].map(e => e.Used),
          label: 'Used'
        }
      );

      this.isLoading = false;
    }, error => {
      this.isLoading = false;
    });
  }
}

export abstract class BidComponent {
  cabinetId: number;
  isLoading: boolean = false;

  @Input("periods") periods: BaseDictionary[];
  @Input("cabinetId") set CabinetId(cabinetId: number) {
    this.cabinetId = cabinetId;
    this.initData();
  }

  abstract initData(): void;
} 

你可以看到这个组件是部分的，我使用 setter 来监听 cabinetId 的变化。

这里是html部分：

...
<canvas baseChart width="400" height="150"
                [options]="options"
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="lineChartLegend"
                [chartType]="lineChartType"
                [colors]="lineChartColors"></canvas>
...

我将这个组件用作：

<app-juridical-bid-primary [cabinetId]="cabinetId"></app-juridical-bid-primary>

我找到了类似的问题similar question，但是很遗憾，不明白答案

Answer 1

经过几个小时的代码测试，我找到了答案。需要更正问题中的代码：

...
import * as _ from 'lodash'; //-- useful library

export class JuridicalBidPrimaryComponent extends BidComponent {
    lineChartData: ChartDataSets[] = [];
    lineChartLabels: Label[] = [];
    ...
    initData(): void {
       /*this.lineChartData = [];
       this.lineChartLabels = [];*/ //-- this lines is needed to remove

       if (this.cabinetId)
         this.getData(this.year);
     }
     getData(year: number) {
       ...
       forkJoin([limitPromise, analyticsPromise]).subscribe(data => {
          this.limits = data[0];

          this.lineChartLabels.length = 0;
          this.lineChartLabels.push(...data[1].map(e => e.Period));

          if (_.isEmpty(this.lineChartData)) {  
            //-- If data array is empty, then we add data series
            this.lineChartData.push(
              {
                data: data[1].map(e => e.Limit),
                label: 'Замовлені величини'
              },
              {
                data: data[1].map(e => e.Used),
                label: 'Використано'
              }
            );
          } else { 
            //-- If we have already added data series then we only change data in data series
            this.lineChartData[0].data = data[1].map(e => e.Limit);
            this.lineChartData[1].data = data[1].map(e => e.Used);
          }
          this.isLoading = false;
        }, error => {
          this.isLoading = false;
        });
     }
}

据我了解ng2-charts，如果我们清理数据集 (lineChartData) 并添加新数据，那么库会将其理解为创建新系列并且不使用主要设置。所以我们必须使用以前创建的系列。

我希望它对遇到我这样的问题的人有用。