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

Question

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

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

Answer 1

不少小错误：

您需要在 canvas 周围放置一个包装器元素并将其设置为 container。
您还应该将外部脚本和内联脚本放在单独的 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

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

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

javascript

heatmap