heatmap.js 一个用canvas画热力图的利器
2015-08-05 10:34
731 查看
转载自:http://1.aisensiy.sinaapp.com/2011/12/heatmapjs/
最近做的一个东西,需要以热力图的形式去展示数据。于是就想找一找热力图的算法。找到了很多生成热力图的工具,它们的算法几乎是一致的,都是首先用alpha透明度方式画发散的圆在页面上,然后利用一个调色板,把对应的透明度改成相应的颜色即可。
一个很不错的中文的算法介绍在这里
浅谈Heatmap
一个英文的在这里
How to Make Heat Map
虽说我本来打算的是找到算法自己去实现一下的,但是一不小心我发现万能的google在搜索记录里面给了我一个heatmap.js的链接。我好奇的点进去发现这就是我所需要实现的东西…
![](http://aisensiy-wordpress.stor.sinaapp.com/uploads/2011/12/heatmap-1024x537.png)
heatmap.js可以使用canvas画出来一张漂亮的heatmap。更重要的是它支持数据的动态添加。比如,上图的演示就是一个利用mousemove事件生成heatmap的例子。它会自动的刷新canvas,实时显示鼠标运动的heatmap。
打开heatmap.js发现里面的代码并不多,但是真的很精悍。
页面代码请点击这里[heatmap.js],下面我做一个code的分析吧,看了那么久了,写下来一方面是自己加深记忆,另一方面就是可以更好的理清思路吧。[写就是为了更好的思考]么。
code中包含两个主要的对象,store heatmap。store是heatmap的数据部分,算是model吧。而heatmap则是真正绘制图像的对象。heatmap部分可以被配置,可以自定义很多的内容,尤其是配色也是可以配置的,那么我们除了做出来正真的heatmap的效果之外还可以做出来各种各样不错的效果的。
首先看看存储部分吧,比较简单,注释也比较清楚。
在model里面,支持一次添加一个数据点。这也是heatmapjs支持实时绘制的关键。一旦max值有变化就会重新绘制整个canvas。
下面就是画的部分了。这里是最重要的两个方法,drawAlpha colorize
策略很简单,
利用当前点的count除以最大的count获取的结果做为alpha值。然后做一个RadialGradient画出来这个图就可以了。那么由于多个相近的点aphla效果的叠加就可以获取想要的效果了。这里就是canvas的nb之处了,看别的语言实现都是采用将一个这样的png图片画到画板上,但是canvas就可以直接实现这个效果。
![](http://aisensiy-wordpress.stor.sinaapp.com/uploads/2011/12/src_Tempest_plot.png)
有了这幅aphla版本的heatmap 我们利用一个配送版做着色就大功告成了。
这里又用到了上面所说的canvas的nb之处,在通常需要一个图片作为配色板的时候canvas可以自己做出来一个缓存起来。
这种方式也给我们实现各种各样的配色提供了方便,我们只需要改变那个 **gradient** 就可以了。
还是很简练的吧,看到heatmap.js的风格,真的像是在看一个不错的艺术品一样。强烈推荐一看~
最近做的一个东西,需要以热力图的形式去展示数据。于是就想找一找热力图的算法。找到了很多生成热力图的工具,它们的算法几乎是一致的,都是首先用alpha透明度方式画发散的圆在页面上,然后利用一个调色板,把对应的透明度改成相应的颜色即可。
一个很不错的中文的算法介绍在这里
浅谈Heatmap
一个英文的在这里
How to Make Heat Map
虽说我本来打算的是找到算法自己去实现一下的,但是一不小心我发现万能的google在搜索记录里面给了我一个heatmap.js的链接。我好奇的点进去发现这就是我所需要实现的东西…
![](http://aisensiy-wordpress.stor.sinaapp.com/uploads/2011/12/heatmap-1024x537.png)
heatmap.js可以使用canvas画出来一张漂亮的heatmap。更重要的是它支持数据的动态添加。比如,上图的演示就是一个利用mousemove事件生成heatmap的例子。它会自动的刷新canvas,实时显示鼠标运动的heatmap。
打开heatmap.js发现里面的代码并不多,但是真的很精悍。
页面代码请点击这里[heatmap.js],下面我做一个code的分析吧,看了那么久了,写下来一方面是自己加深记忆,另一方面就是可以更好的理清思路吧。[写就是为了更好的思考]么。
code中包含两个主要的对象,store heatmap。store是heatmap的数据部分,算是model吧。而heatmap则是真正绘制图像的对象。heatmap部分可以被配置,可以自定义很多的内容,尤其是配色也是可以配置的,那么我们除了做出来正真的heatmap的效果之外还可以做出来各种各样不错的效果的。
首先看看存储部分吧,比较简单,注释也比较清楚。
![](http://aisensiy-wordpress.stor.sinaapp.com/uploads/2011/12/src_Tempest_plot.png)
有了这幅aphla版本的heatmap 我们利用一个配送版做着色就大功告成了。
这里又用到了上面所说的canvas的nb之处,在通常需要一个图片作为配色板的时候canvas可以自己做出来一个缓存起来。
相关文章推荐
- js学习笔记之事件处理模型
- jsp实现文件上传
- js中JSON对象和字符串对象相互转化
- ajax获取后台传递的json数据
- 文章标题
- js页面传值乱码以及url获取方式
- js继承如何实现继承?
- JSP基本语法
- JavaScript的作用域与作用域链
- JavaScript 常用方法总结
- javascript的this关键字总结
- javascript继承形成史
- 【总结】IE和Firefox的Javascript兼容性总结(转)
- JavaScript闭包
- JavaScript的加载和运行
- JavaScript为unicode编码转换为中文(转)
- 编写高质量JavaScript代码
- 20个最常用的javascript方法函数
- JSP
- JavaScript使用FileSystemObject对象写入文本文件内容的方法