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

Question

我想为我的项目使用ngx-charts。问题是我不明白如何使用从api中获得的数据来初始化图表。

垂直条形图似乎很容易。数据具有以下类型：

https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts

当我分配constructor Object.assign(this, data)（从我的api获得的data）时，我收到以下错误消息：

  

错误TypeError：无法读取未定义的属性'toLocaleString'

他们的数据是以下类型：

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：这就是我从后端获取数据的方式。数据与我上面发布的相同。在COnstructor中，我从Object.assign（this，{single}）开始，最初是单身：any [];

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

Answer 1

在组件中，您必须将数据map转换为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 }));
    });
  }

  ...
}

---

  

这是您推荐的Working Sample StackBlitz。