网页图表绘制方法、装置、计算机设备和存储介质与流程

本申请涉及页面设计技术领域，尤其涉及一种网页图表绘制方法、装置、计算机设备和存储介质。

背景技术：

数据图表泛指在显示设备中显示的，可直观展示统计信息属性(时间性、数量性等)，对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好地将对象属性数据直观、形象地"可视化"的手段。现有技术中，一个网站的前台一旦制作成型后，其图表显示方式也基本定型，网站根据pc端客户的访问需求，从服务器端请求加载对应的绘图框架模板，然后对pc端浏览器中呈现的图表进行渲染展示。

但是这类显示形式的应用的局限性在于：不能实现一些特殊图表形式或者用户自定义的个性化图表形式的展示。导致用户无法在其浏览器端看到自己习惯的或者喜欢的图表数据，从而降低了用户体验。其缺点具体表现在下述几个方面：

1、一个网站的前台一旦制作成型后，其图表显示方式也基本定型，图表显示方式单一且不可改变；

2、不能实现一些特殊图表形式或者用户自定义的个性化图表形式的应用。

技术实现要素：

有鉴于此，有必要针对目前网页图表绘制时，无法自定义改变图表内容的问题，提供一种网页图表绘制方法、装置、计算机设备和存储介质。

一种网页图表绘制方法，包括如下步骤：

接收图表绘制的请求指令，抽取所述请求指令中的图表参数信息；

将所述图表参数信息入参到制图函数中进行运算，出参后得到所述图表的图表样本；

获取使用者输入的手绘痕迹，将所述手绘痕迹与所述图表样本进行比较，根据比较结果修正所述图表样本后得到所述手绘痕迹对应的标准图像；

汇集所有所述手绘痕迹对应的标准图像，建立图表样本集；

获取新的图表绘制请求指令，将所述请求指令对应的图表绘制信息与所述图表样本集中的标准图像进行比对，若比对一致，则将所述标准图像作为所述新的图表绘制请求指令对应的绘制图表，若不一致，则抽取新的图表绘制请求指令中的参数信息，建立新的图表样本。

在其中一个实施例中，所述接收图表绘制的请求指令，抽取所述请求指令中的图表参数信息，包括：

接收图表绘制的请求指令，根据预设语句规则，将所述图表绘制的请求指令分割成数个语句单元；

查询所述语句单元中所包含的图表尺寸信息，抽取所述图表尺寸信息后做单位归一化处理，得到单位归一化的图表尺寸信息；

抽取所述语句单元中所包含的图样轮廓信息，汇总所述图样轮廓信息和所述单位归一化的图表尺寸信息得到所述图表参数信息。

在其中一个实施例中，所述将所述图表参数信息入参到制图函数中进行运算，出参后得到所述图表的图表样本，包括：

获取执行所述制图函数的执行语句，抽取所述执行语句中包含的函数调用信息；

根据所述函数调用信息，获得网页适配的所述制图函数版本信息；

根据所述制图函数版本信息，获取此版本下的图像绘制函数和图像绘制函数；

将所述图表参数信息分别入参到所述图像绘制函数和所述图像绘制函数，汇总出参结果得到所述图表的图表样本。

在其中一个实施例中，所述获取使用者输入的手绘痕迹，将所述手绘痕迹与所述图表样本进行比较，根据比较结果修正所述图表样本后得到所述手绘痕迹对应的标准图像，包括：

获取使用者输入的手绘痕迹，根据所述手绘痕迹形成一手绘图表；

将所述手绘图表划分成多个绘图区域，任一所述绘图区域中包含至少一个不同于页面背景色的颜色信息；

计算每一所述绘图区域在所述手绘图表中的所占比例和位置，并显示所述所占比例和所述位置对应的文字信息于所述绘图区域中；

根据所述文字信息，从所述图表样本中抽取出所述文字信息对应的原始图表；

根据所述绘图区域的颜色信息对所述原始图表进行像素点修正，修正后得到所述标准图像。

在其中一个实施例中，所述汇集所有所述手绘痕迹对应的标准图像，建立图表样本集，包括：

获取各个所述标准图像所对应制图函数的版本信息；

将同一版本制图本函数得到的所述标准图像打包成一标准图像组，并根据所述制图函数的版本，赋予所述标准图像组以识别编号；

获取所述识别编号的首位字符，根据所述首位字符建立所述图表样本集的主索引，依次获取识别编号的第二位至第n位字符，其中n≥2，得到所述图表样本集的从索引，叠加所述主索引和所述从索引形成所述图表样本的索引目录；

根据所述索引目录，将所述图表样本写入到样本文件，所述样本文件即为所述图表样本集。

在其中一个实施例中，所述获取新的图表绘制请求指令，将所述请求指令对应的图表绘制信息与所述图表样本集中的标准图像进行比对，若比对一致，则将所述标准图像作为所述新的图表绘制请求指令对应的绘制图表，若不一致，则抽取新的图表绘制请求指令中的参数信息，建立新的图表样本，包括：

获取新的图表绘制请求指令，抽取出所述新的图表绘制请求指令中所包含的图表类型信息；

从所述图表样本集中抽取出与所述图表类型相一致的所有标准图像，形成比对图像组；

获取所述新的绘制请求指令中的颜色信息，将所述颜色信息与所述比对图像组中的标准图像的像素点进行比对；

若某一标准图像的比对结果误差在预设的误差阈值以内，则将所述比对图像组中的标准图像作为新的图表绘制请求指令对应的绘制图表；

若所有的标准图像的比对结果误差均在预设的误差阈值以外，则向使用者发送手绘指令，接收所述使用者的手绘痕迹，根据所述手绘痕迹，建立新的图表样本。

在其中一个实施例中，所述获取使用者输入的手绘痕迹，根据所述手绘痕迹形成一手绘图表，包括：

获取使用者输入的手绘痕迹位于预设的图表轮廓内的部分，抽取所述预设的图表轮廓内的部分中的任一水平线段，判断所述水平线段的长度是否大于所述预设的图表所包含的水平边的长度的一半；

若所述水平线段的长度大于所述预设的图表水平边的长度的一半长度的一半，则根据所述手绘痕迹所在的位置在所述预设的图表轮廓中显示一水平网格线；

若所述水平线段的长度不大于所述预设的图表水平边的长度的一半长度的一半，则清除所述手绘痕迹；

抽取所述预设的图表轮廓内的部分中的任一垂直线段，判断所述垂直线段的长度是否大于所述预设的图表所包含的垂直边的长度的一半；

若所述垂直线段的长度大于所述预设的图表垂直边的长度的一半长度的一半，则根据所述手绘痕迹所在的位置在所述预设的图表轮廓中显示一垂直网格线；

若所述垂直线段的长度不大于所述预设的图表垂直边的长度的一半长度的一半，则清除所述手绘痕迹；

汇总所有所述水平网格线和所述垂直网格线，形成所述手绘图表。

一种网页图表绘制装置，包括如下模块：

图表参数获取模块，设置为接收图表绘制的请求指令，抽取所述请求指令中的图表参数信息；

图表样本生成模块，设置为将所述图表参数信息入参到制图函数中进行运算，出参后得到所述图表的图表样本；

标准图像生成模块，设置为获取使用者输入的手绘痕迹，将所述手绘痕迹与所述图表样本进行比较，根据比较结果修正所述图表样本后得到所述手绘痕迹对应的标准图像；

图表样本集模块，设置为汇集所有所述手绘痕迹对应的标准图像，建立图表样本集；

绘制图表模块，设置为获取新的图表绘制请求指令，将所述请求指令对应的图表绘制信息与所述图表样本集中的标准图像进行比对，若比对一致，则将所述标准图像作为所述新的图表绘制请求指令对应的绘制图表，若不一致，则抽取新的图表绘制请求指令中的参数信息，建立新的图表样本。

一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行上述网页图表绘制方法的步骤。

一种存储有计算机可读指令的存储介质，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述网页图表绘制方法的步骤。

上述网页图表绘制方法、装置、计算机设备和存储介质，包括接收图表绘制的请求指令，抽取所述请求指令中的图表参数信息；将所述图表参数信息入参到制图函数中进行运算，出参后得到所述图表的图表样本；获取使用者输入的手绘痕迹，将所述手绘痕迹与所述图表样本进行比较，根据比较结果修正所述图表样本后得到所述手绘痕迹对应的标准图像；汇集所有所述手绘痕迹对应的标准图像，建立图表样本集；获取新的图表绘制请求指令，将所述请求指令对应的图表绘制信息与所述图表样本集中的标准图像进行比对，若比对一致，则将所述标准图像作为所述新的图表绘制请求指令对应的绘制图表，若不一致，则抽取新的图表绘制请求指令中的参数信息，建立新的图表样本。本技术方案针对网页图表绘制成型后，不能及时自定义绘制的问题，通过输入的绘制指令与图表样本集进行比对，提升了自定义绘制图像的效率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。

图1为本申请在一个实施例中的一种网页图表绘制方法的整体流程图；

图2为本申请在一个实施例中的一种网页图表绘制方法中的标准图像生成过程示意图；

图3为本申请在一个实施例中的一种网页图表绘制方法中的生成图表样本集过程示意图；

图4为本申请在一个实施例中的一种网页图表绘制装置的结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。

图1为本申请在一个实施例中的一种网页图表绘制方法的整体流程图，如图1所示，一种网页图表绘制方法，包括以下步骤：

s1，接收图表绘制的请求指令，抽取所述请求指令中的图表参数信息；

具体的，图表绘制的请求指令可以是用来绘制一般形式和特殊形式，其中，特殊形式的图表包括透视表格图等的请求；在从请求指令中抽取图表参数信息时，首先将请求指令中的数字信息进行抽取，然后对数字信息前后的文字信息进行识别，根据识别出的文字信息内容与预设在数据库中参数归属信息内容进行比对，比对一致后，确定这些数字信息的类别，进而得到图表的参数信息。

s2，将所述图表参数信息入参到制图函数中进行运算，出参后得到所述图表的图表样本；

具体的，本步骤中所使用的制图函数可以采用javascript脚本中所包含的函数，为javascript，是一种由netscape的livescript发展而来的脚本开发语言,主要目的是为了解决服务器终端语言遗留的速度问题。在此步骤中，还可以对javascript所包含的脚本函数进行优化：对javascript脚本函数的优化标识进行解析，以生成对应于所述优化标识的优化权值，利用优化权值对javascript脚本函数进行优化。

s3，获取使用者输入的手绘痕迹，将所述手绘痕迹与所述图表样本进行比较，根据比较结果修正所述图表样本后得到所述手绘痕迹对应的标准图像；

具体的，使用者输入的手绘痕迹可以是采用电子笔在电容屏上划动留下的，也可以是在其它纸张上进行绘制后，拍照输入到系统中的；在进行手绘痕迹与图表标准样本进行比对时，还可以包括对手绘痕迹进行误差修正的过程，比如手绘的是一条直线，由于某些因素导致直线发生弯曲，若弯曲幅度小于预设的弯曲阈值，则将手绘的痕迹修正为直线。

s4、汇集所有所述手绘痕迹对应的标准图像，建立图表样本集；

具体的，在将所有手绘痕迹进行收集时，先对手绘痕迹的归属者身份进行核实，然后利用笔迹鉴定的方式对此手绘痕迹归属者的绘制习惯进行判断，根据判断结果确定标准图像，建立图表样本集。

s5、获取新的图表绘制请求指令，将所述请求指令对应的图表绘制信息与所述图表样本集中的标准图像进行比对，若比对一致，则将所述标准图像作为所述新的图表绘制请求指令对应的绘制图表，若不一致，则抽取新的图表绘制请求指令中的参数信息，建立新的图表样本。

具体的，在本步骤中，在进行比对时，将新的图表绘制请求指令中的参数信息首先输入到误差修正模型中进行修正，可以使用engle-granger两步法或者直接估计法对参数进行修正，然后将修正后的参数与标准图像的参数再进行比对。

本实施例，通过建立标准图像，然后将使用者输入的想要绘制的图表信息与标准图像进行比对，节约了使用者自定义绘制图表的时间。

在一个实施例中，所述接收图表绘制的请求指令，抽取所述请求指令中的图表参数信息，包括：

接收图表绘制的请求指令，根据预设语句规则，将所述图表绘制的请求指令分割成数个语句单元；

具体的，在对图表绘制的请求指令进行分割时，可以以“：”、“、”等特殊标点符号作为分割符号对请求指令进行分割，分割后形成数个语句单元。

查询所述语句单元中所包含的图表尺寸信息，抽取所述图表尺寸信息后做单位归一化处理，得到单位归一化的图表尺寸信息；

其中，单位归一化处理是指，有的尺寸信息是以公制作为单位，有的是采用英制，这里将所有的尺寸信息全部换算成以“毫米”为单位的公制数据。

抽取所述语句单元中所包含的图样轮廓信息，汇总所述图样轮廓信息和所述单位归一化的图表尺寸信息得到所述图表参数信息。

本实施例，通过对图标绘制的请求信息进行解析和归一化处理，使得图表参数信息更加的统一，提升图表识别的效率。

在其中一个实施例中，所述将所述图表参数信息入参到制图函数中进行运算，出参后得到所述图表的图表样本，包括：

获取执行所述制图函数的执行语句，抽取所述执行语句中包含的函数调用信息；

其中，执行语句中包括函数调用信息，还包括执行时间等信息。

根据所述函数调用信息，获得网页适配的所述制图函数版本信息；

具体的，在获取制图函数版本信息时，获取制图函数在系统中各个接口的使用情况，先获取各个接口中相同的自变量，然后记录此自变量经过运算后得到的出参结果，若出参结果一致，则说明在这两个接口处的制图函数版本一致，若不一致则说明在这两个接口处的制图函数的版本一致，统计各个接口得到出参结果，以出参结果中出现次数最多的一个结果所对应的版本，作为该制图函数的版本。

根据所述制图函数版本信息，获取此版本下的图像绘制函数和图像绘制函数；

将所述图表参数信息分别入参到所述图像绘制函数和所述图像绘制函数，汇总出参结果得到所述图表的图表样本。

本实施例，通过对制图函数版本信息的判断，可以确定图表样本的适用系统版本的范围。

图2为本申请在一个实施例中的一种网页图表绘制方法中的标准图像生成过程示意图，如图所示，所述获取使用者输入的手绘痕迹，将所述手绘痕迹与所述图表样本进行比较，根据比较结果修正所述图表样本后得到所述手绘痕迹对应的标准图像，包括：

s301、获取使用者输入的手绘痕迹，根据所述手绘痕迹形成一手绘图表；

具体的，在获取使用者输入的手绘痕迹时，对手绘痕迹进行误差校正，然后向使用者发送校正后的痕迹图样，接收使用者确定的指令，若使用者认为校正的结果与输入的手绘痕迹不一致，则重新输入手绘痕迹。

s302、将所述手绘图表划分成多个绘图区域，任一所述绘图区域中包含至少一个不同于页面背景色的颜色信息；

具体的，在进行绘图区域划分时，可以先设定一个标准矩形，然后根据标准矩形的尺寸将绘图区域划分成数个子块，若任意一个所述子块中没有不同于页面背景颜色的颜色信息，则将此子块的区域向四周进行延伸直到具有不同于页面背景颜色的颜色出现，同时相邻的子块面积缩小。

s303、计算每一所述绘图区域在所述手绘图表中的所占比例和位置，并显示所述所占比例和所述位置对应的文字信息于所述绘图区域中；

具体的，将比例和位置进行文字信息转换时，可以以整个绘图区域的左下角为坐标原点建立一直角坐标系，然后记录各个绘图区域的左下角坐标和右上角的坐标，根据这两个坐标确定绘图区域的位置和比例，然后以文字形式展示出来。

s304、根据所述文字信息，从所述图表样本中抽取出所述文字信息对应的原始图表；

具体的，原始图表的信息以文字形式存储在数据库中的图表文件中，应用抽取出的文字信息与预存的原始图表的信息，进行比对即可得到对应的原始图表的样式。

s305、根据所述绘图区域的颜色信息对所述原始图表进行像素点修正，修正后得到所述标准图像。

本实施例，通过对手绘痕迹进行文字信息提取，加快了对手绘痕迹所对应的图表的核对速度。

图3为本申请在一个实施例中的一种网页图表绘制方法中的生成图表样本集过程示意图，如图所示，所述汇集所有所述手绘痕迹对应的标准图像，建立图表样本集，包括：

s401、获取各个所述标准图像所对应制图函数的版本信息；

具体的，获取系统各个使用所述制图函数的接口信息，根据制图函数在各个接口的入参和出参信息，和其它函数的出入参信息，确定所述制图函数的版本。

s402、将同一版本制图本函数得到的所述标准图像打包成一标准图像组，并根据所述制图函数的版本，赋予所述标准图像组以识别编号；

其中，在进行识别编号赋予时，可以以版本的编号作为主识别编号，然后以标准图像组的生成时间作为副识别编号，然后将主识别编号和副识别编号进行拼接得到标准识别编号。

s403、获取所述识别编号的首位字符，根据所述首位字符建立所述图表样本集的主索引，依次获取识别编号的第二位至第n位字符，其中n≥2，得到所述图表样本集的从索引，叠加所述主索引和所述从索引形成所述图表样本的索引目录；

具体的，在叠加索引目录时，一个从索引可以在不同的主索引下进行设置，并请对于多次重复的从索引可以记录其出现的次数，便于统计。

s404、根据所述索引目录，将所述图表样本写入到样本文件，所述样本文件即为所述图表样本集。

具体的，在将图表样本写入到样本文件中时，首先查询主索引，然后查询从索引，最后根据索引的树状结构，将图表样本写入到样本文件中。

本实施例，通过图表样本集，方便将新的图表指令与标准图像进行比对。

在一个实施例中，所述获取新的图表绘制请求指令，将所述请求指令对应的图表绘制信息与所述图表样本集中的标准图像进行比对，若比对一致，则将所述标准图像作为所述新的图表绘制请求指令对应的绘制图表，若不一致，则抽取新的图表绘制请求指令中的参数信息，建立新的图表样本，包括：

获取新的图表绘制请求指令，抽取出所述新的图表绘制请求指令中所包含的图表类型信息；

其中，图表类型信息是指柱状图、饼状图和曲线图等，根据不同的图表类型选取不同的标准图像。

从所述图表样本集中抽取出与所述图表类型相一致的所有标准图像，形成比对图像组；

具体的，对图表样本集中的图像类型信息进行文字抽取，然后将文字内容与图表样本的类型文字内容进行比对，形成比对图像组。

获取所述新的绘制请求指令中的颜色信息，将所述颜色信息与所述比对图像组中的标准图像的像素点进行比对；

具体的，在进行像素点比对的过程中，可以建立rgb矩阵，然后将绘制请求指令中的颜色信息转换成像素矩阵一，标准图像中的像素点建立像素矩阵二，然后将像素矩阵一和像素矩阵二均进行归一化处理，对归一化处理后的两个矩阵的元素进行比对。

若某一标准图像的比对结果误差在预设的误差阈值以内，则将所述比对图像组中的标准图像作为新的图表绘制请求指令对应的绘制图表；

若所有的标准图像的比对结果误差均在预设的误差阈值以外，则向使用者发送手绘指令，接收所述使用者的手绘痕迹，根据所述手绘痕迹，建立新的图表样本。

本实施例，通过对手绘图像和标准图像进行比对，确定手绘图像是否属于标准图像进行判断，提升了图像调取的速度。

在一个实施例中，所述获取使用者输入的手绘痕迹，根据所述手绘痕迹形成一手绘图表，包括：

获取使用者输入的手绘痕迹位于预设的图表轮廓内的部分，抽取所述预设的图表轮廓内的部分中的任一水平线段，判断所述水平线段的长度是否大于所述预设的图表所包含的水平边的长度的一半；

其中，预设的图标轮廓一般采用矩形，或者圆形；

若所述水平线段的长度大于所述预设的图表水平边的长度的一半长度的一半，则根据所述手绘痕迹所在的位置在所述预设的图表轮廓中显示一水平网格线；

若所述水平线段的长度不大于所述预设的图表水平边的长度的一半长度的一半，则清除所述手绘痕迹；

具体的，在进行长度测量时，可以采用图像绘制工具提供的标尺进行测量，然后先记录图表轮廓的长度，再将水平网格线的长度与水平边的长度进行比较。

抽取所述预设的图表轮廓内的部分中的任一垂直线段，判断所述垂直线段的长度是否大于所述预设的图表所包含的垂直边的长度的一半；

若所述垂直线段的长度大于所述预设的图表垂直边的长度的一半长度的一半，则根据所述手绘痕迹所在的位置在所述预设的图表轮廓中显示一垂直网格线；

若所述垂直线段的长度不大于所述预设的图表垂直边的长度的一半长度的一半，则清除所述手绘痕迹；

具体的，在进行长度测量时，可以采用图像绘制工具提供的标尺进行测量，然后先记录图表轮廓的长度，再将垂直网格线的长度与垂直边的长度进行比较。

汇总所有所述水平网格线和所述垂直网格线，形成所述手绘图表。

本实施例，通过对手绘图表的样式进行精准判断，可以提升对手绘图表识别的准确性。

在一个实施例中，提出了网页图表绘制装置，如图4所示，包括如下模块：

图表参数获取模块，设置为接收图表绘制的请求指令，抽取所述请求指令中的图表参数信息；

图表样本生成模块，设置为将所述图表参数信息入参到制图函数中进行运算，出参后得到所述图表的图表样本；

标准图像生成模块，设置为获取使用者输入的手绘痕迹，将所述手绘痕迹与所述图表样本进行比较，根据比较结果修正所述图表样本后得到所述手绘痕迹对应的标准图像；

图表样本集模块，设置为汇集所有所述手绘痕迹对应的标准图像，建立图表样本集；

绘制图表模块，设置为获取新的图表绘制请求指令，将所述请求指令对应的图表绘制信息与所述图表样本集中的标准图像进行比对，若比对一致，则将所述标准图像作为所述新的图表绘制请求指令对应的绘制图表，若不一致，则抽取新的图表绘制请求指令中的参数信息，建立新的图表样本。

一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行上述网页图表绘制方法的步骤。

一种存储有计算机可读指令的存储介质，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述网页图表绘制方法的步骤。所述存储介质可以为非易失性存储介质。

本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(rom，readonlymemory)、随机存取存储器(ram，randomaccessmemory)、磁盘或光盘等。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请一些示例性实施例，其中描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。