Chart.js данные возвращаются назад при ретроактивном отправке точки данных из HTTP-запроса с использованием Angular

#javascript #angular #typescript #http #chart.js

#javascript #angular #typescript #http #chart.js

Вопрос:

Я пытаюсь отправить эти наборы данных о весе тела из моего http-запроса, где запрос GET возвращает приведенные ниже данные

 bodyweight:
    2020:
        11:
            06: {logId: 5, value: 70}
        12:
            17: {logId: 2, value: 82}
            ...
    2021:
        01:
            02: {logId: 9, value: 81.6}
            04: {logId: 13, value: 75.4}
            10: {logId: 10, value: 80}
            13: {logId: 11, value: 87}
            14: {logId: 12, value: 90}
            17: {logId: 14, value: 95}
            25: {logId: 15, value: 82}
 

Из этих данных точки данных 2021: 01: 02 и 2021: 01: 04 были добавлены ретроспективно, т.Е. они были добавлены позже 2-4 января 2021 года.

Метод, используемый для добавления этих данных в диаграмму, выглядит следующим образом:

 this.metricsHttpService.getTrackingMetrics(clientId).subscribe((res) => {
      if (res.metric.bodyweight) {
        for (const year in res.metric.bodyweight) {
          if (res.metric.bodyweight[year]) {
            for (const month in res.metric.bodyweight[year]) {
              if (res.metric.bodyweight[year][month]) {
                for (const date in res.metric.bodyweight[year][month]) {
                  if (res.metric.bodyweight[year][month][date]) {
                    this.onUpdateChart(year, month, date, res.metric.bodyweight[year][month][date].value);
                  }
                }
              }
            }
          }
        }
      }
 

Как вы можете видеть, точки данных 2 и 4 января 2021 года зацикливаются назад, вместо отображения строки, которая идет в хронологическом порядке. Есть мысли? Большое вам спасибо; Я все еще новичок в chart.js !

введите описание изображения здесь

Ответ №1:

Chartjs нарисует строку на основе индекса элемента, поэтому, если элементы, которые вы добавили как последние, находятся в конце массива, это правильное поведение, чтобы получить желаемое поведение, вам нужно будет вставить значения в нужное место в массиве