Cal-热图数据答案

【问题标题】：Cal-HeatMap DataCal-热图数据
【发布时间】：2017-02-26 05:43:45
【问题描述】：

我正在尝试用动态数据填充 HeatMap 日历 (http://cal-heatmap.com/)。因此，我从文件中获取不同的日期并将它们转换为毫秒以创建日历所需的键值对。

我这样做是这样的：

var aux = {};
var dataJSON = {};
for(var i=0; i<activity.length; i++) {
   var date = new Date(activity[i].date);  // Date of activity
   var ms = date.getTime();                // Date Conversion
   aux[ms] = 1;                            // Pair "Key-Value" for calendar data
   dataJSON = JSON.stringify(aux);         // Convert to JSON format
}

如果我打印 dataJSON 的结果，我得到（显然）正确的对象：

{"1426204800000":1,"1426464000000":1,"1426636800000":1,"1426550400000":1,"1425945600000":1,"1426118400000":1,"1426032000000":1,"1432771200000":1,"1432857600000":1,"1432598400000":1,"1432684800000":1,"1432080000000":1,"1432166400000":1,"1425513600000":1,"1435708800000":1,"1439164800000":1,"1425427200000":1,"1432512000000":1,"1439251200000":1,"1425340800000":1,"1432252800000":1,"1439337600000":1,"1425254400000":1,"1425859200000":1,"1425686400000":1,"1435881600000":1,"1425600000000":1,"1435795200000":1,"1436400000000":1,"1436313600000":1,"1436227200000":1,"1436140800000":1,"1435536000000":1,"1434931200000":1,"1427673600000":1,"1434758400000":1,"1435276800000":1,"1427760000000":1,"1435190400000":1,"1435104000000":1,"1435017600000":1,"1427241600000":1,"1434672000000":1,"1427155200000":1,"1434585600000":1,"1427414400000":1,"1434499200000":1,"1427328000000":1,"1434412800000":1,"1433980800000":1,"1433894400000":1,"1434326400000":1,"1426809600000":1,"1427068800000":1,"1427846400000":1,"1434067200000":1,"1428451200000":1,"1438646400000":1,"1428364800000":1,"1438560000000":1,"1428278400000":1,"1438387200000":1,"1438905600000":1,"1438819200000":1,"1428537600000":1,"1438732800000":1,"1430092800000":1,"1430179200000":1,"1437177600000":1,"1437091200000":1,"1430265600000":1,"1429488000000":1,"1436486400000":1,"1429747200000":1,"1437004800000":1,"1429833600000":1,"1436918400000":1,"1429574400000":1,"1436832000000":1,"1429660800000":1,"1436745600000":1,"1429142400000":1,"1429228800000":1,"1428969600000":1,"1429056000000":1,"1435622400000":1,"1428883200000":1,"1428624000000":1,"1428710400000":1,"1430956800000":1,"1430870400000":1,"1430784000000":1,"1430697600000":1,"1431043200000":1,"1424736000000":1,"1424649600000":1,"1431907200000":1,"1424908800000":1,"1431648000000":1,"1424822400000":1,"1424995200000":1,"1431993600000":1,"1438300800000":1,"1431475200000":1,"1431561600000":1,"1431302400000":1,"1424476800000":1,"1431388800000":1,"1423958400000":1,"1438128000000":1,"1423872000000":1,"1438041600000":1,"1424131200000":1,"1424304000000":1,"1424217600000":1,"1430352000000":1,"1437609600000":1,"1437523200000":1,"1437436800000":1,"1437350400000":1,"1423180800000":1,"1433203200000":1,"1437955200000":1,"1433116800000":1,"1423612800000":1,"1423526400000":1,"1437696000000":1,"1433376000000":1,"1433289600000":1,"1438214400000":1,"1433808000000":1,"1433721600000":1};

但是，我在日历上看不到结果。这是日历配置：

var cal = new CalHeatMap();
cal.init({
  itemSelector: "#cal-heatmap",
  domain: "month",
  subDomain: "x_day",
  start: new Date(init),
  data: dataJSON
});

无论如何，我用这些静态数据进行了尝试，令人惊讶的是，它确实有效：

var dataJSON = {"1420498800":2,"1420585200":4,"1420671600":2,"1420758000":1,"1421103600":2,"1421190000":1,"1421276400":1,"1421362800":1,"1421622000":1,"1421708400":1,"1422226800":1,"1422313200":1,"1422399600":2,"1422486000":1,"1422572400":1,"1423695600":3,"1424127600":2,"1424214000":1,"1424300400":3,"1424386800":1,"1424646000":2,"1424732400":1,"1424818800":2,"1424905200":2,"1424991600":1,"1425337200":1,"1425855600":4,"1426201200":2,"1426460400":2,"1426546800":1,"1426633200":2,"1426719600":1,"1426806000":1,"1427065200":1,"1427151600":1,"1427238000":2,"1427324400":1,"1427670000":2,"1428361200":2,"1428447600":2,"1428534000":3,"1428620400":3,"1428966000":2,"1429138800":2,"1429225200":1,"1429484400":2,"1429570800":1,"1429657200":2,"1429743600":2,"1429830000":3};

另一方面，我从 d3.js 收到以下 GET 错误：

GET http://localhost:9000/%7B%221426204800000%22:2,%2...2,%221433808000000%22:2,%221433721600000%22:2%7D

Aborted

希望你能告诉我我的错误，提前谢谢。

【问题讨论】：

标签： javascript json d3.js cal-heatmap

【解决方案1】：

数据转换应通过“afterLoadData(data)”函数完成。所以，在我的例子中：

var parserData = function (data) {
  var dataJSON = {};

  for(var i=0; i<data.length; i++) {
    var date = new Date(data[i].date); // Date of activity 
    var sec = date.getTime()/1000; // Convert to sec

    // Pair "Key-Value" for calendar data
    if(dataJSON[sec]) {
      dataJSON[sec]++;
    } else {
      dataJSON[sec] = 1;
    }
  }

  return dataJSON;
}

var cal = new CalHeatMap();
cal.init({
   itemSelector: "#cal-heatmap",
   domain: "month",
   subDomain: "x_day",
   data: activity_sorted_by_date, // Dates Array
   afterLoadData: parserData      // Parser function
});

【讨论】：