ng2-charts 不会显示更新的标签，只有数据

Question

我有一个使用 ng2-charts 包的 angular (2) 应用程序。我的一个组件显示一个饼图，其中包含它从服务器查询的数据。组件如下图：

export class PieChartComponent implements OnInit {
  data: Array<number> = [];
  labels: Array<string> = ['', '', '', ''];
  private line: string;
  private department: string;

  constructor(public dataService: LineService, private route: ActivatedRoute) {
    this.route.params.forEach((params: Params) => {
      this.department = params['dep'];
      this.line = params['id'];
    });
  }

  ngOnInit() {
    this.dataService.getLineTAL(this.department, this.line).forEach(result => {
      this.data = result.map(val => val.val);
      this.labels = result.map(val => val.tag);
    });
  }    
}

和 html:

<div style="display: block">
  <canvas baseChart [data]="data" [labels]="labels" [chartType]="'pie'" (chartClick)="chartClicked($event)" width="1" height="1"></canvas>
</div>

当运行调试器时，我可以验证 this.labels 已更新为正确包含一个字符串数组，该数组应该是图表数据标签的值。然而，图表呈现了正确的数据，但没有值，所以将鼠标悬停在上面我得到：

我也不知道为什么默认颜色都变成了灰色？我有这个逻辑并且 UI 工作正常，直到我将它分解成它自己的组件。

如其他一些问题所述，我还尝试在服务调用之前添加 this.chart.ngOnChanges({});，其中图表为 @ViewChild(BaseChartDirective) chart: BaseChartDirective;。我还在结果映射的末尾尝试了 this.labels = this.labels.slice(); 以尝试强制刷新，但都没有帮助。

更新：

如评论中所述，在 ngAfterViewInit 事件中，图表对象包含正确的数据和标签属性（数组）。但仍然无法正常显示。

Answer 1

当您尝试同时更新两个属性（标签和数据）时，ng2-chart 的问题就出现了，简单的解决方案是直接设置数据，并在 0 超时内设置标签：

ngOnInit() {
    this.dataService.getLineTAL(this.department, this.line).forEach(result => {
      this.data = result.map(val => val.val);
      setTimeout( () => {this.labels = result.map(val => val.tag)};
    });
  }

有了这个，你必须完成。

Answer 2

我遇到了类似的问题。我通过使用 loaded 标志解决了它。

像这样输入您的 HTML 代码 ->

<canvas *ngIf="loaded" baseChart [data]="data" [labels]="labels" [chartType]="'pie'" (chartClick)="chartClicked($event)" width="1" height="1"></canvas>

您的 component.ts 文件为 ->

export class PieChartComponent implements OnInit {
  data: Array < number > = [];
  labels: Array < string > = ['', '', '', ''];
  private line: string;
  private department: string;
  loaded = false;

  constructor(public dataService: LineService, private route: ActivatedRoute) {
    this.route.params.forEach((params: Params) => {
      this.department = params['dep'];
      this.line = params['id'];
    });
  }

  ngOnInit() {
    this.dataService.getLineTAL(this.department, this.line).forEach(result => {
      this.data = result.map(val => val.val);
      this.labels = result.map(val => val.tag);
    });
  }
  this.loaded = true;
}

ng2-charts 不会显示更新的标签，只有数据

ng2-charts won't show updated labels, only data

typescript

ng2-charts

angular

更新：