【问题标题】：ng2-charts won't show updated labels, only datang2-charts 不会显示更新的标签，只有数据
【发布时间】：2017-09-03 19:53:33
【问题描述】：

我有一个使用 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(); 来尝试强制刷新，但都没有帮助。

更新：

如 cmets 中所述，在 ngAfterViewInit 事件中，图表对象包含正确的数据和标签属性（数组）。然而仍然不能正常显示。

【问题讨论】：

您是否调试过您生成的图表对象？当角度命中 ngAfterViewInit() 时调试并检查图表对象的属性，这将清楚地指示对象的属性是否设置正确。
@nugu 图表对象被记录在 ngAfterViewInit 并且具有属性 - labels: Array(4) 0:"station1",1:"station2",2:"station4",3:"station7" 以及正确的数据属性？仍然看不出问题出在哪里？
我个人没有使用过 ng2-charts 但我建议您尝试在他们的示例中运行图表属性 (plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview) 您可以设置图表属性并查看是否收到相同的结果。确保您使用的是最新版本

标签： angular typescript ng2-charts

【解决方案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)};
    });
  }

有了这个，你必须完成。

【讨论】：

附带说明，这现在使我的单元测试失败，知道如何让我的期望行检查setTimeout() 行已正确执行吗？
我花了 2 天时间解决这个问题。我尝试了关于 github 问题的所有内容。非常感谢。

【解决方案2】：

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

把你的 HTML 代码写成这样 ->

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

而你的 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;
}

【讨论】：