gpt4 book ai didi

javascript - 即使是简单的热图,我也无法让 heatmap.js 工作

转载 作者:行者123 更新时间:2023-11-29 21:53:30 25 4
gpt4 key购买 nike

我是一个 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>

请有人告诉我哪里出错了。谢谢!

最佳答案

不少小错误:

  1. 您需要在 Canvas 周围放置一个包装器元素并将其设置为容器
  2. 您还应该将外部脚本和内联脚本放在单独的 script 标记中。
  3. 数据点的值应该叫做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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com