Chart. js, возвращающий массив "date" для построения линейного графика - PullRequest
Новая
       33

Chart. js, возвращающий массив "date" для построения линейного графика

0 голосов
/ 05 августа 2020

в базе данных у меня есть 3 данных, которые я отправляю через Rest-API на Frontend Angular. Это отлично работает.

Здесь, в консоли браузера, вы можете увидеть все три набора данных, которые я получил через node.js через Rest-API: Как это выглядит в консоли браузера

результат в консоли браузера выглядит так: 

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"

В компоненте машинописного текста 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
              },
              ]
            },
            options: {
              legend: {
                display: false
              },
              scales: {
                xAxes: [{
                  display: true
                }],
                yAxes: [{
                  display: true
                }]
              }
            }
          })
        }
        })
      
  }

Почему console.log(deviceData) возвращает только последнее значение итерации? Я хочу вернуть все значения в console.log(devicedata), чтобы нарисовать график на основе 3 временных меток. Здесь, когда я получаю только 1 временную метку. Как-то затирает значения на deviceData.pu sh - Methode. Моя цель - нарисовать все имеющиеся у меня точки данных (см. Снимки экрана консоли браузера).

Вот как график строится в браузере. Он отображает только одну точку, а именно точку console.log (deviceData): график

В чем проблема и как ее исправить?

Спасибо, Иден

1 Ответ

0 голосов
/ 05 августа 2020

Кажется, каждый объект в res имеет список только с одним элементом. (res[i]['list'] - массив длиной 1)

Попробуйте записать это: (это берет все значения каждого элемента и помещает их в один список) 

let allvalues = [];
for (const item of res) {
  for (const measurement of item.list) {
    allvalues.push(measurement)
  }
}

console.log(allvalues);
...