热力图实现-heatmap.js 代码示例
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 });
