如何在Angular 5中使用highcharts创建新的饼图

我正在开发一个Angular 5应用程序，其中要求我使用highcharts并在饼图和条形图上显示一些信息。我从web api调用中获得的数据是json格式的，如下所示：

[
  {
    "fruit": "Orange",
    count: 10
  },
  {
    "fruit": "Strawberry",
    count: 20
  }
]

以下是我的饼图的示例代码：

this.chart = new Chart({
     chart: {
       type: 'pie'
     },
     title: {
       text: 'Available Fruits'
     },
     credits: {
       enabled: false
     },
     series : [{
       name: 'Line 1',
       data: [10, 20, 30, 40]
     }]
   });

所以这个数据是动态的，我想把这个数据作为输入传递给饼图，我还想把一个类似的数据显示为条形图。一旦web api调用返回此数据，就应该呈现图表。你能告诉我如何实现这个功能吗

---

注意：图表对象中的数据值只是临时值，我需要这个值是从web api返回的json数据。

您不知道如何呈现图表或如何使用angular进行api调用？这两个问题在图表/角度文档中都有答案。Angular，Highcharts，嗨Valla，你用angular5做饼图了吗？如果是的话，你能帮我吗？我也需要用饼图和条形图填充日期。