我是 JavaScript 新手，我正在尝试使用 open source heatmap.js framework (by Patrick Wied)创建热图，但即使对于最基本的热图，它也不会显示。这是我正在使用的测试代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmap Test Code</title>
</head>
<body>
<canvas id="heatMap" width = "1024" height = "742" style="position:absolute; left: 0; top: 0"></canvas>
<script type="text/javascript" src="js/heatmap.js">
var heatmapInstance = h337.create({
container: document.getElementById('heatMap')
});
var testData = {
max: 100,
min: 0,
data: [{x: 807, y: 583, count: 65}, {x: 597, y: 285, count: 51}, {x: 217, y: 449, count: 73}, {x: 377, y: 656, count: 58}, {x: 467, y: 509, count: 47}, {x: 487, y: 164, count: 46}, {x: 247, y: 194, count: 35}]
};
heatmapInstance.setData(testData);
</script>
</body>
</html>
请有人告诉我哪里出错了。谢谢!
最佳答案
相当多的小错误:
- 您需要在 Canvas 周围放置一个包装元素并将其设置为
容器。 - 您还应该将外部脚本和内联脚本放在单独的
script标记中。 - 数据点的值应称为
value，而不是count
导致:
...
<body>
<div id='container' style='position: relative; height: 742px'>
<canvas id="heatMap" width = "1024" height = "742" style="position:absolute; left: 0; top: 0"></canvas>
</div>
<script type="text/javascript" src="js/heatmap.js"> </script>
<script>
var heatmapInstance = h337.create({
container: document.getElementById('container')
});
...
最小工作样本:http://jsbin.com/latepa
关于javascript - 即使对于简单的热图，我也无法让 heatmap.js 工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27747145/