heatmap.js可以使用canvas画出来一张漂亮的heatmap。更重要的是它支持数据的动态添加。比如,上图的演示就是一个利用mousemove事件生成heatmap的例子。它会自动的刷新canvas,实时显示鼠标运动的heatmap。
打开heatmap.js发现里面的代码并不多,但是真的很精悍。
页面代码请点击这里[heatmap.js],下面我做一个code的分析吧,看了那么久了,写下来一方面是自己加深记忆,另一方面就是可以更好的理清思路吧。[写就是为了更好的思考]么。
code中包含两个主要的对象,store heatmap。store是heatmap的数据部分,算是model吧。而heatmap则是真正绘制图像的对象。heatmap部分可以被配置,可以自定义很多的内容,尤其是配色也是可以配置的,那么我们除了做出来正真的heatmap的效果之外还可以做出来各种各样不错的效果的。
首先看看存储部分吧,比较简单,注释也比较清楚。
1 //store object constructor
2 //a heatmap contains a store
3 //the store has to know about the heatmap
4 //in order to trigger heatmap updates when
5 //datapoints get added
6 functionstore(hmap){7 var _ ={8 //data is a two dimensional array
9 //a datapoint gets saved as data[point-x-value][point-y-value]
10 //the value at [point-x-value][point-y-value]
11 //is the occurrence of the datapoint
12 data: [],13 //tight coupling of the heatmap object
14 heatmap: hmap15 };16 //the max occurrence - the heatmaps radial gradient
17 //alpha transition is based on it
18 this.max = 1;19 this.get &#