Question

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

我找不到将值合并为每天1 bar的方法。

__

有什么想法吗？

Answer 1

你的问题可能有特定于flot的东西，在这种情况下我可能错过了它们。但是，如果您刚刚获得了包含日期的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，并且它遍历源集合以使用每个散列键的数组填充此散列。之后，它迭代哈希中的所有键，并创建一个包含哈希组结果的对象数组。

flot中的直方图 - Javascript

1 个答案: