Heatmap.js可点击的热图

Question

我正在使用Heatmap.js创建可点击的热图。 我尝试以下代码失败。

图例正在显示，但是在画布上单击并不会像预期的那样生成热图。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="heatmap.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
// heatmap configuration
var config = {
element: document.getElementById("heatmapArea"),
radius: 30,
opacity: 50,
legend: {
position: 'br',
title: 'Example Distribution'
}
};
//creates and initializes the heatmap
var heatmap = h337.create(config);

document.getElementById("heatmapArea").onclick = function(e){
heatmap.store.addDataPoint(e.layerX, e.layerY, 1);
};
};

</script>

<div id ="heatmapArea">

  </div>
</body>
</html>

Answer 1

在他们的示例中，看起来他们的div包含一些样式定义和一个类：

<div id="heatmapArea" class="well" style="width:610px;padding:0;height:400px;cursor:pointer;position:relative;"></div>

但是，您可能只需要向div添加height和width 。

这是一个例子

Heatmap.js可点击的热图

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-06-14 00:33:44

Heatmap.js可点击的热图

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-06-14 00:33:44

解决方案1
1 已采纳 2013-06-14 00:33:44