Angular 4中ng2-charts图表未等待ngOnInit加载数据渲染问题求助

看起来你遇到的问题核心是异步数据加载完成前图表已提前初始化，再加上柱状图的数据格式不符合ng2-charts的要求，才导致了初始渲染异常、柱状图单一颜色的情况。下面一步步帮你解决：

1. 修正柱状图的数据格式 #

你当前的myChartData是单一数值数组，但ng2-charts的柱状图要求数据必须是包含data和label的对象数组（和你定义的chartData结构一致）——这就是柱状图只显示单一颜色的原因：它把整个数组当成了一个数据集，而非独立的系列。

修改ngOnInit里的数据映射逻辑：

this.skillsetService.getSkillsetsForStatusID(this.skillID).subscribe((res) => {
  let skillsets : Array<any> = res.data;
  // 改成符合bar图表要求的结构
  this.myChartData = [
    {
      data: skillsets.map(obj => obj.count).filter(val => val !== undefined),
      label: '技能统计' // 自定义你的系列名称
    }
  ];
  this.chartLabels = skillsets.map(obj => obj.name).filter(val => val !== undefined);
  console.log("this.chartData == %s", JSON.stringify(this.myChartData, null, '\t'))
  console.log("this.chartLabels == %s", JSON.stringify(this.chartLabels, null, '\t'))
  
  // 手动触发变更检测，通知图表更新数据
  this.cdRef.detectChanges();
});

别忘了在组件中注入ChangeDetectorRef：

import { Component, Input, OnInit, NgZone, ChangeDetectorRef } from '@angular/core';

// ...

constructor(
  private skillsetService : SkillsetService, 
  private route : ActivatedRoute, 
  private zone : NgZone,
  private cdRef: ChangeDetectorRef // 新增注入
) {
  // ... 原有构造函数代码
}

2. 控制图表渲染时机（彻底避免空数据渲染） #

为了从根源解决“图表提前渲染”的问题，可以给canvas元素加上*ngIf，只有当数据和标签都就绪时才初始化图表：

<canvas 
  *ngIf="myChartData.length > 0 && chartLabels.length > 0"
  baseChart 
  [chartType]="chartType" 
  [data]="myChartData" 
  [labels]="chartLabels" 
  [options]="chartOptions" 
  [legend]="true" 
  (chartClick)="onChartClick($event)">
</canvas>

这样图表只会在异步请求完成、数据完全加载后才开始渲染，不会再出现“部分数据提前读取”的情况。

3. 优化chartOptions的更新逻辑 #

你当前直接修改chartOptions的内部属性，Angular的变更检测可能无法及时捕捉到变化。建议重新赋值整个对象，确保变更能被感知：

changeChartType(type : string) {
  this.chartType = type;
  // 重新创建chartOptions对象，而非修改原有属性
  this.chartOptions = {
    type: type,
    legend: {}
  };

  if (type === ChartComponent.chartTypes.PIE || type === ChartComponent.chartTypes.POLAR_AREA) {
    this.chartOptions.legend = {
      display: true,
      position: 'right'
    };
  } else {
    this.chartOptions.legend = { display: false };
    this.chartOptions.scales = new ChartScale();
  }

  return type;
}

为什么切换图表类型后能正常显示？ #

因为切换类型时会触发ng2-charts的重新渲染逻辑，这时候异步请求已经完成，数据已经就绪，所以图表能正确加载。但初始渲染时数据还在加载中，就出现了异常。

按上面的步骤修改后，应该就能解决初始渲染异常、柱状图单一颜色的问题了。

内容的提问来源于stack exchange，提问作者Mike Warren