如何使用API获取的数据初始化ngx-charts垂直柱状图？

这个问题的核心是ngx-charts的垂直柱状图默认要求数据结构包含name和value字段，而你的API返回的是data（日期）和totalConsum24（数值），字段名不匹配，导致组件在渲染时找不到预期的value属性，进而抛出Cannot read property 'toLocaleString' of undefined错误。

解决方案：转换API数据格式 #

你需要在订阅API响应后，把返回的数据映射成ngx-charts需要的结构，具体代码修改如下：

// 初始定义时给个空数组，避免初始化时组件找不到数据报错
single: any[] = [];

ngOnInit() {
  this.shipService.getConsumuriSiDataForShipById(this.shipId).subscribe(data => {
    console.log(data);
    // 将API返回的字段映射为ngx-charts需要的name和value
    this.single = data.map(item => ({
      name: item.data, // 把日期作为柱状图的分类标签
      value: item.totalConsum24 // 把消费值作为柱状图的数值
    }));
  });
}

为什么之前的代码会报错？ #

你之前直接把API返回的数组赋值给this.single，但ngx-charts的垂直柱状图组件会尝试读取每个数据项的value属性来做格式化（比如调用toLocaleString），而你的数据项里只有totalConsum24，没有value，所以组件找不到这个属性，就抛出了undefined的错误。

另外，你在构造函数里的Object.assign(this, {single})其实是多余的，因为你已经在类里定义了single属性，直接在订阅里赋值即可。

额外优化建议 #

如果需要处理数值的格式化（比如保留小数），可以在映射时对value做处理，比如：

value: Number(item.totalConsum24).toFixed(2) // 保留两位小数

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