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支持自定义的样式方案,网页外包接活具体可看官网api
var 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切图报价所以直接setData
heatmapInstance.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方式的话