当使用 Angular 从 HTTP 请求追溯推送数据点时，Chart.js 数据向后移动

Question

我正在尝试从我的 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，即。 是在 2021 年 1 月 2 日/4 日之后添加的。

用于将这些数据添加到图表的方法如下：

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);
                  }
                }
              }
            }
          }
        }
      }

如您所见，2021 年 1 月 2 日和 4 日的数据点向后循环，而不是显示按时间顺序排列的行。 有什么想法吗？ 非常感谢; 我还是 chart.js 的新手！

Answer 1

Chartjs 将根据项目的索引绘制线，因此如果您最后添加的项目位于数组的末尾，这是正确的行为，要获得您想要的行为，您必须将值插入到右边放在数组中