热图的数据操作

Question

我有一个包含 15 分钟间隔数据的数据集。我需要做的是按 day/hour 对数据进行分组，每小时平均 4（15 分钟间隔）。

例如，将 6:00、6:15、6:30、6:45 值取平均值，得到一个 6 AM 值。

我正在寻找一个关于如何处理这个 and/or 示例的一般策略，这些示例可能是我走上正轨（使用 JS、and/or lodash、moment）

[
{date:"2019-07-02T06:00:00.000Z",value:1271.22}
{date:"2019-07-02T06:15:00.000Z",value:1771.41},
{date:"2019-07-02T06:30:00.000Z",value:1780.83},
{date:"2019-07-02T06:45:00.000Z",value:1788.13},
{date:"2019-07-02T07:00:00.000Z",value:1805.31},
{date:"2019-07-02T07:15:00.000Z",value:1781.83},
{date:"2019-07-02T07:30:00.000Z",value:1764.17},
{date:"2019-07-02T07:45:00.000Z",value:1721.44},
{date:"2019-07-02T08:00:00.000Z",value:1712.92},
{date:"2019-07-02T08:15:00.000Z",value:1764.63},
{date:"2019-07-02T08:30:00.000Z",value:1759.03},
{date:"2019-07-02T08:45:00.000Z",value:1754.27},
{date:"2019-07-02T09:00:00.000Z",value:1745.81}
....
]

示例数据集在这里： Full example dataset here

y轴将是[ 'Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday' ]

y 轴标签将是一天中的时间：（12 AM、1 AM、2 AM、3 AM 等）

像这样： [img]https://i.stack.imgur.com/zk7jf.jpg[/img]

最终的数据结构应该是这样的。这是按小时（上面列出的四个点的平均值）、星期几和值细分的

[
[1, 6, 553],
[2, 6, 777],
[3, 6, 654],
[4, 6, 613],
[5, 6, 551],
[6, 6, 668],
[7, 6, 647],
[8, 6, 725],
[9, 6, 703],
[10, 6, 661],
[11, 6, 745],
[12, 6, 670],
[13, 6, 770],
[14, 6, 763],
[15, 6, 705],
[16, 6, 713],
[17, 6, 693],
[18, 6, 724],
[19, 6, 724],
[20, 6, 701],
[21, 6, 710],
[22, 6, 656]
....]

最后一个值是当天小时的平均值。例如，

{date:"2019-07-02T06:00:00.000Z",value:1271.22} {date:"2019-07-02T06:15:00.000Z",value:1771.41}, {date:"2019-07-02T06:30:00.000Z",value:1780.83}, {date:"2019-07-02T06:45:00.000Z",value:1788.13}

7 月 2 日早上 6 点的平均值等于以上 4 个值的平均值

因此对于最终数据结构中的条目，它将类似于：

[hour of day, day of week, the average of the four intervals within that hour]

Answer 1

为了首先接近它，我们需要做的是对时间段进行分组，这意味着日-小时，我们使用以下代码->

let byHour = {};

const groups = (() => {
const byDay = (item) => moment(item.date).format('MMM DD YYYY'),
    forHour = (item) => moment(item.date).format('MM/DD/YYYY HH:ss');
return {
    byDay,
    forHour
};
})();
const currentGroup = 'forHour';
let obj = _.groupBy(values, groups[currentGroup]);
let valuesGrouped = Object.values(obj)

为了做到这一点，我们需要 moment 和 Lodash，我们所做的是格式化传入的日期并按日对它们进行分组，我们将它们作为键，在我们对它们进行分组之后，我们想要的是它们的值，一旦我们有值，将其格式化为 []

 let answerArr = valuesGrouped.map((a,i,arr)=>{
  
 return [moment(a[0].date).format('hh a'),moment(a[0].date).format('DD'),a.reduce((x, y) => parseInt(x) + parseInt(y.value),0) / a.length]
 }) 
 console.log(answerArr)

PS：请记住，一旦格式化，您将使用 ISO8601 作为格式，您会将其格式化为您的本地时区。

题外话 就我而言，当我格式化它时，它从 6 月 30 日开始 22:00

CodePen link

Answer 2

你也可以尝试使用这个逻辑来实现想要的输出：

let finalOutput = [],
        curOutput = 0,
        startDay = 1,
        startHour = 4;

values.forEach((v, i) => {
    curOutput += v.value;
    i = i + 1;
    if (i % 4 === 0) {
        console.log(i)
        finalOutput.push([startHour, startDay, curOutput / 4])
        startHour += 1;
        curOutput = 0;
        
        if (startHour === 24) {
            startDay += 1;
            startHour = 0;
        }
    }
})

console.log(finalOutput)

演示：https://jsfiddle.net/BlackLabel/ut1yzx6s/

热图的数据操作

Data manipulation for heatmap

javascript

heatmap

highcharts