Vue + Chart JS：是否通过API在Chart JS中填充数据？

Question

我有一个返回以下格式的api。

[
  {
    "id": 120,
    "date": "2019-02-05",
    "duration": 10,
  },
  {
    "id": 121,
    "date": "2019-02-06",
    "duration": 8,
  },
  {
    "id": 122,
    "date": "2019-02-07",
    "duration": 8,
  },
  {
    "id": 123,
    "date": "2019-02-08",
    "duration": 10,
  },
  {
    "id": 85,
    "date": "2019-02-04",
    "duration": 8,
  }
]

我将如何正确映射API响应的日期和持续时间，以便将其放置在如下所示的Chart JS组件中：

  this.datacollection = {
    labels: [<Each Month here>],
    datasets: [
      {
        label: "Hours logged",
        data: [<Sum of duration of each month from the API here>],
        backgroundColor: '#0be881'
      },
    ],
  };

基本上，我首先需要转换API中的date来表示月份，然后对于该“月份”中的每个duration，将它们加起来并放在图表中他们所属的相应月份。

有什么主意要实现吗？