Angular 如何使用API获取数据初始化图表？

我想在我的项目中使用

ngx图表

。问题是我不明白如何用我从api获得的数据初始化图表

垂直条形图似乎很简单。数据类型如下：

export var single = [{
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

当我在

构造函数
对象中赋值时，我收到以下错误：

错误类型错误：无法读取未定义的属性“ToLocalString”

其数据类型如下：

export var single = [{
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

我的数据是：

[{
    "data": "2019-01-09",
    "totalConsum24": 66.66666666666667
  },
  {
    "data": "2019-02-03",
    "totalConsum24": 160
  },
  {
    "data": "2019-02-04",
    "totalConsum24": 153.84615384615384
  },
  {
    "data": "2019-02-05",
    "totalConsum24": 90.9090909090909
  }
]

Edit1：这就是我从后端获取数据的方式。数据与我上面发布的相同。在构造函数中，我从Object.assign（this，{single}）开始，最初是single:any[]

ngOnInit() {
this.shipService.getConsumuriSiDataForShipById(this.shipId).subscribe(data 
=> {
  console.log(data);
  this.single = data;
});

在组件中，您必须将数据映射到ngx图表能够理解的格式。在这里，尝试一下：

...
import { ShipService } from './path-to-ship-service';

@Component({...})
export class AppComponent {

  ...,
  single = [];

  constructor(private shipService: ShipService) {}

  ngOnInit() {
    this.shipService.getConsumuriSiDataForShipById(this.shipId)
      .subscribe(data => {
        console.log(data);
        this.single = data.map(datum => ({ name: datum.data, value: datum.totalConsum24 }));
    });
  }

  ...
}


这是给你的裁判的一封信

你的例子对我很有用，你能不能提供一个失败的例子，因为它很难理解。（如果你想模拟后端调用，你可以使用（数据）从HttpClient获得一个可观察的相似项）我添加了一个编辑，其中包含了关于后端调用的更多详细信息我从后端获取的数据与单个非常相似，为什么我要使用多个？我添加了一个编辑来提供更多细节，现在可以了。这些东西需要放在文档中！：）亲切的问候！文档中实际上有一个名为的部分。但是，是的，我同意必须明确提到的是，数据必须采用完全相同的格式。