heatmap.js 介绍
Heatmap 是用来呈现一定区域内的 统计 度量，最常见的网站访问热力图就是以特殊高亮的形式 显示 访客热衷的 页面 区域和访客所在的地理区域的图示。
Heatmap.js 这个 JavaScript 库可以实现各种动态热力图的网页，帮助您研究和可视化 用户 的行为。 Heatmap.js V2.0 是目前网络上最先进的热图可视化库。新的2.0版本 Heatmap.js 更快，拥有更强的渲染模块，使用更方便，因此您可以 快速 掌握和扩展 自定义 功能 。
代码
<!DOCTYPE html>
<html>
<head>
< Meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div height: 900px; width: 100%;" id="heatmap"></div>
</body>
<script src="js/heatmap.min.js"></script>
<script type="text/JavaScript">
// 创建 一个 heatmap实例对象
// “h337” 是heatmap.js全局对象的 名称 .可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap 支持 自定义 的样式方案,网页外包接活具体可看官网api
var heatmapInstance = h337.create({
container: document.querySelector('#heatmap'),
});
//构建一些 随机 数据点,网页切图价格这里替换成你的业务数据
var points = [];
var max = 0;
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var len = 300;
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max,val);
var point = {
x: Math.floor(Math.random()*width),
y: Math.floor(Math.random()*height),
value: val
};
points.push(point);
}
var data = {
max: max,
data: points
};
//因为data是一组数据,web切图报价所以直接setData
heatmapInstance.setData(data); //数据绑定还可以使用
</script>
</html>
h337.create(con fig Object)
创建heatmap实例，con fig Object是 一个 json对象，里面有很 多参数
参数详情
container ? 页面 操作div的dom对象，如div的id为test,可以写成
backgroundColor ?画板的背景颜色设置， 支持 rgb(a)，颜色 名称 ，但必须要用引号
gradient ? 设置热点图的光圈颜色，数值为[0,1]，数值大的在光圈内侧，数值相等则靠下的生效，数值设置不分大小顺序，并可以同时设置很多颜色
radius ?设置光圈的半径大小，值>=0,=0取得是 默 认值
opacity ?光圈透明度设置[0,1]，如果值设置了，会重写maxOpacity和mi nop acity的值
网站地址 : http://www.patrick-wied.at/static/heatmapjs/
网站描述: 强大的Web热力图 插件
heatmap.js官方网站
官方网站： http://www.patrick-wied.at/static/heatmapjs/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。