1

我有一个使用该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事件中，图表对象包含正确的数据和标签属性（数组）。然而仍然不能正常显示。

4

2 回答 2

5

当您尝试同时更新两个属性（标签和数据）时，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)};
    });
  }

有了这个，你必须完成。

于 2017-04-17T13:23:35.373 回答
0

我面临着类似的问题。我通过使用加载的标志解决了它。

像这样放置您的 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;
}

于 2020-10-27T09:52:50.173 回答