使用 cal-heatmap jquery 实现 csv答案

【问题标题】：csv implementation with cal-heatmap jquery使用 cal-heatmap jquery 实现 csv
【发布时间】：2013-09-09 02:04:28
【问题描述】：

我一直在尝试使用带有 csv 的 cal-heatmap 来显示数据。然而，似乎没有什么可以让它发挥作用。控制台中没有错误。

cal-热图：http://kamisama.github.io/cal-heatmap/ 有没有人知道如何使它与 csv 文件一起工作？甚至有一个csv的例子？是否有人可以使用 Google Analytics（分析）轻松实施任何替代方案？

代码：

<html>
    <head>
    <link rel="stylesheet" href="cal-heatmap.css" />
    <script type="text/javascript" src="d3.v3.min.js"></script>
    <script type="text/javascript" src="cal-heatmap.min.js"></script>
    </head>
    <body>
<div id="cal-heatmap"></div>
<script type="text/javascript">
    var cal = new CalHeatMap();
    cal.init({
    data: "test.csv",
    dataType: "csv",
    start: new Date(2013, 0),
    domain : "day",
    subDomain : "hour",
    itemName: ["visit", "visits"],
    range : 12,
    cellsize: 15,
    cellpadding: 3,
    cellradius: 5,
    domainGutter: 15,
    weekStartOnMonday: 0,
    scale: [40, 60, 80, 100]
    });
</script>

    </body>
</html>

CSV 格式：

Hour,Visits
000000,53
000001,40
000002,58
000003,45
000004,35
000005,37
000006,41

【问题讨论】：

标签： jquery d3.js heatmap

【解决方案1】：

是的，Cal-heatmap 只理解 JSON 对象格式的数据。

但是，您可以将 dataType 设置为 csv，并使用 csv 解析器，如您的示例所示。它不能开箱即用的原因是因为在解析之后，d3.csv() 返回的结果 JSON 对象确实有键，并且看起来像这样：

[
    {
        "Hour": 000000,
        "Visits": 53
    },
    ...
]

您需要将其转换回类似的内容：

{
    "000000": 53,
    ...
}

使用以下函数作为您的afterLoad() 回调：

function(data) {
    "use strict";

    var d = {};
    var keys = Object.keys(data[0]);
    var i, total;
    for (i = 0, total = data.length; i < total; i++) {
        d[data[i][keys[0]]] = parseInt(data[i][keys[1]], 10);
    }
    return d;
}

这将负责转换。此函数仅在第一列是时间戳，第二列是值时才有效。如果您的 CSV 具有不同的结构，请根据您的需要调整 keys[n]。

AFAIK，Google Analytics 不使用时间戳，所以你必须在上面的函数中加入时间戳转换。

未来版本的 Cal-Heatmap 将自动进行此转换。

【讨论】：

【解决方案2】：

来自Cal-HeatMap site

Cal-Heatmap 只能理解以 JSON 对象格式格式化的数据，例如

但是，您可以使用 d3 的 d3.csv 函数将您的 csv 数据导入您需要的格式（尽管我没有对此进行测试）。

【讨论】：