在數(shù)據(jù)庫中,我有 3 個(gè)數(shù)據(jù),我通過 Rest-API 將它們發(fā)送到前端 Angular。這很好用。在瀏覽器控制臺(tái)中,您可以看到我通過 Rest-API 通過 node.js 獲得的所有三個(gè)數(shù)據(jù)集: 它在瀏覽器控制臺(tái)中的外觀瀏覽器控制臺(tái)中的結(jié)果如下所示:0:device_id: 2885679list: Array(1)0:dt: 1596608643main:humidity: 10pressure: 7.86temp: 120.052temp_max: 40.052temp_min: 20.052__proto__: Object__proto__: Objectlength: 1__proto__: Array(0)message: "1"__v: 0_id: "5f2a63857ce17d64d49465a4"在 typescript 組件 xy.component.ts 中,我的代碼如下所示:export class ContactsComponent { chart: any = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts() .subscribe((res: any[]) => { console.log(res); for (let i = 0; i < res.length; i++) { let temp_max = res[i]['list'].map(res => res.main.temp_max); let temp_min = res[i]['list'].map(res => res.main.temp_min); let alldates = res[i]['list'].map(res => res.dt) console.log(alldates) let deviceData = [] alldates.forEach((res) => { let jsdate = new Date(res * 1000) deviceData.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'short', day: 'numeric' })) }) console.log(deviceData) this.chart = new Chart('canvas', { type: 'line', data: { labels: deviceData, datasets: [{ data: temp_max, borderColor: '#3cba9f', fill: false }, { data: temp_min, borderColor: '#ffcc00', fill: false }, ] },為什么console.log(deviceData)只返回迭代的最后一個(gè)值?我想返回所有值console.log(devicedata)以繪制基于 3 個(gè)時(shí)間戳的圖形。在這里,當(dāng)我只返回 1 個(gè)時(shí)間戳?xí)r。它以某種方式覆蓋了 deviceData.push - Methode 的值。我的目標(biāo)是繪制我擁有的所有數(shù)據(jù)點(diǎn)(請(qǐng)參閱瀏覽器控制臺(tái)的屏幕截圖)。
Chart.js,返回一個(gè)“日期”數(shù)組來繪制折線圖
嗶嗶one
2022-12-22 11:39:11