在Angular Highchart中使用从后端接收的数据

Question

这就是我一直在以角度5在堆积的列高图中显示数据的方式。

series: [{
    name: 'DEF',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'ABC',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'MNP',
    data: [3, 4, 4, 2, 5]
}, {
    name: 'ASM',
    data: [3, 5, 2, 3, 6]
}, {
    name: 'BCC',
    data: [2, 5, 3, 4, 6]
}]

现在，我一直在尝试在初始化此组件时从后端获取数据并在此处使用它。我成功获取了如下所示的数据，但是不知道如何使用它来显示高图表。

  ngOnInit() {
    this.metricService.getPluginMetrics().subscribe(data =>{     
      this.metricItems = data;
      console.log(this.metricItems[0].value);
    })
  };

现在从后端的json文件中获取数据以模拟API，然后将其转换为字符串，这就是返回数据的方式。

这是JSON文件的一些内容。

[
    {
        "name": "DEF",
        "value": [10, 20, 40, 60, 60],
        "type": "",
        "timestamp": 1533822125000
    },
    {
        "name": "ABC",
        "value": [5, 3, 4, 7, 2, 6],
        "type": "",
        "timestamp": 1533822125000
    }
]

在角形前端，MetricItem的对象是

export interface MetricItem {
    name: string;
    value: string;
    type: string;
    timestamp: string;
}

我也尝试替换

series: [{
        name: 'DEF',
        data: [5, 3, 4, 7, 2]
    },.......

与

series: [{
        name: this.metricItems[0].name,
        data: this.metricItems[0].value
    }

但这无效，并且不会显示图表。你能告诉我如何解决这个问题吗？

编辑：正如@ Core972在注释中建议的那样，我替换了

title: {
    text: 'Stacked Consumption chart'
}

与此

title: {
    text: this.metricItems[0].name
}

但图表未显示。