一种网页热力图绘制方法及相关装置与流程

本申请涉及计算机技术领域，特别涉及一种网页热力图绘制方法、网页热力图绘制装置、计算机设备以及计算机可读存储介质。

背景技术：

数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。热力图是在数据可视化中的一种比较常见的表现形式，主要用于表现某个位置与其他位置在某种数量叠加上的差距，绘制热力图的方式都是至少通过两个维度的数据来实现，这两个维度就是位置和叠加量，通过这两个维度的信息，确定了视觉上的颜色渐变的展示位置和初始颜色深度。

而网页的热力图一般被用于表现网页访问者对于网页具体位置进行行为操作和关注度的数据可视化方案。以便观察用户在使用网页时，主要点击的位置是什么，用户在使用网页时注意力集中在什么地方。最后通过网页热力图的结果对页面内容进行优化，提升网页的用户体验。具体的，现有技术中根据热力图的基本实现方式，网页的热力图一般需要依赖访问者对网页的点击行为目标坐标信息以及这些坐标信息的叠加量绘制出网页热力图。以直接获取坐标点再进行绘制操作，需要在绘制时获取页面中的坐标点。但是，在一些情况中获取不到准确的坐标点，就无法绘制出准确的热力图。并且，获取到的坐标点是以当前页面尺寸下记录的坐标点，但是当页面尺寸发生变化是坐标点的坐标系就发生了变化，原有的坐标点无法使用在该坐标系下，则需要重新获取坐标点，降低了热力图绘制的效率。

因此，如何提高绘制网页热力图的准确性和效率是本领域技术人员关注的重点问题。

技术实现要素：

本申请的目的是提供一种网页热力图绘制方法、网页热力图绘制装置、计算机设备以及计算机可读存储介质，通过采用目标网页中的元素转换为每个坐标点集合中的坐标点，进一步进行热力图绘制，而不是直接获取坐标点，提高热力图的准确性和绘制效率。

为解决上述技术问题，本申请提供一种网页热力图绘制方法，包括：

将获取到的目标网页的元素进行图形转换处理得到多个规则图形；

根据预设分类精度将所述多个规则图形在所述目标页面中对应的坐标点进行分类，得到多个坐标点集合；

根据每个坐标点对应元素的热度值将每个坐标点集合中的坐标点的热度值进行叠加计算，得到每个坐标点的融合热度值；

根据每个坐标点及对应的融合热度值进行热力图绘制，得到网页热力图。

可选的，将获取到的目标网页的元素进行图形转换处理得到多个规则图形，包括：

从服务器中获取所述目标网页的元素以及元素对应的热度值；

根据多个元素对应的热度值对所有元素进行筛选，得到多个待绘制元素；

根据图形构成规则对所述多个待绘制元素进行图形转换处理，得到所述多个规则图形。

可选的，根据预设分类精度将所述多个规则图形在所述目标页面中对应的坐标点进行分类，得到多个坐标点集合，包括：

根据所述预设分类精度将所述目标网页划分为多个网格；

将所述多个规则图形在所述目标页面中对应的坐标点填入对应的网格；

将每个网格作为一个坐标点集合，得到所述多个坐标点集合。

可选的，将所述多个规则图形在所述目标页面中对应的坐标点填入对应的网格，包括：

根据所述目标页面的坐标系对每个所述规则图形填入正态分布的多个坐标点；将所述多个坐标点作为该规则图形对应的坐标点；

将所有规则图形对应的坐标点填入对应的网格。

可选的，根据每个坐标点对应元素的热度值将每个坐标点集合中的坐标点的热度值进行叠加计算，得到每个坐标点的融合热度值，包括：

将每个坐标点对应元素的热度值赋值为该坐标点的热度值；

将每个坐标点集合中所有坐标点的热度值相加，得到该坐标点集合对应的集合热度值；

将每个坐标点集合的集合热度值赋值为该坐标点集合中所有坐标点的融合热度值。

可选的，根据每个坐标点及对应的融合热度值进行热力图绘制，得到网页热力图，包括：

按照预设阈值对每个坐标点及对应的融合热度值进行热力图绘制，得到所述网页热力图。

可选的，还包括：

当接收到所述网页热力图的交互指令时，将所述目标网页的网页结构元素进行复制，得到交互副本；

将所述交互副本设置为透明，并覆盖在所述网页热力图的上层，得到交互热力图；

根据所述交互指令对所述交互热力图执行交互操作。

本申请还提供一种网页热力图绘制装置，包括：

图形转换模块，用于将获取到的目标网页的元素进行图形转换处理得到多个规则图形；

坐标点分类模块，用于根据预设分类精度将所述多个规则图形在所述目标页面中对应的坐标点进行分类，得到多个坐标点集合；

热度叠加融合模块，用于根据每个坐标点对应元素的热度值将每个坐标点集合中的坐标点的热度值进行叠加计算，得到每个坐标点的融合热度值；

热力图绘制模块，用于根据每个坐标点及对应的融合热度值进行热力图绘制，得到网页热力图。

本申请还提供一种计算机设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如上所述的网页热力图绘制方法的步骤。

本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的网页热力图绘制方法的步骤。

本申请所提供的一种网页热力图绘制方法，包括：将获取到的目标网页的元素进行图形转换处理得到多个规则图形；根据预设分类精度将所述多个规则图形在所述目标页面中对应的坐标点进行分类，得到多个坐标点集合；根据每个坐标点对应元素的热度值将每个坐标点集合中的坐标点的热度值进行叠加计算，得到每个坐标点的融合热度值；根据每个坐标点及对应的融合热度值进行热力图绘制，得到网页热力图。

通过将目标网页中的元素转换为多个规则图形，然后将每个规则图形在目标页面中的坐标点进行分类，得到多个坐标点集合，也就是从目标页面的元素中获取到热力图计算采用的坐标点，而不是直接获取坐标点，一方面对于用户坐标点的获取更加全面，另一方面当尺寸发生变化元素的位置也会相应的变化，可以保持坐标点的正确性，最后将坐标点集合中的热度进行叠加计算，得到每个坐标点的融合热度值实现热力图绘制操作，使热力图显示的更加准确，避免尺寸变化的问题，同时采用元素进行计算，而不是请求多个坐标点的数据，提高热力图的绘制效率。

本申请还提供一种网页热力图绘制装置、计算机设备以及计算机可读存储介质，具有以上有益效果，在此不做赘述。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请实施例所提供的一种网页热力图绘制方法的流程图；

图2为本申请实施例所提供的一种网页热力图绘制装置的结构示意图。

具体实施方式

本申请的核心是提供一种网页热力图绘制方法、网页热力图绘制装置、计算机设备以及计算机可读存储介质，通过采用目标网页中的元素转换为每个坐标点集合中的坐标点，进一步进行热力图绘制，而不是直接获取坐标点，提高热力图的准确性和绘制效率。

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

现有技术中，根据热力图的基本实现方式，网页的热力图一般需要依赖访问者对网页的点击行为目标坐标信息以及这些坐标信息的叠加量绘制出网页热力图。以直接获取坐标点再进行绘制操作，需要在绘制时获取页面中的坐标点。但是，在一些情况中获取不到准确的坐标点，就无法绘制出准确的热力图。并且，获取到的坐标点是以当前页面尺寸下记录的坐标点，但是当页面尺寸发生变化是坐标点的坐标系就发生了变化，原有的坐标点无法使用在该坐标系下，则需要重新获取坐标点，降低了热力图绘制的效率。

因此，为解决上述问题，本申请提供了一种网页热力图绘制方法，通过将目标网页中的元素转换为多个规则图形，然后将每个规则图形在目标页面中的坐标点进行分类，得到多个坐标点集合，也就是从目标页面的元素中获取到热力图计算采用的坐标点，而不是直接获取坐标点，一方面对于用户坐标点的获取更加全面，另一方面当尺寸发生变化元素的位置也会相应的变化，可以保持坐标点的正确性，最后将坐标点集合中的热度进行叠加计算，得到每个坐标点的融合热度值实现热力图绘制操作，使热力图显示的更加准确，避免尺寸变化的问题，同时采用元素进行计算，而不是请求多个坐标点的数据，提高热力图的绘制效率。

以下通过一个实施例，对本申请提供的一种网页热力图绘制方法进行说明。

请参考图1，图1为本申请实施例所提供的一种网页热力图绘制方法的流程图。

本实施例中，该方法可以包括：

s101，将获取到的目标网页的元素进行图形转换处理得到多个规则图形；

本步骤旨在将目标网页中的元素转换为规则图形。由于网页中的元素存在不同的形状，有可能是规则形状，也可能是不规则形状，为了避免不同的形状对热力图中的热度值计算造成影响，本步骤中将这些元素进行图形转换为多个规则图形。可以是将每个元素转换为相同的规则图形，例如将所有的元素转换为矩形。还可以是将每个元素转换为相适应的规则图形，例如，将适合圆形的元素转换为圆形，将适合矩形的转换为矩形。可以根据实际情况选择最合适的规则图形，在此不做具体限定。

具体的，其中，图形转换处理的具体处理方式可以根据不同的规则图形进行变换。例如，转换为圆形的处理方式和转换为矩形的处理方式之间存在区别，需要根据转换的对象做具体限定。以转换为矩形为例，本步骤中首先通过浏览器的原生方法获取元素的4个顶点在网页中的绝对位置坐标，然后通过连接4个坐标点进行形状闭合，再进行二分递归法，将闭合的4边形转换成矩阵。其中，矩阵的单位粒度可以根据实际情况进行设置，默认可以为5px的粒度。

因此，进一步本步骤可以包括：

步骤1，从服务器中获取目标网页的元素以及元素对应的热度值；

步骤2，根据多个元素对应的热度值对所有元素进行筛选，得到多个待绘制元素；

步骤3，根据图形构成规则对多个待绘制元素进行图形转换处理，得到多个规则图形。

可见，本可选方案中首先获取到的每个元素对应的热度值，而不是获取到每个坐标点对应的热度值，减少了从服务器获取数据的数据量，提高了信息获取的效率。然后，将该多个元素进行筛选得到多个待绘制元素，也就是将没有对应热度值的元素进行排除，剩余的就是需要进行绘制操作的待绘制元素，减少计算机进行处理的数据量，减低性能消耗。最后再对这些待绘制元素进行图形转换处理，得到多个规则图形。

s102，根据预设分类精度将多个规则图形在目标页面中对应的坐标点进行分类，得到多个坐标点集合；

在s101的基础上，本步骤旨在将每个规则图形对应的坐标点按照坐标位置进行分类，得到多个坐标点集合。其中，预设分类精度是指每个坐标点集合的坐标大小。例如，如果以网格作为每个坐标点集合，那么该网络的长宽高就是对应的分类精度。如果预先设置的分类精度越高那么网格的长宽高就越小。本步骤中分类的目的主要是确定每个坐标点集合中叠加的坐标点。因此，本步骤中直接进行分类。

具体的，如果以网格为分类标准，那么本步骤可以包括：

步骤1，根据预设分类精度将目标网页划分为多个网格；

步骤2，将多个规则图形在目标页面中对应的坐标点填入对应的网格；

步骤3，将每个网格作为一个坐标点集合，得到多个坐标点集合。

可见，本可选方案中首先是将目标页面划分为多个网格。其中，网格的大小可以根据精度进行确定。然后，将每个规则图形对应的坐标点填入对应的网格中。其中，每个规则图形对应的坐标点是指在该规则图形中分布的元素坐标点集合。根据不同的要求，该元素坐标点集合的坐标点可以是分均分布，也可以是非平均分布，还可以是以图形中点为中心进行正态分布。如果采用非平均分布可以提高热点图表示热力分布的准确性。最后，将每个网络对应的坐标点作为一个坐标点集合，得到多个坐标点集合。

可选的，该可选方案中的步骤2可以包括：

根据目标页面的坐标系对每个规则图形填入正态分布的多个坐标点；将多个坐标点作为该规则图形对应的坐标点；将所有规则图形对应的坐标点填入对应的网格。

可见，该可选方案主要是将每个坐标点集合中的坐标点进行正态分布。

s103，根据每个坐标点对应元素的热度值将每个坐标点集合中的坐标点的热度值进行叠加计算，得到每个坐标点的融合热度值；

在s102的基础上，本步骤旨在按照每个坐标点集合中的所有坐标点的热度值进行叠加计算，得到每个坐标点的融合热度值。也就是，进行热度融合处理。具体的是将每个坐标点集合中的所有热度值相加，得到总的热度值再赋值给每个在该坐标点集合中的坐标。

具体的，本步骤可以包括：

步骤1，将每个坐标点对应元素的热度值赋值为该坐标点的热度值；

步骤2，将每个坐标点集合中所有坐标点的热度值相加，得到该坐标点集合对应的集合热度值；

步骤3，将每个坐标点集合的集合热度值赋值为该坐标点集合中所有坐标点的融合热度值。

可见，本步骤最后就是得到每个坐标点，以及该坐标点融合了所有坐标点热度值后的融合热度值。

s104，根据每个坐标点及对应的融合热度值进行热力图绘制，得到网页热力图。

在s103的基础上，本步骤旨在根据每个坐标点对应的融合热度值进行热力图绘制，得到网页热力图。在获取到每个坐标点以及对应的融合热度值的基础上，本步骤可以采用现有技术提供的任意一种热力图绘制方法，在此不做赘述。

可选的，本步骤可以包括：

按照预设阈值对每个坐标点及对应的融合热度值进行热力图绘制，得到网页热力图。

此外，本实施例还可以包括：

步骤1，当接收到网页热力图的交互指令时，将目标网页的网页结构元素进行复制，得到交互副本；

步骤2，将交互副本设置为透明，并覆盖在网页热力图的上层，得到交互热力图；

步骤3，根据交互指令对交互热力图执行交互操作。

可见，本可选方案中主要是对在绘制出热力图的基础上，提供一种交互方法。该交互方法可以避免热力图的影响对目标网页直接进行交互操作。

需要说明的是，本实施例中说明的热度值可以是点击数，也可以是关注度，还可以是其他衡量被使用量的维度。并不唯一，在具体绘制中可以根据不同的需要进行替换。

综上，本实施例通过将目标网页中的元素转换为多个规则图形，然后将每个规则图形在目标页面中的坐标点进行分类，得到多个坐标点集合，也就是从目标页面的元素中获取到热力图计算采用的坐标点，而不是直接获取坐标点，一方面对于用户坐标点的获取更加全面，另一方面当尺寸发生变化元素的位置也会相应的变化，可以保持坐标点的正确性，最后将坐标点集合中的热度进行叠加计算，得到每个坐标点的融合热度值实现热力图绘制操作，使热力图显示的更加准确，避免尺寸变化的问题，同时采用元素进行计算，而不是请求多个坐标点的数据，提高热力图的绘制效率。

以下通过另一具体的实施例，对本申请提供的一种网页热力图绘制方法做进一步说明。

本实施例中，该方法可以包括：

步骤1，从服务器获取每个元素的点击数(或者关注度、或者其他衡量被使用量的维度)；

步骤2，客户端扫描这些元素；

步骤3，将元素通过预设算法转成矩阵；

步骤4，对整个网页进行热度网格划分；

步骤5，将矩阵所对应的坐标填入网格，并且每个坐标都赋上了元素的初始点击数(或者关注度、或者其他衡量被使用量的维度)作为能量初始值；

步骤6，将每个网格中所包含的坐标的能量值汇总，作为网格能量值；

步骤7，将网格能量值赋值到网格中每个坐标点的融合能量值；

步骤8，将每个坐标点和对应的融合能量值作为热力图绘制信息；

步骤9，根据该热力图绘制信息进行热力图绘制操作。

具体的，本实施例中网页元素位置和形状区块的获取方法可以包括：首先通过元素热度信息，识别出需要绘制热度的元素，为了降低多余的浏览器性能消耗。然后将这些元素进行位置和形状区域的获取操作。具体的，可以通过浏览器的原生方法获取元素的4个顶点在网页中的绝对位置坐标，然后通过连接4个坐标点进行形状闭合，再进行二分递归法，将闭合的4边形转换成矩阵。其中，矩阵的单位粒度可以根据实际情况进行设置，默认为5px的粒度。

此外，由于普通的热力图的绘制是通过坐标和坐标点所对应的热度作为基础数据进行绘制的，单纯的坐标并不能体现叠加效果，因为坐标点完全重合的几率微乎其微，所以需要有相似度叠加的规则，通过对网页进行网格划分，网格的大小代表了叠加单位的精准度，所处在相同网格内的各坐标所对应的热度值将累加。

获取到需要绘制热力图的元素的矩阵信息后，获取各区块覆盖情况的信息。也就是，将需要元素所对应的矩阵中的所有坐标点转换成一个坐标点的数组，将所有收集到的坐标点放入到事先设定好的叠加规则网格中，进行坐标点的热度叠加处理。通俗的讲，就是将处于相同网格内的坐标定义为覆盖。

最后，将矩阵信息和覆盖信息转换成热力图绘制信息，并进行热力图绘制。具体的是，获取所有的坐标点以及每个坐标点的热度值，然后进行热力图的绘制。可以选择通过浏览器的hmtlcanvas对象进行绘制。即遍历所有的坐标点以及每个坐标点的热度进行点的绘制，并且根据实际情况设置渐变样式的阈值，然后根据热度绘制点的渐变初始颜色。

此外，在此基础上可以对热力图进行交互处理。主要是通过对原始网页结构元素的复制，生成一份与原始网页结构完全相同的元素对象，并且将这份元素对象设置为透明，并覆盖在热力图的上层(视觉上透明，但是鼠标仍然可以对其操作到，比如点击)形成三层叠加层。即最底层是原始网页结构层，中间是热力图，最上层是透明网页结构层，实现对网页的交互操作。

可见，本实施例通过将目标网页中的元素转换为多个规则图形，然后将每个规则图形在目标页面中的坐标点进行分类，得到多个坐标点集合，也就是从目标页面的元素中获取到热力图计算采用的坐标点，而不是直接获取坐标点，一方面对于用户坐标点的获取更加全面，另一方面当尺寸发生变化元素的位置也会相应的变化，可以保持坐标点的正确性，最后将坐标点集合中的热度进行叠加计算，得到每个坐标点的融合热度值实现热力图绘制操作，使热力图显示的更加准确，避免尺寸变化的问题，同时采用元素进行计算，而不是请求多个坐标点的数据，提高热力图的绘制效率。

下面对本申请实施例提供的一种网页热力图绘制装置进行介绍，下文描述的一种网页热力图绘制装置与上文描述的一种网页热力图绘制方法可相互对应参照。

请参考图2，图2为本申请实施例所提供的一种网页热力图绘制装置的结构示意图。

本实施例中，该方法可以包括：

图形转换模块100，用于将获取到的目标网页的元素进行图形转换处理得到多个规则图形；

坐标点分类模块200，用于根据预设分类精度将多个规则图形在目标页面中对应的坐标点进行分类，得到多个坐标点集合；

热度叠加融合模块300，用于根据每个坐标点对应元素的热度值将每个坐标点集合中的坐标点的热度值进行叠加计算，得到每个坐标点的融合热度值；

热力图绘制模块400，用于根据每个坐标点及对应的融合热度值进行热力图绘制，得到网页热力图。

本申请实施例还提供一种计算机设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如以上实施例所述的网页热力图绘制方法的步骤。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如以上实施例所述的网页热力图绘制方法的步骤。

该计算机可读存储介质可以包括：u盘、移动硬盘、只读存储器(read-onlymemory，rom)、随机存取存储器(randomaccessmemory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。

说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。

以上对本申请所提供的一种网页热力图绘制方法、网页热力图绘制装置、计算机设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以对本申请进行若干改进和修饰，这些改进和修饰也落入本申请权利要求的保护范围内。