html在线热点工具,Heatmap.js 强大的 HTML5 画布 WEB 网页在线热点图插件 - 资源分享...

Heatmap.js 可以用来生成基于用户自定义数据上的 Web 热点图，使用内嵌的 HTML5 Canvas 画布元素，heatmap.js 可以使用 Canvas 画出来一张漂亮的 heatmap。更重要的是它支持数据的动态添加。比如下图的演示就是一个利用 MouseMove 事件生成 heatmap 的例子。它会自动的刷新 Canvas，实时显示鼠标运动的 heatmap。

Heatmap 是用来呈现一定区域内的统计数量，最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页，帮助您研究和可视化用户的行为。 Heatmap.js V2.0 是目前网络上最先进的热图可视化库。新的2.0版本 Heatmap.js 更快，拥有更强的渲染模块，使用更方便，因此您可以快速掌握和扩展自定义功能。

一个简单的例子

只有几行代码就可以创建自己的交互式网络热图：

var heatmap = h337.create({

container: domElement

});

heatmap.setData({

max: 5,

data: [{ x: 10, y: 15, value: 5}, ...]

});

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

代码分析

下面是一份网站的代码，看了那么久了，写下来一方面是自己加深记忆，另一方面就是可以更好的理清思路吧。 code 中包含两个主要的对象，store 和 heatmap。store 是 heatmap 的数据部分，算是 mode l吧。而 heatmap 则是真正绘制图像的对象。heatmap 部分可以被配置，可以自定义很多的内容，尤其是配色也是可以配置的，那么我们除了做出来正真的