クリック可能なヒートマップを作成するために、 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>