CN109933758A - 图表的展示方法、装置、电子设备和计算机可读存储介质 - Google Patents

Abstract

本发明公开了一种图表的展示方法、装置、电子设备和计算机可读存储介质。该方法包括：将页面中加载完成的图表按照预设值进行模糊处理；对加载完成的图表进行截图，获取与图表对应的图片；在模糊处理后的图表上设置一遮罩层，使用图片作为遮罩层的背景，对遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在图表上进行进一步的操作。在本技术方案中，可以实现网页图表中的新手引导功能，以便用户掌握图表中隐含的功能，且引导层是根据加载完成的图表实时生成的，可以保证引导层与网页图表相适应，成功引导用户完成操作，增强用户的体验。

Description

图表的展示方法、装置、电子设备和计算机可读存储介质

技术领域

本发明涉及计算机技术领域，具体涉及一种图表的展示方法、装置、电子设备和计算机可读存储介质。

背景技术

随着大数据时代的到来，实现数据可视化的图表，因其可以对各类数据进行直观的汇总展示而得到广泛使用。一般情况下，图表会存在一些隐含的功能，例如，在分行业信息柱状图表中，可以双击柱状图的某一条柱状数据，就会显示相应行业的趋势信息条形图。但是，用户在使用该图表时，特别是初次使用时，并不会知道该功能。所以，就急需一种图表的展示方案，对用户进行新手引导，以掌握图表中隐含的功能。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的图表的展示方法、装置、电子设备和计算机可读存储介质。

依据本发明的一个方面，提供了

一种图表的展示方法，其中，该方法包括：

将页面中加载完成的图表按照预设值进行模糊处理；

对加载完成的所述图表进行截图，获取与所述图表对应的图片；

在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。

可选地，在本次展示中，所述图表首次加载完成时，执行如前所述的方法步骤。

可选地，所述将页面中加载完成的图表按照预设值进行模糊处理包括：

利用CSS3的滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

可选地，所述对加载完成的所述图表进行截图，获取与所述图表对应的图片包括：

使用toDataURL的方法对加载完成的所述图表进行截图，获取与所述图表对应的图片。

可选地，所述对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层包括：

利用CSS3的clip-path的属性，将所述遮罩层裁剪成指定形状，将裁剪成指定形状的遮罩层作为引导层。

可选地，该方法进一步包括：

对引导层设置点缀框；和/或，对引导层进行阴影设置。

可选地，该方法进一步包括：

在迷糊处理后的所述图表上叠加文字信息，用于提示用户进行点击查看详细数据。

可选地，该方法进一步包括：

响应于用户在所述引导层处对所述图表中的指标项的点击触发事件，加载与所述指标项对应的详细数据页面。

可选地，该方法进一步包括：

当页面中的所述图表中的指标项发生一次点击触发事件后，移除页面中所有图表的引导层。

根据本发明的另一方面，提供了一种图表的展示装置，其中，该装置包括：

处理单元，适于将页面中加载完成的图表按照预设值进行模糊处理；

截图单元，适于对加载完成的所述图表进行截图，获取与所述图表对应的图片；

生成单元，适于在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。

可选地，所述处理单元、所述截图单元和所述生成单元，适于在本次展示中，所述图表首次加载完成时，执行前述的操作。

可选地，所述处理单元，具体适于利用CSS3的滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

可选地，所述截图单元，具体适于使用toDataURL的方法对加载完成的所述图表进行截图，获取与所述图表对应的图片。

可选地，所述生成单元，进一步适于利用CSS3的clip-path的属性，将所述遮罩层裁剪成指定形状，将裁剪成指定形状的遮罩层作为引导层。

可选地，所述生成单元，还适于对引导层设置点缀框；和/或，对引导层进行阴影设置。

可选地，所述生成单元，还适于在迷糊处理后的所述图表上叠加文字信息，用于提示用户进行点击查看详细数据。

可选地，该装置进一步包括：

响应单元，适于响应于用户在所述引导层处对所述图表中的指标项的点击触发事件，加载与所述指标项对应的详细数据页面。

可选地，该装置进一步包括：

移除单元，适于当页面中的所述图表中的指标项发生一次点击触发事件后，移除页面中所有图表的引导层。

根据本发明的又一方面，提供了一种电子设备，其中，该电子设备包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行根据前述的方法。

根据本发明的再一方面，提供了一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现前述的方法。

根据本发明的技术方案，将页面中加载完成的图表按照预设值进行模糊处理；对加载完成的所述图表进行截图，获取与所述图表对应的图片；在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。在本技术方案中，可以实现网页图表中的新手引导功能，以便用户掌握图表中隐含的功能，且引导层是根据加载完成的图表实时生成的，可以保证引导层与网页图表相适应，成功引导用户完成操作，增强用户的体验。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明一个实施例的图表的展示方法的流程示意图；

图2示出了根据本发明一个实施例的图表的展示示意图；

图3示出了根据本发明一个实施例的图表的展示装置的结构示意图；

图4示出了根据本发明一个实施例的电子设备的结构示意图；。

图5示出了根据本发明一个实施例的计算机可读存储介质的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

图1示出了根据本发明一个实施例的图表的展示方法的流程示意图。如图1所示，该该方法包括：

步骤S110，将页面中加载完成的图表按照预设值进行模糊处理。

步骤S120，对加载完成的图表进行截图，获取与图表对应的图片。

在网页图表中，打开网页加载图表时，是在一张画布canvas上生成的一图表，本实施例中，在图表加载完成时，对当前canvas图表进行截图，并将截图存为image格式。

步骤S130，在模糊处理后的图表上设置一遮罩层，使用图片作为遮罩层的背景，对遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在图表上进行进一步的操作。

在本实施例中，图表进行展示时，除了引导层的部分，其他部分都是模糊的，引导层出的图表是清晰的，且清晰的部分是对该图表进行截图后的图片中相应的部分。虽然图表进行了模糊处理，但是遮罩层中的背景是根据图表截图生成的，遮罩层中的图片与图表中的指标项的数据是一一对应的，所以，引导层中清晰的部分展示的数据对真实图标也是对应的。

采用本实施例的技术方案，一方面，可以实现网页图表中的新手引导功能，以便用户掌握图表中隐含的功能。另一方面，在现有技术中，通常的新手引导的方式是在一图片形式的图表中的某些固定位置引入标注，引导用户逐步的操作以掌握图表中隐含的功能。但是，在网页图表展示时，图表会根据数据的变化而实时发生变化，每次都不一样，用图片形式的图表展示是不可能的，那么在图表中的某些固定位置引入标注已经不能适应实时变化的图表，容易出现标注位置并没有任何数据的情况。所以，现有技术中的方法已经不适应网页图表了。而采用本实施例中的技术方案，引导层是根据加载完成的图表实时生成的，可以保证引导层与网页图表相适应，成功引导用户完成操作，增强用户的体验。

通常新手引导都是在网页首次打开时才会出现的，所以，在本发明的一个实施例中，在本次展示中，图表首次加载完成时，执行图1所示的方法步骤。

这里的图表首次加载完成是在同一次的展示中，该图表被首次加载时。可以理解的是，当用户浏览该网页的下一层网页后又返回到该网页，并非是该图表被首次加载。或者，当每当该网页关闭后背重新打开时，应当被确定是另一次的展示，并非是本次展示，也会执行图1的方法步骤，引导层也会出现。

例如，用户打开网页web1，图标首次加载，会执行图1的方法步骤，当用户点击web1的某一链接后会加载另一网页web2，当用户返回web1后，虽然图标可能会根据数据变化重新加载，但并不会执行图1的方法步骤；但是，当用户关闭web1后，再次打开，图1的方法步骤也会执行。

在本发明的一个实施例中，图1所示的步骤S110的将页面中加载完成的图表按照预设值进行模糊处理包括：利用CSS3的滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

CSS即层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。而CSS3是CSS技术的升级版本，CSS3将原来的规范化的一个功能模块分解为一些小的功能模块，并加入了一些新的功能模块。

在本实施例中，就利用CSS3的filter：blur滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

在本发明的一个实施例中，图1所示的步骤S120的对加载完成的图表进行截图，获取与图表对应的图片包括：使用toDataURL的方法对加载完成的图表进行截图，获取与图表对应的图片，以便对清晰的原图表样式进行截图。

在本发明的一个实施例中，图1所示的步骤S130中的对遮罩层进行裁剪，将裁剪后的遮罩层作为引导层包括：利用CSS3的clip-path的属性，将遮罩层裁剪成指定形状，将裁剪成指定形状的遮罩层作为引导层。

本实施例中，裁剪是根据需要进行新手引导的部位进行裁剪的，例如，需要对图标的指标项进行引导，那么裁剪时就保留相应的指标项的部分；如果对具体的数据进行引导，那么裁剪时就保留相应的数据项的部分。这里裁剪的形状可以根据需要进行设定，如该指定形状可以是圆形。

在本发明的一个实施例中，图1所示的方法进一步包括：对引导层设置点缀框；和/或，对引导层进行阴影设置，对引导层进行美观化处理，进一步增强用户视觉体验。

在本发明的一个实施例中，图1所示的方法进一步包括：在迷糊处理后的图表上叠加文字信息，用于提示用户进行点击查看详细数据。

该文字信息是根据该引导层将要引导用户进行操作的提示，以便用户对该新手引导的功能一部了然。例如，引导层需要引导用户进行双击动作以便实现详细数据的展示，可以在引导层的下方叠加文字信息“双击查看详细数据”。

引导层的作用是新手引导，即引导用户进行相应的操作，当用户根据引导层进行操作后，需要对该操作进行相应的响应。所以，在本发明的一个实施例中，图1所示的方法进一步包括：响应于用户在引导层处对图表中的指标项的点击触发事件，加载与指标项对应的详细数据页面。

需要说明的是，本方案中的引导层中清晰的部分实际上是图片，但是只有真正的图表才能响应用户的点击触发事件。在本实施例中，用户的点击触发需要透过引导层中的图片，而点击道引导层下层的图表上，为了满足该要求，将引导层的CSS3的curser-event的属性设置为none。

当用户按照引导层的提示进行操作后，确定用户已经掌握网页图表中隐含的功能，就不会在需要新手引导功能了。在本发明的一个实施例中，图1所示的方法进一步包括：

当页面中的图表中的指标项发生一次点击触发事件后，移除页面中所有图表的引导层。

需要说明的是，网页图表中展示的图标并非仅仅是一个图表，在网页打开，图表加载完成后，每一张图表上均会出现相应的引导层，但是只要用户在其中一个图表的引导层处对图表中的指标项进行了点击触发，则该网页中的所有的图表的引导层都会被移除。

图2示出了根据本发明一个实施例的图表的展示示意图。如图2所示，该图表是分行业信息柱状图表，隐含的功能是用户点击上面的数据柱，可以跳转道该数据柱对应的行业趋势的数据。为了将对用户进行该功能的新手引导，执行下述的步骤：

(1)网页打开后，canvas生成一个分行业信息柱状图图表，用toDataURL()方法对当前canvas图表截图，将截图图片存为image。

(2)在该分行业信息柱状图图表上面覆盖一层遮罩层mask，设置mask的背景图片为上述的image。

(3)通过filter：blur的CSS3滤镜属性，把canvas图表设置为一定数值的高斯模糊。

此时，因为遮罩层mask的存在图表的上方，视觉效果清晰的图片，但是下方的canvas图表已经是模糊效果。

(4)使用CSS3的clip-path路径剪裁遮罩属性，把mask层剪切为一个100px直径大小的圆。

圆里面是清晰的图片，圆外面是模糊的图标，且由于mask使用的背景图是canvas图表生成后截图获取的，是数据实时生成的，两层的图片可以重叠在一起，不会错位。

(5)在遮罩层上面在实现一个border-radius为50％的圆环形点缀框，设置一下box-shadow。

需要说明的是，圆环形点缀框并不能以伪元素的格式附着于mask层，因为clip-path的裁剪是针对整个元素的，会被裁掉。

(6)在遮罩层的下方叠加说明文字“点击柱形查看趋势”。

图3示出了根据本发明一个实施例的图表的展示装置的结构示意图。如图3所示，该图表的展示装置300包括：

处理单元310，适于将页面中加载完成的图表按照预设值进行模糊处理。

截图单元320，适于对加载完成的图表进行截图，获取与图表对应的图片。

在网页图表中，打开网页加载图表时，是在一张画布canvas上生成的一图表，本实施例中，在图表加载完成时，对当前canvas图表进行截图，并将截图存为image格式。

生成单元330，适于在模糊处理后的图表上设置一遮罩层，使用图片作为遮罩层的背景，对遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在图表上进行进一步的操作。

在本实施例中，图表进行展示时，除了引导层的部分，其他部分都是模糊的，引导层出的图表是清晰的，且清晰的部分是对该图表进行截图后的图片中相应的部分。虽然图表进行了模糊处理，但是遮罩层中的背景是根据图表截图生成的，遮罩层中的图片与图表中的指标项的数据是一一对应的，所以，引导层中清晰的部分展示的数据对真实图标也是对应的。

采用本实施例的技术方案，一方面，可以实现网页图表中的新手引导功能，以便用户掌握图表中隐含的功能。另一方面，在现有技术中，通常的新手引导的方式是在一图片形式的图表中的某些固定位置引入标注，引导用户逐步的操作以掌握图表中隐含的功能。但是，在网页图表展示时，图表会根据数据的变化而实时发生变化，每次都不一样，用图片形式的图表展示是不可能的，那么在图表中的某些固定位置引入标注已经不能适应实时变化的图表，容易出现标注位置并没有任何数据的情况。所以，现有技术中的方法已经不适应网页图表了。而采用本实施例中的技术方案，引导层是根据加载完成的图表实时生成的，可以保证引导层与网页图表相适应，成功引导用户完成操作，增强用户的体验。

通常新手引导都是在网页首次打开时才会出现的，所以，在本发明的一个实施例中，处理单元310、截图单元320和生成单元330，适于在本次展示中，图表首次加载完成时，执行图3所示的操作。

这里的图表首次加载完成是在同一次的展示中，该图表被首次加载时。可以理解的是，当用户浏览该网页的下一层网页后又返回到该网页，并非是该图表被首次加载。或者，当每当该网页关闭后背重新打开时，应当被确定是另一次的展示，并非是本次展示，也会执行图1的方法步骤，引导层也会出现。

例如，用户打开网页web1，图标首次加载，会执行图1的方法步骤，当用户点击web1的某一链接后会加载另一网页web2，当用户返回web1后，虽然图标可能会根据数据变化重新加载，但并不会执行图1的方法步骤；但是，当用户关闭web1后，再次打开，图1的方法步骤也会执行。

在本发明的一个实施例中，处理单元310，具体适于利用CSS3的滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

CSS即层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。而CSS3是CSS技术的升级版本，CSS3将原来的规范化的一个功能模块分解为一些小的功能模块，并加入了一些新的功能模块。

在本实施例中，就利用CSS3的filter：blur滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

在本发明的一个实施例中，截图单元320，具体适于使用toDataURL的方法对加载完成的图表进行截图，获取与图表对应的图片，以便对清晰的原图表样式进行截图。

在本发明的一个实施例中，生成单元，330进一步适于利用CSS3的clip-path的属性，将遮罩层裁剪成指定形状，将裁剪成指定形状的遮罩层作为引导层。

本实施例中，裁剪是根据需要进行新手引导的部位进行裁剪的，例如，需要对图标的指标项进行引导，那么裁剪时就保留相应的指标项的部分；如果对具体的数据进行引导，那么裁剪时就保留相应的数据项的部分。这里裁剪的形状可以根据需要进行设定，如该指定形状可以是圆形。

在本发明的一个实施例中，生成单元330，还适于对引导层设置点缀框；和/或，对引导层进行阴影设置，对引导层进行美观化处理，进一步增强用户视觉体验。

在本发明的一个实施例中，生成单元330，还适于在迷糊处理后的图表上叠加文字信息，用于提示用户进行点击查看详细数据。

该文字信息是根据该引导层将要引导用户进行操作的提示，以便用户对该新手引导的功能一部了然。例如，引导层需要引导用户进行双击动作以便实现详细数据的展示，可以在引导层的下方叠加文字信息“双击查看详细数据”。

引导层的作用是新手引导，即引导用户进行相应的操作，当用户根据引导层进行操作后，需要对该操作进行相应的响应。所以，在本发明的一个实施例中，图3所示的装置进一步包括：

响应单元，适于响应于用户在引导层处对图表中的指标项的点击触发事件，加载与指标项对应的详细数据页面。

需要说明的是，本方案中的引导层中清晰的部分实际上是图片，但是只有真正的图表才能响应用户的点击触发事件。在本实施例中，用户的点击触发需要透过引导层中的图片，而点击道引导层下层的图表上，为了满足该要求，将引导层的CSS3的curser-event的属性设置为none。

当用户按照引导层的提示进行操作后，确定用户已经掌握网页图表中隐含的功能，就不会在需要新手引导功能了。在本发明的一个实施例中，图3所示的装置进一步包括：

移除单元，适于当页面中的图表中的指标项发生一次点击触发事件后，移除页面中所有图表的引导层。

需要说明的是，网页图表中展示的图标并非仅仅是一个图表，在网页打开，图表加载完成后，每一张图表上均会出现相应的引导层，但是只要用户在其中一个图表的引导层处对图表中的指标项进行了点击触发，则该网页中的所有的图表的引导层都会被移除。

本发明还提供了一种电子设备，其中，该电子设备包括：处理器；以及，

被安排成存储计算机可执行指令的存储器，可执行指令在被执行时使处理器执行根据图1的图表的展示方法。

图4示出了根据本发明一个实施例的电子设备的功能结构示意图。如图4所示，该电子设备400包括：

处理器410；以及

被安排成存储计算机可执行指令(程序代码)的存储器420，在存储器420中，有存储程序代码的存储空间430，用于执行根据本发明的方法步骤的程序代码440存储在存储空间430中，该程序代码在被执行时使处理器410执行根据图1所示的及其各实施例中的图表的展示方法。

图5示出了根据本发明一个实施例的计算机可读存储介质的结构示意图。如图5所示，该计算机可读存储介质500，存储一个或多个程序(程序代码)510，一个或多个程序(程序代码)510当被处理器执行时，用于执行根据本发明的方法步骤，即图1所示的以及其各实施例中的图表的展示方法。

需要说明的是，图4所示的电子设备和图5所示的计算机可读存储介质的各实施例与图1所示的方法的各实施例对应相同，上文已有详细说明，在此不再赘述。

综上所述，根据本发明的技术方案，将页面中加载完成的图表按照预设值进行模糊处理；对加载完成的所述图表进行截图，获取与所述图表对应的图片；在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。在本技术方案中，可以实现网页图表中的新手引导功能，以便用户掌握图表中隐含的功能，且引导层是根据加载完成的图表实时生成的，可以保证引导层与网页图表相适应，成功引导用户完成操作，增强用户的体验。

需要说明的是：

在此提供的算法和显示不与任何特定计算机、虚拟装置或者其它设备固有相关。各种通用装置也可以与基于在此的示教一起使用。根据上面的描述，构造这类装置所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的图表的展示装置、电子设备和计算机可读存储介质中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

本发明公开了A1、一种图表的展示方法，其中，该方法包括：

将页面中加载完成的图表按照预设值进行模糊处理；

对加载完成的所述图表进行截图，获取与所述图表对应的图片；

在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。

A2、如A1所述的方法，其中，在本次展示中，所述图表首次加载完成时，执行如A1中所述的方法步骤。

A3、如A1所述的方法，其中，所述将页面中加载完成的图表按照预设值进行模糊处理包括：

利用CSS3的滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

A4、如A1所述的方法，其中，所述对加载完成的所述图表进行截图，获取与所述图表对应的图片包括：

使用toDataURL的方法对加载完成的所述图表进行截图，获取与所述图表对应的图片。

A5、如A1所述的方法，其中，所述对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层包括：

利用CSS3的clip-path的属性，将所述遮罩层裁剪成指定形状，将裁剪成指定形状的遮罩层作为引导层。

A6、如A1所述的方法，其中，该方法进一步包括：

对引导层设置点缀框；和/或，对引导层进行阴影设置。

A7、如A1所述的方法，其中，该方法进一步包括：

在迷糊处理后的所述图表上叠加文字信息，用于提示用户进行点击查看详细数据。

A8、如A1所述的方法，其中，该方法进一步包括：

响应于用户在所述引导层处对所述图表中的指标项的点击触发事件，加载与所述指标项对应的详细数据页面。

A9、如A1所述的方法，其中，该方法进一步包括：

当页面中的所述图表中的指标项发生一次点击触发事件后，移除页面中所有图表的引导层。

本发明还公开了B10、一种图表的展示装置，其中，该装置包括：

处理单元，适于将页面中加载完成的图表按照预设值进行模糊处理；

截图单元，适于对加载完成的所述图表进行截图，获取与所述图表对应的图片；

生成单元，适于在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。

B11、如B10所述的装置，其中，

所述处理单元、所述截图单元和所述生成单元，适于在本次展示中，所述图表首次加载完成时，执行B10中的操作。

B12、如B10所述的装置，其中，

所述处理单元，具体适于利用CSS3的滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

B13、如B10所述的装置，其中，

所述截图单元，具体适于使用toDataURL的方法对加载完成的所述图表进行截图，获取与所述图表对应的图片。

B14、如B10所述的装置，其中，

所述生成单元，进一步适于利用CSS3的clip-path的属性，将所述遮罩层裁剪成指定形状，将裁剪成指定形状的遮罩层作为引导层。

B15、如B10所述的装置，其中，

所述生成单元，还适于对引导层设置点缀框；和/或，对引导层进行阴影设置。

B16、如B10所述的装置，其中，

所述生成单元，还适于在迷糊处理后的所述图表上叠加文字信息，用于提示用户进行点击查看详细数据。

B17、如B10所述的装置，其中，该装置进一步包括：

响应单元，适于响应于用户在所述引导层处对所述图表中的指标项的点击触发事件，加载与所述指标项对应的详细数据页面。

B18、如B10所述的装置，其中，该装置进一步包括：

移除单元，适于当页面中的所述图表中的指标项发生一次点击触发事件后，移除页面中所有图表的引导层。

本发明还公开了C19、一种电子设备，其中，该电子设备包括：

处理器；以及，

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行根据A1～A9中任一项所述的方法。

本发明还公开了D20、一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现A1～A9中任一项所述的方法。

Claims (10)

1.一种图表的展示方法，其中，该方法包括：

将页面中加载完成的图表按照预设值进行模糊处理；

对加载完成的所述图表进行截图，获取与所述图表对应的图片；

在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。

2.如权利要求1所述的方法，其中，在本次展示中，所述图表首次加载完成时，执行如权利要求1中所述的方法步骤。

3.如权利要求1所述的方法，其中，所述将页面中加载完成的图表按照预设值进行模糊处理包括：

利用CSS3的滤镜属性，将加载完成的图表按照预设值进行高斯模糊。

4.如权利要求1所述的方法，其中，所述对加载完成的所述图表进行截图，获取与所述图表对应的图片包括：

使用toDataURL的方法对加载完成的所述图表进行截图，获取与所述图表对应的图片。

5.如权利要求1所述的方法，其中，所述对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层包括：

利用CSS3的clip-path的属性，将所述遮罩层裁剪成指定形状，将裁剪成指定形状的遮罩层作为引导层。

6.如权利要求1所述的方法，其中，该方法进一步包括：

对引导层设置点缀框；和/或，对引导层进行阴影设置。

7.如权利要求1所述的方法，其中，该方法进一步包括：

在迷糊处理后的所述图表上叠加文字信息，用于提示用户进行点击查看详细数据。

8.一种图表的展示装置，其中，该装置包括：

处理单元，适于将页面中加载完成的图表按照预设值进行模糊处理；

截图单元，适于对加载完成的所述图表进行截图，获取与所述图表对应的图片；

生成单元，适于在模糊处理后的所述图表上设置一遮罩层，使用所述图片作为所述遮罩层的背景，对所述遮罩层进行裁剪，将裁剪后的遮罩层作为引导层，以引导用户在所述图表上进行进一步的操作。

9.一种电子设备，其中，该电子设备包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行根据权利要求1～7中任一项所述的方法。

10.一种计算机可读存储介质，其中，所述计算机可读存储介质存储一个或多个程序，所述一个或多个程序当被处理器执行时，实现权利要求1～7中任一项所述的方法。