Heatmap.js 一个强大简易的web动态热图

最近在做热力图效果，背景图上绘制热力图，最开始使用的事Echarts，但是Echarts绘制是基于map，还其他一些第三方的库也很多基于map，还要进行坐标转化，麻烦的一批；最后还是研究一下heatmap.js这个库。
by the way：需求迫于无奈使用了阿里的G2，交互效果勉强符合，但是看他们的API的时候，真的是麻烦的一批啊，API很多很乱，慎用。

接下来看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

直接上demo代码

<head><meta charset="UTF-8"><title></title><style>div {width: 600px;height: 400px;border: 1px solid;border-color: grey;}</style>
</head><body><div id="heatmap"></div>
</body>
<script src="js/heatmap.js"></script>
<script type="text/javascript">// 创建一个heatmap实例对象// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网apivar heatmapInstance = h337.create({container: document.querySelector('#heatmap'),// canvas: document.querySelector('#heatmap'), // 其实还可以传canvas对象，看一下源码就知道了，源码很显而易见，代码不多，逻辑清晰，有那么一丝丝感觉有些地方写的不好backgroundColor: '#fff',gradient: { // 数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色'0': 'blue','0.2': 'blue','0.4': 'green','0.6': 'green','0.8': 'yellow','1': 'red'},// radius: 40, // 设置光圈的半径大小，值>=0,=0取得是默认值// opacity: 0.7, // 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值maxOpacity: .5, minOpacity: 0,// blur: .9});//构建一些随机数据点,网页切图价格这里替换成你的业务数据var points = [];var max = 0;var width = 600;var height = 400;var len = 200;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,data: points};57 //因为data是一组数据,web切图报价所以直接setDataheatmapInstance.setData(data); //数据绑定还可以使用
</script></html>

heatma.js 要自己下载

API大概唠叨一下：

API一定要去官网去看一下，官网写的很简单，但是也很简单明了。

创建heatmap实例，configObject是一个json对象，里面有很多参数：

container 页面操作div的dom对象，如div的id为test,可以写成
backgroundColor 画板的背景颜色设置，支持rgb(a)，颜色名称，但必须要用引号
gradient 设置热点图的光圈颜色，数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色
radius 设置光圈的半径大小，值>=0,=0取得是默认值
opacity 光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和minOpacity的值

截图代码我自己稍微改了改，无伤大雅，就是告诉大家，可以灵活使用，如果运用require方式的话