javascript - 带时间戳的对象数组的日期过滤 [添加图表]

Question

我想用一个简单数组 [0,1,2,...] 提供线性图表，表示 amount 除以天数的总和。输入数组具有复杂的结构，所以我的第一个想法如下:

const data = [{
    LQsZ2cuD1n5U10Rhg9p: {
      amount: 140,
      timestamp: 1541768493811
    }
  },
  {
    LR6Bx6pih4TRID9i3LW: {
      amount: 240,
      timestamp: 1542014096044
    }
  },
  {
    LR6IbF4Q0SI9TZ6Sh5h: {
      amount: 340,
      timestamp: 1542015841476
    }
  },
  {
    LR6NLdgGd2UgTMpnYYE: {
      amount: 460,
      timestamp: 1542017084204
    }
  },
  {
    LR6R5ql8lJW_gTctXB6: {
      amount: 110,
      timestamp: 1542018068191
    }
  },
  {
    LR6R5v0ag8twyTjeupC: {
      amount: 120,
      timestamp: 1542018068351
    }
  },
  {
    LR6R5xZZ4VNCIud71MP: {
      amount: 160,
      timestamp: 1542018069574
    }
  },
  {
    LR6R5zz5QrvrM_RTrvT: {
      amount: 310,
      timestamp: 1542018069716
    }
  },
  {
    LR6R6Aser7lmvrGetzm: {
      amount: 210,
      timestamp: 1542018069996
    }
  },
]

function getReduced(index) {
  const y = Object.values(data).map(e => Object.values(e))
    .map(e => Object.values(e)[0])
    .map(e => [Math.round((Date.now() - e.timestamp) / 8.64e7), e.amount])
    .filter(e => e[0] === index).map(e => e[1]);
  if (y === undefined) return 0;
  else return y.reduce((a, b) => a + b, 0);
}

const info = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((e, i) => getReduced(i++));
document.getElementById("info").innerHTML = info;

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Today","1 day ago","2 days ago","3 days ago","4 days ago","5 days ago","6 days ago","A week ago","8 days ago","9 days ago","10 days ago","11 days ago",],
        datasets: [{
            label: 'Money earned',
            data: info,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)',
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)'
            ],
            borderWidth: 3
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<div>Final array for feeding my chart: [<span id="info"></span>]</div>
<canvas id="myChart" width="400" height="400"></canvas>

它有点管用，我已经苦苦挣扎了几个小时，但我很确定有一种更聪明、更简洁的方法来处理这种情况，你想根据你的时间需要快速对数组值进行排序和求和。< br/>是的，最后的 [0,1...] 太蹩脚了，这样做我试图在过去 11 天的图表中执行该函数 11 次(Array(11) 由于某种原因没有成功，值是空的)。

请帮我KO这个丑八怪!

编辑:添加了获得想法所需的图表。可能有几天没有收入。该图表始终显示过去 11 天，因此时间窗口每天都会滑动，将不相关的值从图表中移除。

Answer 1

如果我正确理解你的问题，你可以使用一个 reduce像这样:

const data = [{ LQsZ2cuD1n5U10Rhg9p: { amount: 14, timestamp: 1541768493811 } }, { LR6Bx6pih4TRID9i3LW: { amount: 24, timestamp: 1542014096044 } }, { LR6IbF4Q0SI9TZ6Sh5h: { amount: 34, timestamp: 1542015841476 } }, { LR6NLdgGd2UgTMpnYYE: { amount: 46, timestamp: 1542017084204 } }, { LR6R5ql8lJW_gTctXB6: { amount: 11, timestamp: 1542018068191 } }, { LR6R5v0ag8twyTjeupC: { amount: 12, timestamp: 1542018068351 } }, { LR6R5xZZ4VNCIud71MP: { amount: 16, timestamp: 1542018069574 } }, { LR6R5zz5QrvrM_RTrvT: { amount: 31, timestamp: 1542018069716 } }, { LR6R6Aser7lmvrGetzm: { amount: 21, timestamp: 1542018069996 } }, ]

const group = arr => arr.reduce((r,c) => {
  let key = Object.keys(c)[0], date = Math.round((Date.now() - c[key].timestamp) / 864e5)
  r[date] += c[key].amount
  return r
}, new Array(11).fill(0))

console.log(group(data)) //(11) [0, 0, 0, 0, 0, 0, 0, 195, 0, 0, 14]

想法是通过 new Array(11).fill(0) 从 0 的预填充数组开始，并将其用作 reduce 的 accumulator。由于 date 键仅影响 2 个元素 [索引 7 和 10]，reduce 将仅更新那些将其余部分保留为 0 以匹配预期输出。