用cal-heatmap jquery实现csv
用cal-heatmap jquery实现csv
提问于 2013-09-09 02:04:28
我一直试图使用cal热图和csv来显示数据.然而，似乎没有什么能使它发挥作用。控制台中没有错误。
cal：http://kamisama.github.io/cal-heatmap/，有人知道如何使用csv文件吗？或者有个csv的例子？有没有人有任何的替代方案是很容易实现的谷歌分析？
代码：
<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回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-15 22:51:24
是的，Cal只理解像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不使用时间戳，所以您必须将时间戳转换合并到上面的函数中。
Cal的未来版本将自动完成此转换。
Stack Overflow用户
发布于 2013-09-09 08:32:32
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18690593
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号