Heatmap.js熱力圖
阿新 • • 發佈：2018-12-15
官網：HTTP：//www.patrick-wied.at/static/heatmapjs/
API：HTTP：//www.patrick-wied.at/static/heatmapjs/docs.html
官網例子：HTTP：//www.patrick-wied.at/static/heatmapjs/examples.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <div style="height: 900px; width: 100%;" id="heatmap"></div> </body> <script src="js/heatmap.min.js"></script> <script type="text/javascript"> // 建立一個heatmap例項物件 // “h337” 是heatmap.js全域性物件的名稱.可以使用它來建立熱點圖例項 // 這裡直接指定熱點圖渲染的div了.heatmap支援自定義的樣式方案,網頁外包接活具體可看官網api var heatmapInstance = h337.create({ container: document.querySelector('#heatmap'), }); //構建一些隨機資料點,網頁切圖價格這裡替換成你的業務資料 var points = []; var max = 0; var width = document.body.clientWidth; var height = document.body.clientHeight; var len = 300; while (len--) { var val = Math.floor(Math.random()*100); max = Math.max(max, val); var point = { x: Math.floor(Math.random()*width), y: Math.floor(Math.random()*height), value: val }; points.push(point); } var data = { max: max, //max值表示資料中引數最大的一個，也可以說是熱力圖中顏色最深的一個，是一個標準 data: points }; //因為data是一組資料,web切圖報價所以直接setData heatmapInstance.setData(data); //資料繫結還可以使用 </script> </html>
