Angular Highcharts geomap无法通过this.letsTry加载API动态数据

你遇到的问题有两个核心原因：

1. Angular Highcharts 封装组件默认采用不可变数据检测逻辑，你初始化chartOptions时series.data已经绑定了letsTry的初始空数组引用，后续直接修改letsTry的引用或者值，不会触发组件的更新重绘。
2. 代码中存在字段匹配错误，你GraphQL查询请求的是Count字段，但API实际返回的数值字段是CodeCount，会导致取值为undefined。

修复步骤 #

1. 新增更新触发标记，修正接口数据处理逻辑 #

首先在组件类中新增updateFlag变量用来触发组件重绘，同时修正字段取值、更新逻辑：

export class DataLocalComponent implements OnInit {
  // 新增highcharts更新触发标记
  updateFlag = false;
  skipCountryVal: boolean = false;
  letsTry = [];
  // 其余原有构造函数、变量定义保留...

  // data localization api
  DataLocal(args1) {
    this.localService.DataLocal(args1).subscribe(
      (data) => {
        let tempGeoData = [];
        let apiGeoData = data['data']['DataLocal'];
        for (let i = 0; i < apiGeoData.length; i++) {
          tempGeoData.push(
            [
              apiGeoData[i]['Code'],
              // 修正字段匹配，取返回实际的CodeCount字段
              apiGeoData[i]['CodeCount']
            ]
          )
        }
        // 循环结束后统一赋值
        this.letsTry = tempGeoData;
        // 直接更新chartOptions中的series数据
        this.chartOptions.series[0]['data'] = this.letsTry;
        // 触发highcharts重绘
        this.updateFlag = true;
        // 可选：重置标记避免无意义重复重绘
        setTimeout(() => this.updateFlag = false, 0);
        console.log('Data from API', this.letsTry);
      }
    )
  }
}

2. 给html组件绑定update属性 #

修改data-local.component.html代码，绑定更新标记：

<highcharts-chart id="container" 
  [Highcharts]="Highcharts" 
  [constructorType]="chartConstructor" 
  [options]="chartOptions"
  [update]="updateFlag"
  style="width: 100%; height: 550px; display: block;">
</highcharts-chart> 

内容的提问来源于stack exchange，提问作者Samruddhi Dhaygude