Angular中ChartJs柱状图无法加载API返回数据的问题排查

问题描述 #

在Angular应用中使用Chart.js（结合ng2-charts的baseChart指令）绘制柱状图时，无法用API返回的数据渲染图表。创建图表前打印API响应能得到预期值，但创建图表后该值变为undefined，图表无法正常显示。

现有代码片段 #

HTML代码

<div class="canvas">
  <canvas id="canvas" baseChart [data]="barChartData" [options]="barChartOptions" [plugins]="barChartPlugins"
    [legend]="barChartLegend" [type]="'bar'">
  </canvas>
</div>

TypeScript代码

this.barChartData = new Chart('canvas', {
      type:"bar",
      data:  {
        labels: ["Private", "NASHA", "NHIS", "Others"],
        datasets:[{
            data: [ 
              this.apiResponse?.Private,
              this.apiResponse?.data_1
            ],
           
            label: 'hey',
            backgroundColor: [ '#E8E2F4']
             
        }]
      },
      options:{
        scales: {
          y:{
            beginAtZero:true
          }
        }
      }
      
    })

核心原因分析 #

1. ng2-charts使用方式错误：HTML中使用了ng2-charts的baseChart指令，该组件会自动管理Chart.js实例，但你手动通过new Chart()创建实例并赋值给barChartData，两者冲突导致ng2-charts无法正确解析配置。
2. 异步数据处理不当：若new Chart()的执行早于API响应返回，this.apiResponse此时为undefined；且后续API返回数据后，已创建的Chart实例不会自动更新数据。
3. 数据匹配不完整：labels定义了4个类别，但data数组只传入2个值，会导致图表渲染异常。

解决方法 #

步骤1：修正ng2-charts配置方式 #

删除手动创建Chart实例的代码，改为定义ng2-charts所需的配置对象：

import { ChartConfiguration } from 'chart.js';

// 初始化图表配置
barChartData: ChartConfiguration['data'] = {
  labels: ["Private", "NASHA", "NHIS", "Others"],
  datasets: [{
    label: 'hey',
    backgroundColor: ['#E8E2F4'],
    data: [] // 先初始化空数据
  }]
};

barChartOptions: ChartConfiguration['options'] = {
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

barChartLegend = true;
barChartPlugins = [];

步骤2：异步更新图表数据 #

在API响应回调中更新图表数据，并触发Angular变更检测：

fetchApiData() {
  this.yourApiService.getYourData().subscribe(response => {
    this.apiResponse = response;
    // 匹配labels的数量填充数据，缺少的类别用0兜底
    this.barChartData.datasets[0].data = [
      this.apiResponse.Private || 0,
      this.apiResponse.data_1 || 0,
      this.apiResponse.NHIS || 0,
      this.apiResponse.Others || 0
    ];
    // 通过重新赋值触发变更检测
    this.barChartData = {...this.barChartData};
  });
}

步骤3：调整HTML绑定（可选优化） #

无需手动指定id，ng2-charts会自动处理Canvas元素：

<div class="canvas">
  <canvas baseChart 
    [data]="barChartData" 
    [options]="barChartOptions" 
    [plugins]="barChartPlugins"
    [legend]="barChartLegend" 
    [type]="'bar'">
  </canvas>
</div>

额外注意事项 #

• 确保已在模块中导入ChartsModule（来自ng2-charts）和Chart（来自chart.js）
• 若使用Angular的OnPush变更检测策略，需注入ChangeDetectorRef并调用detectChanges()手动触发更新

内容的提问来源于stack exchange，提问作者Tosin Ayoola