热点图的深入分析(2)

文章目录
  1. 如何动态载入网页
  2. 服务端拿回对应站点的数据渲染热图
  3. 如何生成对应站点的脚本

为了阅读的连续性,我还是尽快把《热点图的深入分析(2)》 写了,不然感觉会被大家嫌弃,没看(1)的小伙伴我送上地址:传送门

上一篇给大家介绍了热点图数据的收集,那这篇主要是给大伙讲解如何展现,就直接步入正题了


如何动态载入网页

我们需要将原始的网页加载到iframe中,然后用一个遮罩层盖住这个iframe,最后用canvas绘制出热图覆盖在这个上面。

1
2
3
4
5
6
7
8
9
<div id="overflowDiv">
<div id="heatmapArea">
<div id="maskDiv">
</div>
<p>
<iframe src="" id="webPageFrame" frameborder="0" name="webPageFrame" scrolling="no" width="1280"></iframe>
</p>
</div>
</div>

这里我准备了一个id为 webPageFrame 的 iframe 和一个 id为maskDiv 的div。注意这里我给了一个1280像素的宽度,是为了统一分辨率,我们知道用户的客户端分辨率大小是不一样的,同一个位置的点 可能在咱两屏幕上的坐标是有很大区别的,那么如何处理这个问题?有2种方案:

  1. 展现的时候将分辨率设置为选项,分类展现不同分辨率下的热点图,即在页面上放置一个select标签,包含了常用分辨率的几个选项,到时候筛选分辨率,然后动态去给iframe赋值,改变其宽度
  2. 在收集点的数据的时候,根据用户当前的屏幕分辨率去转换点的坐标,例如客户端分辨率w,那么我生成x坐标时候x = parseInt(x * (1280/w ));,我目前就是采用了这种方法,当然说实话这种方法是有误差的,好处就是前端展现的时候可以固定一个尺寸,然后展现所有的数据点。

初始化的时候,我们取得需要载入的URL,动态给iframe赋值。

1
$("#webPageFrame").attr("src", mapurl);

服务端拿回对应站点的数据渲染热图

这里我就直接用伪造的临时数据了,真实的数据大家通过ajax拿回来 然后赋值给下面的data变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var defaultHeight=1000;
$("#webPageFrame").height(defaultHeight);
var points = [];
var max = 0;
var width = 1280;
var height = defaultHeight;
var len = 100;
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
};
$("#maskDiv").css({ "position": "absolute", "top": "0", "left": "0", "background-color": "blanchedalmond", "width": $("#webPageFrame").width(), "height": $("#webPageFrame").height(), "opacity": "0.45" });

if (heatmapInstance == null) {
heatmapInstance = h337.create({
container: document.getElementById("heatmapArea")
});
}
heatmapInstance.setData(data);

上面的代码有几个关键点:

  1. 我为什么定义了一个defaultHeight?他是用来动态设置iframe的高度的,因为我们不知道iframe网页加载完毕后内容的高度,这个涉及到了跨域,很难获得。那么我们怎么确定iframe的高度呢?投机取巧,我们拿到数据点 最大的一个Y值,然后取余四舍五入,defaultHeight=Math.ceil(MaxY/defaultHeight)*defaultHeight。这样做的目的我们没必要看到整个网页的内容,只需要看到最大值所在的区域。
  2. 需要引入heatmap.js ,通过heatmapInstance.setData初始化。
  3. 需要先增加遮罩,最后初始化热图。

如何生成对应站点的脚本

我们会增加很多站点,每个站点的url和id都不同,因此生成的脚本也会有所区别,我们需要将之前收集数据点的代码封装到一个js中,然后在网页中引用,同事初始化 给document绑定事件。

这是一个站点列表

点击编辑的时候弹出一个层来生成对应的脚本

生成脚本

  • clickheat-original.js 表示需要引入到页面的js,也是收集点信息的核心代码
  • clickheatSite 表示站点的ID
  • clickheatGroup 表示组名称
  • clickheatServer 表示需要请求的服务端地址
  • initClickheat() 初始化方法

最后我贴一张生成脚本的方法

将生成的代码粘贴引用到对应的网页中就可以生效啦。。。

热点图的介绍就到这里结束啦,做的过程中也许还有一些细节我没有提到,有什么不懂的可以微信、QQ、邮箱、微博联系我!