Heatmap.js实现热力图

Heatmap.js实现热力图

随着网络应用的交互性越来越强,人们越发注重用户体验,而每个产品的运营,开发人员都想了解用户在使用过程中的真实想法,而恰好,通过捕捉用户的点击分布,绘画热力图,并生成直观可读的数据,成为了大数据研究的不可缺失的一环。

随着网络应用的交互性越来越强,人们越发注重用户体验,而每个产品的运营,开发人员都想了解用户在使用过程中的真实想法,而恰好,通过捕捉用户的点击分布,绘画热力图,并生成直观可读的数据,成为了大数据研究的不可缺失的一环。

因此,特地就此搜索了一番,发现目前用于制作热力图的组件真的是少之又少,大多数是网页植入flash的方式去进行实现,并通过服务器去生成图片,并返回到前端去进行展示,这种传统的方式,个人不太喜欢。

新版本的html5,提供了canvas画图的接口,我估计应该能用canvas实现数据的热力图展现,果不其然,heatmap.js提供了现成的方法类去对数据点进行热力图的制作。

功能调研

引入控件

1
<script type="text/javascript" src="heatmap.js"></script>

下载地址: heatmap.js

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
var config = {
container: document.getElementById('container'),
radius: 100,
maxOpacity: .5,
minOpacity: 0,
blur: .75,
gradient: {
'.5': 'green',
'.8': 'blue',
'.95': 'red'
}
};

如一般控件,都需要一个配置的config对象去修改默认的参数,而heatmap也不例外,相当直观的参数用法:

  • container:容纳热力图的容器,Dom节点;
  • radius:热力图中热力点的半径长度,单位px;
  • maxOpacity:色值最大透明度,取值0到1;
  • minOpacity:色值最小透明度,取值0到1;
  • blur:色值模糊度,取值0到1;
  • gradient:色值渐变范围,可以根据value权重定义色值颜色,支持颜色名和16进制数。

热力图实例化

1
var heatmapInstance = h337.create(config);

也正如一般的控件,需要定义变量将其实例化,上面代码的h337是heatmap定义的全局变量,不过话说这名真的有点像大飞机的编号。

通过调用全局变量”h337”对象下的create()方法进行实例化,在实例化时可以传入上述定义的”config”参数,最后返回一个heatmap实例。

定义数据(集)

1
2
3
4
5
6
var dataPoint ={
x: 100,
y: 100,
radius: 50,
value: 1
}

这里定义了一个heatmap的热力坐标点,对象表示。

1
2
3
4
5
6
7
8
9
10
11
var dataPoints =[{
x: 100,
y: 100,
radius: 100,
value: 10
},{
x: 150,
y: 150,
radius: 100,
value: 10
}]

这里定义了一个heatmap的热力坐标点集合,数组表示。

  • x:热力点的横坐标;
  • y:热力点的纵坐标;
  • radius:热力点的半径宽度;
  • value:色值权重值,和config参数里的gradient变化的百分比率关联,一般value值越大,颜色越接近定义渐变值1的颜色;

增加热点addData()方法

1
heatmapInstance.addData(dataPoints);

通过实例化对象heatmapInstance,调用addData(dataPoints)方法来增加数据到热力图中,其中dataPoints为上面定义点集。

增加热点addData()方法

1
2
3
4
5
6
var dataG = {
max: 10,
min: 0,
data: dataPoints
};
heatmapInstance.setData(dataG);

通过实例化对象heatmapInstance,调用setData(dataG)方法来增加数据到热力图中,其中dataG作为数据对象,设置了数据权重的最大值,最小值和数据点集合。

  • max:数值最大权重值;
  • y:数值最小权重值;
  • data:热力图的数据点集;

通过对上面的方法运用,基本上是可以无解地画出了一个热力图了,但是没图没真相,好吧,我就放张Yan照上来看看吧:

使用后

热力图-展示

对吧,看一下中间的美图,就知道热力图多能展现用户的真实体验了吧,由于该插件只是单纯提供了热力点的绘画,在下篇文章,我会对一些细节优化的点进行讲解,留个小期待吧。