我无法获得热图.js即使是简单的热图也可以工作

I'm unable to get heatmap.js to work even for a simple heatmap

本文关键字：简单 也可以 工作 即使是 js      更新时间：2023-09-26

我是一个JavaScript新手，我正在尝试使用开源热图.js框架（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. 您需要在画布周围放置一个包装器元素并将其设置为 container .
  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

相关文章：