Chart.js,返回一个“日期”数组来绘制折线图

在数据库中,我有 3 个数据,我通过 Rest-API 将它们发送到前端 Angular。这很好用。

在浏览器控制台中,您可以看到我通过 Rest-API 通过 node.js 获得的所有三个数据集: 它在浏览器控制台中的外观

浏览器控制台中的结果如下所示:

0:

device_id: 2885679

list: Array(1)

0:

dt: 1596608643

main:

humidity: 10

pressure: 7.86

temp: 120.052

temp_max: 40.052

temp_min: 20.052

__proto__: Object

__proto__: Object

length: 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)只返回迭代的最后一个值?我想返回所有值console.log(devicedata)以绘制基于 3 个时间戳的图形。在这里,当我只返回 1 个时间戳时。它以某种方式覆盖了 deviceData.push - Methode 的值。我的目标是绘制我拥有的所有数据点(请参阅浏览器控制台的屏幕截图)。


哔哔one
浏览 93回答 1
1回答

汪汪一只猫

似乎每个对象res都有一个只有一个项目的列表。(res[i]['list']是一个长度为 1 的数组)尝试记录这个:(这会获取每个项目的所有值并将它们放在一个列表中)let allvalues = [];for (const item of res) {&nbsp; for (const measurement of item.list) {&nbsp; &nbsp; allvalues.push(measurement)&nbsp; }}console.log(allvalues);
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript