Question

我一直在尝试使用带有csv的cal-heatmap来显示数据。但似乎没有任何东西可以使它工作。控制台中没有错误。

cal-heatmap：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

Answer 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的未来版本将自动执行此转换。

Answer 2

来自Cal-HeatMap site

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

但是，你可以使用d3的d3.csv函数将你的csv数据导入你需要的格式（虽然我还没有测试过）。

使用cal-heatmap jquery实现csv

2 个答案: