数据可视化大屏自动布局的方法、装置及存储介质与流程

本发明涉及浏览器技术领域，尤其涉及一种数据可视化大屏自动布局的方法、装置及存储介质。

背景技术：

目前可视化页面的开发主要采用两种方式：一是投入大量人力进行定制开发，以获得可视化页面；二是对已经开发好的模板进行整合以形成模板库，然后开发特定的工具，通过所开发的工具对这些模板进行配置化布局，以生成可视化页面。其中，通过大量人力进行定制开发以获得可视化页面的方式，人力成本较高且效率低；通过对模板进行配置化布局以形成可视化页面的方式，会存在模板的粒度不够细，灵活度低，无法满足设计要求的问题。

技术实现要素：

本发明通过提供一种数据可视化大屏自动布局的方法、装置及存储介质，旨在降低可视化页面的开发成本，提高可视化页面的开发效率。

为实现上述目的，本发明提供一种数据可视化大屏自动布局的方法，所述数据可视化大屏自动布局的方法包括以下步骤：

获取待生成的可视化页面的页面设计文件；

确定所述页面设计文件中主体对象的特征信息和位置信息；

根据所述特征信息生成所述主体对象的可视化组件；

根据所述位置信息对所述可视化组件进行位置组合，并根据组合后的所述可视化组件对应的代码数据生成所述可视化页面。

可选的，所述确定所述页面设计文件中主体对象的特征信息和位置信息的步骤包括：

根据预设的图像识别分割技术对所述页面设计文件进行分割计算处理，以获得多个区域图像以及各个所述区域图像的特征信息和位置信息；

将所述区域图像的特征信息和位置信息输入预设的可视化识别模型，以获得所述区域图像中主体对象的特征信息和位置信息。

可选的，所述根据所述特征信息生成所述主体对象的可视化组件的步骤包括：

根据所述特征信息中的类型信息确定与所述类型信息对应的标准化组件；

根据所述特征信息中的绘图信息和所述标准化组件生成所述主体对象的可视化组件。

可选的，所述根据所述位置信息对所述可视化组件进行位置组合的步骤包括：

根据所述主体对象的位置信息确定所述可视化组件的位置信息；

根据所述可视化组件的位置信息对所述可视化组件进行位置组合。

可选的，所述根据所述可视化组件的位置信息对所述可视化组件进行位置组合的步骤之后，还包括：

按照预设的构图排版规则对组合后的所述可视化组件进行处理。

可选的，所述根据组合后的所述可视化组件对应的代码数据生成所述可视化页面的步骤包括：

将组合后的所述可视化组件输入预设的代码转换模块，以获得所述可视化页面的代码数据；

将所述可视化页面的代码数据在浏览器中渲染，以生成所述可视化页面。

可选的，所述获取待生成的可视化页面的页面设计文件的步骤之前，还包括：

获取多个超文本标记语言组件；

根据各个所述超文本标记语言组件确定样本组件；

根据所述样本组件建立可视化识别模型。

可选的，所述根据所述样本组件建立可视化识别模型的步骤包括：

将所述样本组件进行标准化处理；

通过预设的卷积神经网络模型对标准化处理后的所述样本组件进行学习，以生成所述可视化识别模型。

为实现上述目的，本发明还提供一种数据可视化大屏自动布局装置，所述数据可视化大屏自动布局装置包括存储器、处理器及存储在存储器上并可在处理器上运行的数据可视化大屏自动布局程序，所述数据可视化大屏自动布局程序被所述处理器运行时实现如上所述的数据可视化大屏自动布局的方法的各个步骤。

为实现上述目的，本发明还提供一种存储介质，所述存储介质上存储有数据可视化大屏自动布局程序，所述数据可视化大屏自动布局程序被所述处理器执行时实现如上所述的数据可视化大屏自动布局的方法的各个步骤。

本发明的技术方案，系统获取待生成的可视化页面的页面设计文件，并确定页面设计文件中所包含的主体对象以及各个主体对象的特征信息和位置信息，根据主体对象的特征信息生成对应的可视化组件，根据主体对象的位置信息对可视化组件进行位置组合，并获取组合后的可视化组件对应的代码数据，将代码数据在浏览器中渲染，以生成可视化页面。如此设置，不需要投入大量的人力成本，即可定制开发可视化页面，使得可视化页面的开发成本低，开发效率高。

附图说明

图1为本发明实施例方案涉及的硬件运行环境的电子设备结构示意图；

图2为本发明数据可视化大屏自动布局的方法一实施例的流程示意图；

图3为图2中步骤s2的一实施例的流程示意图；

图4为图2中步骤s3的一实施例的流程示意图；

图5为图2中步骤s4的一实施例的流程示意图。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例的主要解决方案是：获取待生成的可视化页面的页面设计文件；确定所述页面设计文件中主体对象的特征信息和位置信息；根据所述特征信息生成所述主体对象的可视化组件；根据所述位置信息对所述可视化组件进行位置组合，并根据组合后的所述可视化组件对应的代码数据生成所述可视化页面。

本发明的技术方案，系统获取待生成的可视化页面的页面设计文件，并确定页面设计文件中所包含的主体对象以及各个主体对象的特征信息和位置信息，根据主体对象的特征信息生成对应的可视化组件，根据主体对象的位置信息对可视化组件进行位置组合，并获取组合后的可视化组件对应的代码数据，将代码数据在浏览器中渲染，以生成可视化页面。如此设置，不需要投入大量的人力成本，即可定制开发可视化页面，使得可视化页面的开发成本低，开发效率高。

作为一种实施方案，数据可视化大屏自动布局装置可以如图1所示。

本发明实施例方案涉及的是数据可视化大屏自动布局装置，数据可视化大屏自动布局装置包括：处理器1001，例如cpu，通信总线1002，存储器1003。其中，通信总线1002用于实现这些组件之间的连接通信。

存储器1003可以是高速ram存储器，也可以是稳定的存储器(non-volatilememory)，例如磁盘存储器。如图1所示，作为一种计算机存储介质的存储器1003中可以包括数据可视化大屏自动布局程序；而处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

获取待生成的可视化页面的页面设计文件；

确定所述页面设计文件中主体对象的特征信息和位置信息；

根据所述特征信息生成所述主体对象的可视化组件；

根据所述位置信息对所述可视化组件进行位置组合，并根据组合后的所述可视化组件对应的代码数据生成所述可视化页面。

可选的，处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

根据预设的图像识别分割技术对所述页面设计文件进行分割计算处理，以获得多个区域图像以及各个所述区域图像的特征信息和位置信息；

将所述区域图像的特征信息和位置信息输入预设的可视化识别模型，以获得所述区域图像中主体对象的特征信息和位置信息。

可选的，处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

根据所述特征信息中的类型信息确定与所述类型信息对应的标准化组件；

根据所述特征信息中的绘图信息和所述标准化组件生成所述主体对象的可视化组件。

可选的，处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

根据所述主体对象的位置信息确定所述可视化组件的位置信息；

根据所述可视化组件的位置信息对所述可视化组件进行位置组合。

可选的，处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

按照预设的构图排版规则对组合后的所述可视化组件进行处理。

可选的，处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

将组合后的所述可视化组件输入预设的代码转换模块，以获得所述可视化页面的代码数据；

将所述可视化页面的代码数据在浏览器中渲染，以生成所述可视化页面。

可选的，处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

获取多个超文本标记语言组件；

根据各个所述超文本标记语言组件确定样本组件；

根据所述样本组件建立可视化识别模型。

可选的，处理器1001可以用于调用存储器1003中存储的数据可视化大屏自动布局程序，并执行以下操作：

将所述样本组件进行标准化处理；

通过预设的卷积神经网络模型对标准化处理后的所述样本组件进行学习，以生成所述可视化识别模型。

图2为本发明数据可视化大屏自动布局的方法一实施例的流程示意图。

该数据可视化大屏自动布局的方法包括以下步骤：

步骤s1，获取待生成的可视化页面的页面设计文件；

该页面设计文件，表示待生成的可视化页面的ui文件，即待生成的可视化页面的设计效果图。可以由开发人员将可视化页面的页面设计文件导入系统中，也可以是系统从移动硬盘、云服务器等获取可视化页面的页面设计文件。

步骤s2，确定所述页面设计文件中主体对象的特征信息和位置信息；

该主体对象，即页面设计文件中包含的主要对象，例如页面设计文件中包含的人、物、图形等等。该主体对象的特征信息，即主体对象的宽度、高度、类型、各个像素点的像素值等。该主体对象的位置信息，即主体对象在设计效果图中的坐标位置以及各个主体对象之间的相互位置关系。其中，可以利用opencv图像识别以及分割算法对页面设计文件进行分割计算处理，以获得多个区域图像以及各个区域图像的宽度、高度、各个像素点的像素值以及各个区域图像的位置信息，再根据预设的可视化识别模型识别区域图像中所包含的主体对象，确定各个主体对象的特征信息和位置信息。

具体的，在一实施例中，参照图3，步骤s2包括：

步骤s21，根据预设的图像识别分割技术对所述页面设计文件进行分割计算处理，以获得多个区域图像以及各个所述区域图像的特征信息和位置信息；

该预设的图像识别分割技术，可以是opencv图像识别以及分割技术，系统通过预设的图像识别分割技术对所获取的页面设计文件进行分割计算处理，即将页面设计文件按照opencv所识别出来的区别特征进行分割处理，以获得多个区域图像，并确定各个区域图像的宽度、高度、各个像素点的像素值、各个区域图像的位置信息以及各个区域图像相对于页面设计文件的偏移量等等。

步骤s22，将所述区域图像的特征信息和位置信息输入预设的可视化识别模型，以获得所述区域图像中主体对象的特征信息和位置信息。

通过在前期筛选大量的超文本标记语言组件，即各种类型的html(hypertextmarkuplanguage，超文本标记语言)组件进行标注作为学习样本组件，再对学习样本组件进行标准化操作后，通过cnn(convolutionalneuralnetworks，卷积神经网络)进行学习，以获得可视化识别模型。可视化识别模型能够识别出各个区域图像中所包含的主体对象以及主体对象的类型、特征信息和位置信息等等。将各个区域图像以及区域图像的特征信息和位置信息输入预设的可视化识别模型，根据可视化识别模型确定各个区域图像中所包含的主体对象以及各个主体对象的特征信息和位置信息。其中，可以以区域图像的位置信息作为该区域图像中所包含的主体对象的位置信息，可以以区域图像的特征信息作为该区域图像中所包含的主体对象的特征信息，也可以通过可视化识别模型识别出区域图像中的主体对象后，通过分析计算确定主体对象的特征信息。

步骤s3，根据所述特征信息生成所述主体对象的可视化组件；

该可视化组件，为待生成可视化页面所要显示的对象。在确定主体对象的特征信息后，通过将主体对象的特征信息中的类型信息与组件数据库进行匹配，在匹配成功时，获得与主体对象的类型信息对应的标准化组件，再将主体对象的特征信息与标准化组件进行结合，即以主体对象的特征信息配置标准化组件，从而生成主体对象的可视化组件。

具体的，在一实施例中，参照图4，步骤s3包括：

步骤s31，根据所述特征信息中的类型信息确定与所述类型信息对应的标准化组件；

该标准化组件，为预先存储于组件数据库的组件。系统根据可视化识别模型识别页面设计文件中的主体对象以及主体对象的类型信息，再根据识别出的主体对象的类型信息，从组件数据库中获取与主体对象的类型信息匹配的标准化组件。

步骤s32，根据所述特征信息中的绘图信息和所述标准化组件生成所述主体对象的可视化组件。

该绘图信息包括主体对象的宽度、高度、各个像素点的像素值等信息，系统根据主体对象的绘图信息和标准化组件生成主体对象的可视化组件，即系统以主体对象的绘图信息配置标准化组件，使得配置后的标准化组件的形状、颜色、高度、宽度等等与页面设计文件中对应主体对象的形状、颜色、高度、宽度等等相同。也就是通过主体对象的绘图信息和标准化组件定制开发个性化的可视化组件，使得所生成的可视化组件与页面设计文件中主体对象的颜色、宽度、高度、形状等等一致。

步骤s4，根据所述位置信息对所述可视化组件进行位置组合，并根据组合后的所述可视化组件对应的代码数据生成所述可视化页面。

根据主体对象在设计效果图中的位置信息以及各个主体对象之间的相互位置关系对所获得的可视化组件进行位置组合，即将所生成的各个可视化组件按照主体对象的位置信息进行重新布局、组合，并获取组合后的可视化组件对应的代码数据，将所获得的代码数据在浏览器中渲染，以生成与设计效果图相同的可视化页面。

具体的，参照图5，所述根据所述位置信息对所述可视化组件进行位置组合的步骤包括：

步骤s41，根据所述主体对象的位置信息确定所述可视化组件的位置信息。

根据主体对象在页面设计文件中的位置信息以及各个主体对象相互之间的位置信息确定所生成的可视化组件在待生成的可视化页面的位置信息以及各个可视化组件之间的相互位置关系，例如各个可视化组件的编号、id、相对于页面设计文件的偏移量、矩阵特征值等。

步骤s42，根据所述可视化组件的位置信息对所述可视化组件进行位置组合。

根据所确定的各个可视化组件的位置信息对各个可视化组件进行重新布局、组合，使得组合后的各个可视化组件在待生成的可视化页面的位置以及各个可视化组件的相互位置关系与页面设计文件中对应的主体对象的位置相同。

步骤s42之后，还包括：

步骤s43，按照预设的构图排版规则对组合后的所述可视化组件进行处理。

在将各个可视化组件进行位置组合后，再按照预设的构图排版规则对组合后的可视化组件进行适应性调整，例如调整各个可视化组件的分辨率、宽度、高度等等，以使得各个可视化组件与页面设计文件中主体对象相同，提高待生成的可视化页面的准确性。

具体的，所述根据组合后的所述可视化组件对应的代码数据生成所述可视化页面的步骤包括：

步骤s44，将组合后的所述可视化组件输入预设的代码转换模块，以获得所述可视化页面的代码数据；

该代码转换模块，用于将可视化组件转换为对应的代码数据。将组合后的可视化组件输入预设的代码转换模块，由代码转换模块将组合后的可视化组件转换为对应的代码数据，以获得待生成的可视化页面的代码数据，即获得基于html的数据墙。

步骤s45，将所述可视化页面的代码数据在浏览器中渲染，以生成所述可视化页面。

将所获得的可视化页面的代码数据在浏览器中渲染，从而生成与页面设计文件对应的可视化页面。

为了便于理解，以下举例说明本实施例的发明构思。设定页面设计文件包括组件a、组件b、组件c、组件d和组件e；将页面设计文件输入可视化识别模型，通过可视化识别模型识别出组件a对应的标准化组件a1，组件b对应的标准化组件b1，组件c对应的标准化组件c1，组件d对应的标准化组件d1，组件e对应的标准化组件e1以及各个标准化组件的位置信息，再从组件数据库中获取所识别出的各个标准化组件a1、b1、c1、d1、e1，将从组件数据库获取的标准化组件按照可视化识别模型识别出的位置信息进行重新组合，并将重组后的标准化组件转为代码数据，从而形成可视化页面的html数据墙。如此设置，不需要投入大量的人力成本，即可定制开发可视化页面。

本发明的技术方案，系统获取待生成的可视化页面的页面设计文件，并确定页面设计文件中所包含的主体对象以及各个主体对象的特征信息和位置信息，根据主体对象的特征信息生成对应的可视化组件，根据主体对象的位置信息对可视化组件进行位置组合，并获取组合后的可视化组件对应的代码数据，将代码数据在浏览器中渲染，以生成可视化页面。如此设置，不需要投入大量的人力成本，即可定制开发可视化页面，使得可视化页面的开发成本低，开发效率高。

在一实施例中，步骤s1之前，还包括：

步骤s5，获取多个超文本标记语言组件；

前期先选取大量的超文本标记语言组件。

步骤s6，根据各个所述超文本标记语言组件确定样本组件；

从选取的大量超文本标记语言汇总筛选一定数量的超文本标记语言组件进行标注，以确定样本组件，该样本组件用于供cnn卷积神经网络进行学习。

步骤s7，根据所述样本组件建立可视化识别模型。

通过cnn神经网络模型对样本组件进行学习，以生成可视化识别模型并保存。

具体的，步骤s7包括：

步骤s71，将所述样本组件进行标准化处理；

先对所筛选出的样本组件进行标准化处理，使样本组件符合开发人员设定的标准。

步骤s72，通过预设的卷积神经网络模型对标准化处理后的所述样本组件进行学习，以生成所述可视化识别模型。

再通过卷积神经网络模型对标准化处理后的所述样本组件进行学习，以生成所述可视化识别模型。

为实现上述目的，本发明还提供一种数据可视化大屏自动布局装置，所述数据可视化大屏自动布局装置包括存储器、处理器及存储在存储器上并可在处理器上运行的数据可视化大屏自动布局程序，所述数据可视化大屏自动布局程序被所述处理器运行时实现如上所述的数据可视化大屏自动布局的方法的各个步骤。

为实现上述目的，本发明还提供一种存储介质，所述存储介质上存储有数据可视化大屏自动布局程序，所述数据可视化大屏自动布局程序被所述处理器执行时实现如上所述的数据可视化大屏自动布局的方法的各个步骤。

以上所述仅为本发明的可选实施例，并非因此限制本发明的专利范围，凡是在本发明的发明构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。