Angular中Highcharts使用API动态数据时图表不显示的问题

问题原因 #

组件初始化时chartOptions已完成创建，此时gymgoerweight是空数组。接口返回数据后，仅修改gymgoerweight的值不会触发chartOptions的更新——因为Angular的变更检测依赖对象/数组的引用变化，chartOptions.series[0].data仍然指向最初的空数组引用，图表无法感知到数据已更新。

解决方案 #

方案1：接口回调中更新chartOptions触发变更检测 #

在接口返回数据后，直接更新chartOptions的series数据，或通过重新赋值chartOptions的方式触发引用变化：

修改getgymgoer方法：

getgymgoer(){
  this.authService.getCurrentUser(this.user.id).subscribe((response:any)=>{
    this.gymgoerweight = response.weight;
    
    // 方式：重新赋值chartOptions，强制触发变更检测
    this.chartOptions = {
      ...this.chartOptions,
      series: [
        {
          type: 'line',
          data: this.gymgoerweight
        }
      ]
    };
    
    console.log("------goer weight from streak-------");
    console.log(this.gymgoerweight);
  })
}

方案2：通过Highcharts实例动态更新数据 #

借助组件模板的chartInstance获取图表实例，调用Highcharts原生API更新数据：

1. 在组件类中添加变量存储图表实例：

chartInstance: Highcharts.Chart | undefined;

2. 在weight-chart.component.html模板中绑定实例：

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  (chartInstance)="chartInstance = $event"
></highcharts-chart>

3. 在接口回调中调用setData方法：

getgymgoer(){
  this.authService.getCurrentUser(this.user.id).subscribe((response:any)=>{
    this.gymgoerweight = response.weight;
    if (this.chartInstance) {
      this.chartInstance.series[0].setData(this.gymgoerweight);
    }
    console.log("------goer weight from streak-------");
    console.log(this.gymgoerweight);
  })
}

额外注意事项 #

• 确认接口返回的response.weight是纯数值数组（如[65,67,66,68]），如果是对象数组，需要先转换格式（例如response.weight.map(item => item.weightValue)）。
• 若使用方案1时变更检测未触发，可注入ChangeDetectorRef手动触发：

import { ChangeDetectorRef } from '@angular/core';

constructor(private authService:AuthService, private cdr: ChangeDetectorRef) { }

// 在更新chartOptions后调用
this.cdr.detectChanges();

内容的提问来源于stack exchange，提问作者Nitin Saini