javascript - Flot 中的直方图 - Javascript

Question

我正在尝试在 flot 中创建一个直方图，其中的条形图是按天组织的。

我找不到每天将值合并到 1 个条形图中的方法。

__

有任何想法吗？

Answer 1

您的问题可能有些问题是特定于浮点数的，在这种情况下，我可能会错过它们。但是，如果您刚刚获得了一个带有日期的 javascript 数据结构，并且想要将它们聚合成一整天，那么您可以这样做。

假设以下数据源：

var data = [];
data.push({ value: 4, date: new Date(1278940338413) }); // july 12, 15:12:18
data.push({ value: 7, date: new Date(1278340738313) }); // july 5, 16:38:58
data.push({ value: 2, date: new Date(1278940331313) }); // july 12, 15:12:11

然后，您可以编写一个像这样的函数来将您的数据结构解析为一种新格式：

function aggregateByDate(source) {
    var aggregateHash = {};

    for(var i = 0; i < source.length; i++) {
    var item = source[i];
        var compareString = item.date.getFullYear() + '-' + (item.date.getMonth()+1) + '-' + item.date.getDate();

        if(!(compareString in aggregateHash)) {
           aggregateHash[compareString] = [];
        }

        aggregateHash[compareString].push(item);
    }

    var newSource = [];
    for(var key in aggregateHash) {

       var sum = 0;

       for(var i = 0; i < aggregateHash[key].length; i++) {
          sum += aggregateHash[key][i].value;
       }

       newSource.push({
          total: sum,
          count: aggregateHash[key].length,
          items: aggregateHash[key],
          dateString: key
       });
    }

    return newSource;
}

它会给你以下结果：

/*
   INPUT:
   [
    { value: 4, date: ( july 12, 15:12:18 ) },
    { value: 7, date: ( july 5, 16:38:58 ) },
    { value: 2, date: ( july 12, 15:12:11 ) }
   ]
*/

var output = aggregateByDate(data);

/*
   OUTPUT:
   [
     { count: 2, dateString: '2010-7-12', items: Array(2), total: 6 },
     { count: 1, dateString: '2010-7-5', items: Array(1), total: 7 }
   ]
*/

它的作用是使用输出中表示dateString的键创建一个散列，并迭代源集合以使用每个散列键的数组填充此散列。之后，它迭代散列中的所有键，并创建一个包含散列组结果的对象数组。