やりたいこと
試したこと
ソースコード
JavaScript
// 画像のオブジェクトを取得
var objHeatmapContainerImg = document.getElementById('heatmapContainerImg');// 画像の元サイズと画面に合わせて縮小された画像サイズの比率
var ratio = objHeatmapContainerImg.clientWidth / objHeatmapContainerImg.naturalWidth;var heatmap = h337.create({
// 表示したい要素
container: document.getElementById('heatmapContainer'),
// maxOpacity, radius, blurなどはこの数字をコピペで大丈夫です。
// ヒートマップの点のサイズ
radius: parseInt(75 * ratio),
// 背景色は薄い黒がいいでしょう
backgroundColor: 'rgba(0, 0, 0, 0.1)'
});var vw = objHeatmapContainerImg.clientWidth;
var vh = objHeatmapContainerImg.clientHeight;// #heatmapContainer の左から40、上から40移動した位置に1の度合いのデータを追加
// valueは点の濃さを0~1で指定
heatmap.addData({ x: vw*0.666, y: vh*0.748, value: 0.1 });
heatmap.addData({ x: vw*0.666, y: vh*0.755, value: 0.2 });
heatmap.addData({ x: vw*0.666, y: vh*0.762, value: 0.3 });
heatmap.addData({ x: vw*0.666, y: vh*0.770, value: 0.4 });
heatmap.addData({ x: vw*0.666, y: vh*0.777, value: 0.5 });
heatmap.addData({ x: vw*0.666, y: vh*0.784, value: 0.6 });
heatmap.addData({ x: vw*0.666, y: vh*0.792, value: 0.7 });
heatmap.addData({ x: vw*0.666, y: vh*0.799, value: 0.8 });
heatmap.addData({ x: vw*0.666, y: vh*0.806, value: 0.9 });
heatmap.addData({ x: vw*0.666, y: vh*0.813, value: 1.0 });
HTML
<script type="text/javascript" src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script>
<script type="text/javascript" src="https://s3-ap-northeast-1.amazonaws.com/jscss-pachipachiland/test.js"></script><!-- ヒートマップ用の要素 -->
<div id="heatmapContainer" style="position: relative;">
<img id="heatmapContainerImg" src="http://island.pt.teramoba2.com/images/328/machineMap/5cfcc7a7aff82.jpg?mode=noresize.jpg">
</div>
結果
