图表标签未在ng2图表中动态更新

时间:2018-09-04 21:09:15

标签: angular angular6 ng2-charts

我正在使用Angular 6ng2-charts

在我的component.html文件中

<canvas baseChart id="barChartSimpleGradientsNumbers"
      [datasets]="lineChartGradientsNumbersData"
      [labels]="lineChartGradientsNumbersLabels"
      [colors]="lineChartGradientsNumbersColors"
      [options]="lineChartGradientsNumbersOptions"
      [chartType]="lineChartGradientsNumbersType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>

component.ts文件中

export class DashboardComponent implements OnInit {

  public lineChartGradientsNumbersType;
  public lineChartGradientsNumbersData: Array<any>;
  public lineChartGradientsNumbersOptions: any;
  public lineChartGradientsNumbersLabels: Array<any>;
  public lineChartGradientsNumbersColors: Array<any>;

  constructor(
    private graphDataService: GraphDataService
  ) { }

  ngOnInit() {

    this._initializeGraphDemo();

    this.graphTopTen(this.topTenDataType);
  }

  _initializeBarGraph() {
    ...

    this.lineChartGradientsNumbersData = [
      {
        label: '',
        pointBorderWidth: 2,
        pointHoverRadius: 4,
        pointHoverBorderWidth: 1,
        pointRadius: 4,
        fill: true,
        borderWidth: 1,
        data: [80, 99, 86, 96, 123, 85, 100, 75, 88, 90]
      }
    ];

    this.lineChartGradientsNumbersLabels = [
      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'
    ];

    this.lineChartGradientsNumbersType = 'bar';
  }

  /**
   * Get top ten
   * @param filter_type
   */
  graphTopTen(filter_type: string) {
    this.topTenDataType = filter_type;
    this.graphDataService.topTen(filter_type).subscribe(
      res => {
        const data_value = [];
        const data_label = [];
        res.forEach(e => {
          data_label.push(e.contact);
          data_value.push(e.value);
        });

        // Set graph data: This is working
        this.lineChartGradientsNumbersData = [
          {
            label: 'Amount' + filter_type,
            data: data_value
          }
        ];

        // This is not working
        this.lineChartGradientsNumbersLabels.splice(0);
        this.lineChartGradientsNumbersLabels = data_label;
      }
    );
  }

}

graphTopTen()函数中,this.lineChartGradientsNumbersData更新良好,但this.lineChartGradientsNumbersLabels = data_label;未更新图形的标签,并且仍然与January, February...相同。

0 个答案:

没有答案