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

相当多的小错误：

您需要在画布周围放置一个包装元素，并将其设置为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

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

1 个答案: