热力图框选方法和装置与流程

本申请涉及热力图领域，具体而言，涉及一种热力图框选方法和装置。

背景技术：

现有热力图的框选方式都是利用预先设置的矩形的框选方式来获取热力图数据，换言之，用户只能选择矩形框选区域内，获取该选区域内的网页对象的点击量、曝光量等热力图数据。

具体地，矩形框选发送的是矩形对角两点的坐标值，例如，(x11，y11)和(x22，y22)，后台的数据仓库进行数据切分，并将此框选区域内的数据发送到前端。由于上述热力图框选方式框选数据时非常固定，即只能选择矩形框选区域内的热力图数据，无法根据实际需求随意框选热力图中的数据并进行分析，进而在框选区域内通常会存在一些不需要的数据，从而使得无法灵活获取热力图数据，所造成对热力图数据分析不准确的问题。

针对相关技术中热力图的框选方式框选数据时较为固定的问题，目前尚未提出有效的解决方案。

技术实现要素：

本申请的主要目的在于提供一种热力图框选方法和装置，以解决相关技术中热力图的框选方式框选数据时较为固定的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种热力图框选方法。该方法包括：获取热力图上的多个像素点，其中，像素点的数量大于2；根据多个像素点生成热力图的框选区域；以及获取框选区域内每个像素点对应的数据。

进一步地，获取热力图上的多个像素点包括：获取热力图上的像素点的选取轨迹，其中，选取轨迹包括多个连续的像素点，根据多个像素点生成热力图的框选区域包括：根据选取轨迹生成热力图的框选区域。

进一步地，获取热力图上的像素点的选取轨迹包括：判断热力图上的像素点的选取轨迹是否在第一预设时间内完成；以及当判断出热力图上的像素点的选取轨迹是在第一预设时间内完成时，获取选取轨迹。

进一步地，获取热力图上的多个像素点包括：获取热力图上被选中的多个像素点，其中，热力图上被选中的多个像素点为离散的多个像素点，根据多个像素点生成热力图的框选区域包括：按照多个像素点的选中顺序连接多个像素点，得到多条连接路径；根据多条连接路径生成热力图的框选区域。

进一步地，在获取热力图上被选中的多个像素点之后，该方法还包括：判断是否需要从热力图上被选中的多个像素点中剔除目标像素点，其中，目标像素点为需要从热力图上被选中的多个像素点中剔除的像素点；以及在判断出需要从热力图上被选中的多个像素点中剔除目标像素点时，从热力图上被选中的多个像素点中剔除目标像素点，其中，根据剔除了目标像素点的多个像素点生成热力图的框选区域。

进一步地，获取热力图上被选中的多个像素点包括：接收热力图上被选中的多个像素点，其中，热力图上被选中的多个像素点中相邻时刻选中的两个像素点的选中时间间隔小于第二预设时间。

进一步地，获取热力图上被选中的多个像素点包括：获取在第三预设时间内热力图上被选中的多个像素点。

为了实现上述目的，根据本申请的另一方面，提供了一种热力图框选装置。该装置包括：第一获取单元，用于获取热力图上的多个像素点，其中，像素点的数量大于2；生成单元，用于根据多个像素点生成热力图的框选区域；以及第二获取单元，用于获取框选区域内每个像素点对应的数据。

进一步地，第一获取单元包括：第一获取模块，用于获取热力图上的像素点的选取轨迹，其中，选取轨迹包括多个连续的像素点，生成单元包括：第一生成模块，用于根据选取轨迹生成热力图的框选区域。

进一步地，第一获取单元包括：第二获取模块，用于获取热力图上被选中的多个像素点，其中，热力图上被选中的多个像素点为离散的多个像素点，生成单元包括：连接模块，用于按照多个像素点的选中顺序连接多个像素点，得到多条连接路径；第二生成模块，用于根据多条连接路径生成热力图的框选区域。

本申请通过获取热力图上的多个像素点，其中，像素点的数量大于2；根据多个像素点生成热力图的框选区域；以及获取框选区域内每个像素点对应的数据，本申请根据外部选择的多个像素点来生成热力图的框选范围，从而用户可以灵活的框选热力图中的数据，解决了相关技术中热力图的框选方式框选数据时较为固定的问题，进而达到了提高框选热力图中数据的灵活性的效果。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的热力图框选方法的流程图；

图2是根据本申请实施例的热力图的框选区域的示意图；以及

图3是根据本申请实施例的热力图框选装置的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本申请实施例，提供了一种热力图框选方法，图1是根据本申请实施例的热力图框选方法的流程图。如图1所示，该方法包括如下的步骤S102至步骤S106：

步骤S102，获取热力图上的多个像素点，其中，像素点的数量大于2。

具体地，用户可以通过操作选择热力图上的像素点，例如，可以在按下鼠标左键后，移动鼠标框选热力图上想要框选的区域，并最后移动鼠标至起始点，松开鼠标左键，其中，鼠标移动轨迹对应的热力图上的像素点均为用户选择的像素点；也可以是通过鼠标分别点击热力图上的多个像素点进行热力图上的像素点的选择。

需要说明的是，由于后续能够根据用户选择的多个像素点生成一个闭合的框选区 域，因此，用户至少需要在热力图上选择3个像素点。

步骤S104，根据多个像素点生成热力图的框选区域。

本申请实施例在获取到用户选择的多个像素点后，可以根据用户选择的多个像素点生成热力图的框选区域，具体地，以下以用户选择了热力图上的5个像素点为例对本申请实施例进行说明：

如图2所示，用户依次在热力图上选择了像素点1至像素点5，本申请实施例在接收到像素点1至像素点5之后，根据鼠标点击的顺序依次连接像素点1至像素点5，得到一个闭合区域，该闭合区域即热力图的框选区域，闭合区域内的像素点对应的数据即为用户需要分析的数据。

优选地，为了便于用户查看热力图上被选中的像素点，可以通过标识符来标识被选中的像素点，例如，当某个像素点被选中时，通过一个小圆点或是小圈等来进行标识。

步骤S106，获取框选区域内每个像素点对应的数据。

本申请实施例在得到热力图的框选区域后，获取框选区域内每个像素点的坐标，得到框选区域的像素点的坐标集合，并将该坐标集合发送给后台服务器，最后接收后台服务器根据框选区域的像素点的坐标集合返回的每个像素点对应的数据，以展示给用户查看分析，其中，后台服务器采用结构化查询语言(Structure Query Language，简称为SQL)语句对每个像素点的数据进行查询。

本申请实施例通过获取热力图上的多个像素点，其中，像素点的数量大于2；根据多个像素点生成热力图的框选区域；以及获取框选区域内每个像素点对应的数据，本申请根据外部选择的多个像素点来生成热力图的框选范围，从而用户可以灵活的框选热力图中的数据，解决了相关技术中热力图的框选方式框选数据时较为固定的问题，进而达到了提高框选热力图中数据的灵活性的效果。

可选地，获取热力图上的多个像素点包括：获取热力图上的像素点的选取轨迹，其中，选取轨迹包括多个连续的像素点，根据多个像素点生成热力图的框选区域包括：根据选取轨迹生成热力图的框选区域。

如上所述，用户可以通过移动鼠标或滑动触摸屏等来绘制需要框选的热力图区域，并通过Javascript脚本鼠标事件，记录下鼠标的移动轨迹上每一个像素点的坐标。以下以移动鼠标为例进行说明，具体操作步骤如下：

步骤S1，点击鼠标左键，此时会有一个原点记录显示当前被点击的像素点。

步骤S2，按住左键不放，拖动鼠标绘制图形，最后在原点记录的像素点上松开鼠标左键。

由于Javascript脚本鼠标事件可以记录下鼠标移动轨迹上的每一个像素点的坐标，从而可以根据鼠标移动路径上所有像素点的坐标生成热力图的框选区域，具体地，可以采用可缩放矢量图形(Scalable Vector Graphics，简称为SVG)绘图工具根据鼠标移动路径上所有像素点的坐标绘制热力图的框选区域，其中，利用SVG中的path标签可以很方便的实现热力图的框选区域的绘制。

需要说明的是，上述选取轨迹也可以不是一次性选取得到，例如，用户按下鼠标左键后移动一段轨迹，松开鼠标左键，在预设时间后以上一个轨迹的结束位置为起始点再次移动一段轨迹，依次类推，直至最后一段轨迹的终止位置为第一段轨迹的起始位置。

优选地，为了避免一些误操作，获取热力图上的像素点的选取轨迹包括：判断热力图上的像素点的选取轨迹是否在第一预设时间内完成；以及当判断出热力图上的像素点的选取轨迹是在第一预设时间内完成时，获取选取轨迹。

实际情况中，许多用户在查看热力图时存在滑动鼠标或触摸屏等以标示查看区域的习惯，为了避免因用户的操作习惯造成不必要的热力图框选操作，额外耗费系统资源，本申请实施例对用户框选热力图的操作时间进行设定，例如，如果用户在30秒内完成了鼠标或触摸屏等的移动操作，即热力图上的选取轨迹是在30秒内完成的，则判断出用户当前的操作为需要进行热力图的框选，此时可以获取选取轨迹上所有像素点的坐标，如果用户未在30秒内完成鼠标或触摸屏等的移动操作，即选取轨迹不是在30秒内完成的，则判断出用户当前的操作并不是为了进行热力图的框选，此时可以不做任何后续处理。

可选地，获取热力图上的多个像素点包括：获取热力图上被选中的多个像素点，其中，热力图上被选中的多个像素点为离散的多个像素点，根据多个像素点生成热力图的框选区域包括：按照多个像素点的选中顺序连接多个像素点，得到多条连接路径；根据多条连接路径生成热力图的框选区域。

需要说明的是：这里所提出的离散的多个像素点，可以是指热力图上选择像素的时间为非连续，或者，热力图上选取像素点不在同一区域(即夸多区域选择)的情况，对此本申请不做任何限定。

本申请实施例可以通过单击或是双击来选择热力图上的多个像素点，如图2所示，用户选中了热力图上的5个像素点(即像素点1至像素点5)，同样地，以鼠标选取像素点为例，可以通过Javascript脚本鼠标事件可以记录下鼠标选中的每个像素点的坐 标，并采用SVG中的path标签按照多个像素点的选中顺序依次连接多个像素点，最后生成热力图的框选区域。

优选地，为了便于用户动态查看框选过程中的热力图框选区域，在用户选择热力图上的像素点的过程中，可以在用户选中3个像素点后即显示由该3个像素点连接得到图形，并在用户后续每次选择新的像素点后重新生成新的图形。

优选地，为了提高用户操作的灵活性，在获取热力图上被选中的多个像素点之后，该方法还包括：判断是否需要从热力图上被选中的多个像素点中剔除目标像素点，其中，目标像素点为需要从热力图上被选中的多个像素点中剔除的像素点；以及在判断出需要从热力图上被选中的多个像素点中剔除目标像素点时，从热力图上被选中的多个像素点中剔除目标像素点，其中，根据剔除了目标像素点的多个像素点生成热力图的框选区域。

本申请实施例在用户选择多个像素点后，可以从选择的多个像素点中剔除不需要的像素点。具体地，可以通过鼠标双击某个像素点实现该像素点的剔除(即使得该像素点处于未被选择状态)，并在某个像素点被剔除后，根据剩余的多个像素点生成热力图的框选区域。由于本申请实施例可以根据需求剔除选中的像素点，使得用户选择像素点的操作更为灵活。

优选地，获取热力图上被选中的多个像素点包括：接收热力图上被选中的多个像素点，其中，热力图上被选中的多个像素点中相邻时刻选中的两个像素点的选中时间间隔小于第二预设时间。

为了避免错误的响应用户的操作，本申请实施例在选择热力图上的像素点时，相邻两次选择操作的时间间隔应小于第二预设时间(例如，5秒)，例如，以通过鼠标选择像素点为了，第二预设时间为5秒，鼠标进行了4次点击，第一次点击和第二次点击时间相隔6秒，第二次点击和第三次点击时间相隔2秒，第三次点击和第四次点击时间相隔3秒，此时，剔除第一次点击选择的像素点，将第二次点击选择的像素点作为起始像素点，将第三次点击选择的像素点作为第二个像素点，第四次点击选择的像素点作为第三像素点；如果上述4次点击中相邻两次点击的时间间隔均在5秒内，则将第一次点击选择的像素点作为起始像素点，第二次点击选择的像素点作为第二像素点，依次类推。

优选地，获取热力图上被选中的多个像素点包括：获取在第三预设时间内热力图上被选中的多个像素点。

本申请实施例对用户选择像素点的操作时间进行限定，例如，如果用户在30秒内完成了所有像素点的选择，则根据选择的多个像素点生成热力图的框选区域，否则， 不响应用户的选择操作。

需要说明的是，为了避免错误的响应用户操作，本申请实施例也可以在热力图上设置一个框选开关，当用户点击该框选开关时，才响应用户对热力图的框选操作，否则，不响应对热力图的框选操作。

从以上的描述中，可以看出，本申请实施例相比于现有的热力图的矩形框选方式，对热力图的框选更为灵活，可以根据用户的需求框选热力图上选择想要分析的点击。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例的另一方面，提供了一种热力图框选装置，该热力图框选装置可以用于执行本申请实施例的热力图框选方法，本申请实施例的热力图框选方法也可以通过本申请实施例的热力图框选装置来执行。

图3是根据本申请实施例的热力图框选装置的示意图，如图3所示，该装置包括：第一获取单元10，生成单元20和第二获取单元30。

第一获取单元10，用于获取热力图上的多个像素点，其中，像素点的数量大于2。

生成单元20，用于根据多个像素点生成热力图的框选区域。

第二获取单元30，用于获取框选区域内每个像素点对应的数据。

本申请实施例通过第一获取单元10获取热力图上的多个像素点，其中，像素点的数量大于2；生成单元20根据多个像素点生成热力图的框选区域；以及第二获取单元30获取框选区域内每个像素点对应的数据，本申请实施例的热力图框选装置根据获取到的热力图上的多个像素点来生成热力图的框选范围，从而用户可以灵活的框选热力图中的数据，解决了相关技术中热力图的框选方式框选数据时较为固定的问题，进而达到了提高框选热力图中数据的灵活性的效果。

可选地，第一获取单元10包括：第一获取模块，用于获取热力图上的像素点的选取轨迹，其中，选取轨迹包括多个连续的像素点，生成单元20包括：第一生成模块，用于根据选取轨迹生成热力图的框选区域。

可选地，第一获取单元10包括：第二获取模块，用于获取热力图上被选中的多个像素点，其中，热力图上被选中的多个像素点为离散的多个像素点，生成单元20包括：连接模块，用于按照多个像素点的选中顺序连接多个像素点，得到多条连接路径；第二生成模块，用于根据多条连接路径生成热力图的框选区域。

所述热力图框选装置包括处理器和存储器，上述第一获取单元、生成单元和第二获取单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来对热力图进行框选。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：获取热力图上的多个像素点，其中，像素点的数量大于2；根据多个像素点生成热力图的框选区域；以及获取框选区域内每个像素点对应的数据。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为离散部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产 品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。