java生成png热力图_heatmap.js 一个用canvas画热力图的利器

0818b9ca8b590ca3270a3433284dd417.png

heatmap.js可以使用canvas画出来一张漂亮的heatmap。更重要的是它支持数据的动态添加。比如,上图的演示就是一个利用mousemove事件生成heatmap的例子。它会自动的刷新canvas,实时显示鼠标运动的heatmap。

打开heatmap.js发现里面的代码并不多,但是真的很精悍。

页面代码请点击这里[heatmap.js],下面我做一个code的分析吧,看了那么久了,写下来一方面是自己加深记忆,另一方面就是可以更好的理清思路吧。[写就是为了更好的思考]么。

code中包含两个主要的对象,store heatmap。store是heatmap的数据部分,算是model吧。而heatmap则是真正绘制图像的对象。heatmap部分可以被配置,可以自定义很多的内容,尤其是配色也是可以配置的,那么我们除了做出来正真的heatmap的效果之外还可以做出来各种各样不错的效果的。

首先看看存储部分吧,比较简单,注释也比较清楚。

0818b9ca8b590ca3270a3433284dd417.png

0818b9ca8b590ca3270a3433284dd417.png

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 &#

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值