例如,如果API返回以下格式的数据:
[
{"name":"Series 1","data":[1,2,3,4]},
{"name":"Series 2","data":[5,6,7,8]}
]
那么在组件中创建一个数据对象,并将其传递给Highcharts:
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-root',
template: ''
})
export class AppComponent {
chartId = 'myChart';
constructor() {}
ngOnInit() {
this.getData();
}
getData() {
// 调用API的代码
const apiData = [
{"name":"Series 1","data":[1,2,3,4]},
{"name":"Series 2","data":[5,6,7,8]}
];
// 构建数据对象
const chartData = {
chart: {
type: 'line'
},
title: {
text: 'My Chart'
},
xAxis: {
categories: ['Cat 1', 'Cat 2', 'Cat 3', 'Cat 4']
},
series: apiData
};
// 渲染Highcharts
Highcharts.chart(this.chartId, chartData);
}
}