Angular-Highcharts从API导入数据无显示问题求助

我一眼就看出问题所在啦——这是异步数据加载时机导致的！

你现在的代码逻辑是：在ngOnInit里先创建StockChart，但此时API请求还在异步进行中，historyData还是空数组。Highcharts拿到空数组不会报错，但自然也不会渲染任何内容。

修复方案1：拿到数据后再初始化图表 #

把创建图表的代码移到API请求的subscribe回调里，确保只有当数据完全获取到之后，才初始化图表：

export class ChartComponent implements OnInit { 
  stockChart: StockChart; 
  historyData = []; 

  constructor(private apiService: ApiService) {}

  ngOnInit() { 
    this.apiService.getBtcData()
      .subscribe((data) => { 
        // 优化：把日期和数值配对，让x轴显示正确的日期
        const bpiEntries = Object.entries(data.bpi);
        this.historyData = bpiEntries.map(([date, value]) => [
          new Date(date).getTime(), // 转换为时间戳，Highcharts需要数值型x值
          value
        ]);

        // 拿到数据后再创建图表
        this.stockChart = new StockChart({ 
          series: [{ 
            tooltip: { valueDecimals: 2 }, 
            marker: { enabled: false }, 
            name: 'BTC/USD', 
            data: this.historyData 
          }] 
        });
      }); 
  } 
}

修复方案2：先初始化空图表，再更新数据 #

如果你的模板已经绑定了stockChart，可以先初始化一个空图表，等数据到了再更新series的数据：

export class ChartComponent implements OnInit { 
  stockChart: StockChart; 
  historyData = []; 

  constructor(private apiService: ApiService) {}

  ngOnInit() { 
    // 先初始化一个空图表
    this.stockChart = new StockChart({ 
      series: [{ 
        tooltip: { valueDecimals: 2 }, 
        marker: { enabled: false }, 
        name: 'BTC/USD', 
        data: [] 
      }] 
    });

    this.apiService.getBtcData()
      .subscribe((data) => { 
        const bpiEntries = Object.entries(data.bpi);
        this.historyData = bpiEntries.map(([date, value]) => [
          new Date(date).getTime(),
          value
        ]);

        // 通过Highcharts的实例方法更新数据
        this.stockChart.ref.series[0].setData(this.historyData);
      }); 
  } 
}

额外优化说明 #

你之前只传了数值数组，Highcharts会默认把x轴设为索引（0、1、2...），转换为[时间戳, 数值]的数组后，图表的x轴会显示对应的日期，用户体验会好很多～

内容的提问来源于stack exchange，提问作者Hoàng Nguyễn