从api获取数据后创建Chart.js

Question

我在Angular中有两个函数：

一种从web服务获取一些数据并将其存储在this.apiDay和this.apiDayLabel变量中的方法：

getDayScan() {
this.btcPriceService.getDailyBTCScan().subscribe(data => {
data.Data.Data.forEach(price => {
this.apiDay.push(price.open);
this.apiDayLabel.push(new Date(price.time * 1000).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}));
});
});
}

一个用于使用来自this.apiDay和this.apiDayLabel:的数据创建图表

public createDay(defaultChartConfig: any) {
this.canvas = document.getElementById('dayChart');
this.ctx = this.canvas.getContext('2d');
const dataTotal = {
// Total Shipments
labels: this.apiDayLabel,
datasets: [{
label: 'Price',
fill: true,
backgroundColor: this.bgColorSelector(this.apiDay),
borderColor: this.borderColorSelector(this.apiDay),
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: this.borderColorSelector(this.apiDay),
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: this.borderColorSelector(this.apiDay),
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 0,
data: this.apiDay,
}]
};
this.myChartDay = new Chart(this.ctx, {
type: 'lineWithLine',
data: dataTotal,
options: defaultChartConfig
});
}

我在ngOnInit()函数中这样调用这两个函数：

ngOnInit() {
this.getDayScan();
this.createDay(defaultChartConfig);
}

我的问题是，图表是在我从api获得数据之前创建的。

有没有办法等待数据出现，然后开始创建图表？

像这样(伪码(

public createDay(defaultChartConfig: any) {
getDayScan();
// wait for it to finish so every necessary variable is declared
// and only THEN go on with the other code 
this.canvas = document.getElementById('dayChart');
this.ctx = this.canvas.getContext('2d');
...
}

所以我只能调用ngOnInit中的createDay函数

或者在这种情况下，最佳实践是什么？

Answer 1

您可以在从API获得响应后填充图表数据。

同时为多个调用创建一个通用函数。

getJoin(URL_Array: Array<string>): Observable<any> {
const observableBatch = [];
URL_Array.forEach((url) => {
observableBatch.push(this._httpClient.get<any>(`${API_URL}${url}`)
.pipe(map(res => { return res; })));
});
return forkJoin(observableBatch);
};

getDayScan() {
const urls = [
this.btcPriceService.getDailyBTCScan1(), // API 1 URL
this.btcPriceService.getDailyBTCScan2()  // API 2 URL
];
this.btcPriceService.getJoin(urls)
.subscribe(res => {
// You will get array inside res with the same number of the array that you passed API. So Use for loop for res.
for (let i = 0; i < res.length; i++) { // here will be res.length is 2 in this example
const element = res[i];
// Apply your logic here if you got different response in different API
element.Data.Data.forEach(price => {
this.apiDay.push(price.open);
this.apiDayLabel.push(new Date(price.time * 1000)
.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}));
});
}
// Call chart function after loop complete
this.createDay(defaultChartConfig);            
});
}
createDay(defaultChartConfig: any) {
this.canvas = document.getElementById('dayChart');
this.ctx = this.canvas.getContext('2d');
const dataTotal = {
// Total Shipments
labels: this.apiDayLabel,
datasets: [{
label: 'Price',
fill: true,
backgroundColor: this.bgColorSelector(this.apiDay),
borderColor: this.borderColorSelector(this.apiDay),
borderWidth: 2,
borderDash: [],
borderDashOffset: 0.0,
pointBackgroundColor: this.borderColorSelector(this.apiDay),
pointBorderColor: 'rgba(255,255,255,0)',
pointHoverBackgroundColor: this.borderColorSelector(this.apiDay),
pointBorderWidth: 20,
pointHoverRadius: 4,
pointHoverBorderWidth: 15,
pointRadius: 0,
data: this.apiDay,
}]
};
this.myChartDay = new Chart(this.ctx, {
type: 'lineWithLine',
data: dataTotal,
options: defaultChartConfig
});
}

Answer 2

我建议您使用asyncawait来等待api响应。

async getDayScan() {
await this.btcPriceService.getDailyBTCScan().subscribe(data => {
data.Data.Data.forEach(price => {
this.apiDay.push(price.open);
this.apiDayLabel.push(new Date(price.time * 1000).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}));
});
});
}

从createDay()调用getDayScan()，

public async createDay(defaultChartConfig: any) {
await getDayScan();
// wait for it to finish so every necessary variable is declared
// and only THEN go on with the other code 
this.canvas = document.getElementById('dayChart');
this.ctx = this.canvas.getContext('2d');
...
}

您只需要从ngOnInit()调用createDay()

如果您不喜欢使用异步等待，请使用这个工作示例。

抱歉有错别字。