Heatmap.js – 最強大的 Web 動態熱圖
最新公司項目需要用到熱力圖，在百度上搜下，了解到heatmap.js這款神器。然后搜了下例子，卻很難搜到馬上出效果的例子，特此寫一篇heatmap.js基礎教程。
官網：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
本人英文不好，官網的例子看了好久才看懂
首先看一段代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 width:600px; height:400px;border: 1px solid;border-color: grey; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="heatmap"></div> 14 </body> 15 <script src="js/heatmap.js"></script> 16 <script type="text/javascript"> 17 // 創建一個heatmap實例對象 18 // “h337” 是heatmap.js全局對象的名稱.可以使用它來創建熱點圖實例 19 // 這里直接指定熱點圖渲染的div了.heatmap支持自定義的樣式方案,網頁外包接活具體可看官網api 20 var heatmapInstance = h337.create({ 21 container: document.querySelector('#heatmap'), 35 }); 36 //構建一些隨機數據點,網頁切圖價格這里替換成你的業務數據 37 var points = []; 38 var max = 0; 39 var width = 600; 40 var height = 400; 41 var len = 200; 42 while (len--) { 43 var val = Math.floor(Math.random()*100); 44 max = Math.max(max, val); 45 var point = { 46 x: Math.floor(Math.random()*width), 47 y: Math.floor(Math.random()*height), 48 value: val 49 }; 50 points.push(point); 51 } 52 var data = { 53 max: max, 54 data: points 55 }; 56 57 //因為data是一組數據,web切圖報價所以直接setData 58 heatmapInstance.setData(data); //數據綁定還可以使用 81 </script> 82 </html>
請先下載 heatmap.js ,上面的代碼復制出去就能看到效果了。
API方法，屬性
h337.create(configObject)
創建heatmap實例，configObject是一個json對象，里面有很多參數
參數詳情
container 頁面操作div的dom對象，如div的id為test,可以寫成
backgroundColor 畫板的背景顏色設置，支持rgb(a)，顏色名稱，但必須要用引號
gradient 設置熱點圖的光圈顏色，數值為[0,1]，數值大的在光圈內側，數值相等則靠下的生效，數值設置不分大小順序，並可以同時設置很多顏色
radius 設置光圈的半徑大小，值>=0,=0取得是默認值
opacity 光圈透明度設置[0,1]，如果值設置了，會重寫maxOpacity和minOpacity的值
1 h337.create({ 2 container:document.getElementById("text"), 3 backgroundColor:'red', // '#121212' 'rgba(0,102,256,0.2)' 4 gradient: { 5 '0.5': 'blue', 6 '0.8': 'red', 7 '0.95': 'white', 8 '0.6':'yellow', 9 '0.5':'green' 10 }, 11 radius: 10, // [0,+∞) 12 opacity:0.8, 13 });