Heatmap.js – 最强大的 Web 动态热图

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

本人英文不好，官网的例子看了好久才看懂

首先看一段代码

 

请先下载 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的值

 h337.create({ 
     container:document.getElementById("text"),
     backgroundColor:'red',    // '#121212'    'rgba(0,102,256,0.2)'
      gradient: {
         '0.5': 'blue',
         '0.8': 'red',
         '0.95': 'white',
         '0.6':'yellow',
         '0.5':'green'
     },
     radius: 10,        // [0,+∞)
    opacity:0.8,
});