1

我一直在尝试使用带有 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
4

2 回答 2

4

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

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

[
    {
        "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;
}

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

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

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

于 2013-10-15T22:51:24.307 回答
1

来自Cal-HeatMap 网站

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

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

于 2013-09-09T08:32:32.533 回答