CN111752565A - 一种界面生成方法、装置、计算机设备及可读存储介质 - Google Patents

Abstract

本发明公开了一种界面生成方法、装置、计算机设备及可读存储介质，该方法包括：获取用于生成可视化界面的目标文件；解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表；本发明可以高效、快速的实现可视化大屏的开发，且利用后期维护与调整。

Description

一种界面生成方法、装置、计算机设备及可读存储介质

技术领域

本发明涉及数据展示技术领域，具体涉及一种界面生成方法、装置、计算机设备及可读存储介质。

背景技术

现有数据可视化大屏的实现方案一般包括以下步骤：首先收集客户数据可视化需求，然后一方面分析可视化内容背后需要哪些数据做支撑，另一方面进行大屏UI设计，然后交付开发团队开发前端展示页面和后台数据服务应用，最后前后端应用进行充分联调后完成产品开发和测试后上线。现有的可视化大屏开发方式存在效率低下、不利于提高代码复用性、难以满足可视化大屏快速开发需要的技术问题。

发明内容

本发明的目的在于提供一种界面生成方法、装置、计算机设备及可读存储介质，可以高效、快速的实现可视化大屏的开发，且利用后期维护与调整。

根据本发明的一个方面，提供了一种界面生成方法，具体包括以下步骤：

获取用于生成可视化界面的目标文件；

解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；

将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；

执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

可选的，在所述获取用于生成可视化界面的目标文件之前，所述方法还包括：

接收编辑指令，并根据所述编辑指令从Sketch图表库中选取对应类型的图表模板；其中，在所述Sketch图表库中包括各种类型的图表模板；

根据所述编辑指令在所述图表模板中修改对应的图表属性信息，并利用预设插件在所述图表模板中添加图表数据源信息，从而形成所述图表信息；

将所述图表信息添加到所述目标文件中。

可选的，所述解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板，具体包括：

从所述目标文件中解析出包含图表信息的图表标签；

从所述图表标签中提取出图表ID信息；

根据所述图表ID信息从预设的代码模板库中获取对应的代码模板。

可选的，所述将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码，具体包括：

从所述图表标签中提取出各个图表属性信息，并将所述各个图表属性信息添加到所述代码模板中的对应图表属性配置项中；

从所述图表标签中提取出图表数据源信息；其中，所述图表数据源信息包括：图表所使用的字段信息、以及包含所述字段信息的数据库的地址信息；

将所述字段信息以及所述数据库的地址信息添加到所述代码模板中的图表数据源配置项中。

可选的，在所述执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表之后，所述方法还包括：

接收图表修改指令；其中，所述图表修改指令包括：修改后的字段信息；

判断所述修改后的字段信息是否包含在所述数据库中；

若是，则根据所述修改后的字段信息修改所述代码模板中的图表数据源配置项，以重新形成前端代码。

根据本发明的另一个方面，还提供了一种界面生成装置，具体包括以下组成部分：

获取模块，用于获取用于生成可视化界面的目标文件；

解析模块，用于解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；

添加模块，用于将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；

执行模块，用于执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

可选的，所述装置还包括：

处理模块，用于接收编辑指令，并根据所述编辑指令从Sketch图表库中选取对应类型的图表模板；其中，在所述Sketch图表库中包括各种类型的图表模板；根据所述编辑指令在所述图表模板中修改对应的图表属性信息，并利用预设插件在所述图表模板中添加图表数据源信息，从而形成所述图表信息；将所述图表信息添加到所述目标文件中。

可选的，所述解析模块，具体用于：

从所述目标文件中解析出包含图表信息的图表标签；从所述图表标签中提取出图表ID信息；根据所述图表ID信息从预设的代码模板库中获取对应的代码模板。

根据本发明的另一个方面，还提供了一种计算机设备，具体包括：存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述界面生成方法的步骤。

根据本发明的另一个方面，还提供了一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述界面生成方法的步骤。

本发明提供的界面生成方法、装置、计算机设备及可读存储介质，由于目标文件是基于预设的图表模板生成的，所以可以通过识别目标文件中所包含的图表模板，快速的确定出与图表模板对应的代码模板，并利用代表模板将目标文件快速、高效的转换为前端代码。此外，在本发明中是将包含多个字段信息的数据库配置在图表数据源中，当图表所需的字段发生改变，且改变后的字段仍存储在所述数据库中时，不需要重新配置数据源，可以直接使用数据库中该字段的数据值；相比于现有的重新配置数据源，能简化操作。

附图说明

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

图1为实施例一提供的界面生成方法的一种可选的流程示意图；

图2为实施例二提供的界面生成装置的一种可选的程序模块示意图；

图3为实施例三提供的计算机设备的一种可选的硬件架构示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一

本发明实施例提供了一种界面生成方法，如图1所示，该方法具体包括以下步骤：

步骤S101：获取用于生成可视化界面的目标文件。

其中，所述目标文件包括：图表信息、文本信息、图片信息。

在本实施例中，目标文件是通过Sketch软件生成的HTML格式的文件。目标文件是一个或多个图表、文本、图片的集合；大屏设计人员通过Sketch软件可以根据客户需求对图表、文本、图片的样式进行编辑，并对图表、文本、图片进行排版布局，从而形成目标文件。此外，图表是需要根据数据源绘制在可视化界面中的，文本和图片可以直接呈现在可视化界面中。

具体的，在步骤S101之前，所述方法还包括：

步骤A1：接收编辑指令，并根据所述编辑指令从Sketch图表库中选取对应类型的图表模板；其中，在所述Sketch图表库中包括各种类型的图表模板；

在实际应用中，虽然不同的客户对目标文件的需求不同，但通常出现在目标文件中的图表类型较为单一，例如：折线图、柱状图、散点图、饼图、热力图等；因此，在本实施例中，通过Sketch软件生成各种常用类型的图表模板，并将所有类型的图表模板添加到Sketch图表库中，以供后续使用。以柱状图为例，首先在Sketch软件中画出柱状图样例，设置各个图层和控件的style样式，然后选择点击“创建组件”就可以把柱状图模板存到Sketch图表库中，后续项目都可以复用。

步骤A2：根据所述编辑指令在所述图表模板中修改对应的图表属性信息，并利用预设插件在所述图表模板中添加图表数据源信息，从而形成所述图表信息；

在使用图表模板时，设计人员可以根据需要设置图表的各种图表属性；此外，在本实施例中，插件是基于Sketch开发套件开发的，使用这个插件可以在目标文件中添加图表数据源信息；需要说明的是，图表属性信息通常指图表在显示界面中的位置参数、尺寸参数、颜色参数等，而图表具体是根据数据源生成的，例如：根据数据源提供的数据绘制出折线图，并在图表下方绘制一个文本框，以在文本框中展示数据源的URL地址和参数信息。

进一步的，所述图表数据源信息包括：图表所使用的字段信息、以及包含所述字段信息的数据库的地址信息。

通常一个图表会使用一个或多个字段，并根据字段的数据值进行图表绘制，例如，若绘制出某一商城的日销售量以及日客流量变化折线图，则该图表需要的字段为日销售量以及日客流量。

此外，在现有技术中，图表数据源信息仅包含图表所使用的字段信息，因此，若后期图表所使用的字段发生改变，则需重新配置图表数据源信息，比较繁琐；而在本实施例中，将图表数据源信息配置为图表所使用的字段信息以及包含所述字段信息的数据库的地址信息，在所述数据库中除了所述字段信息外，还包含其他类型的字段信息，因此，若后期图表所使用的字段发送改变，且改变后的字段仍存储在所述数据库中，则不需要重新配置图表数据源，仅需要将数据库中的改变后的字段的数据值返回即可。

步骤A3：将所述图表信息添加到所述目标文件中。

步骤S102：解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息。

具体的，步骤S102，包括：

步骤B1：从所述目标文件中解析出包含图表信息的图表标签；

步骤B2：从所述图表标签中提取出图表ID信息；

由于目标文件为HTML格式的文件，且在目标文件中会包含多个标签，所以通过对目标文件的标签中的参数信息进行分析，可以确定出在目标文件中用于描述图表信息的图表标签；以柱状图为例，对应的代码描述如下：

<divid＝"bar-axis"class＝"layer layer-9573DEFE-4F59-4975-AE5C-473919E48F25selected"data-index＝"60"percentage-width＝"72％"percentage-height＝"60.8％"data-width＝"403.3px"data-height＝"228.5px"style＝"left:62.4px；top:101px；width:403.3px；height:228.5px；">

</div>

由此可见，通过<div>标签规定了柱状图的样式信息，在本实施例中，可以通过<div>标签中的id参数的参数值确定出对应类型的图表信息。

步骤B3：根据所述图表ID信息从预设的代码模板库中获取对应的代码模板；其中，所述代码模板包括：图表属性配置项和图表数据源配置项。

进一步的，在步骤S102之前，所述方法还包括：

分别为不同类型的图表模块设置对应的代码模板；其中，代码模板包括：图表属性配置项和图表数据源配置项。

在本实施例中事先为不同类型的图表设置对应的代码模板，所述代码模板是按照屏幕终端所能执行的语言编写的JS框架，包含了图表样式的基础信息以及后期需要添加数据的图表属性配置项和图表数据源配置项；当屏幕终端执行代码模板时可根据代码模板中的图表属性配置项和图表数据源配置项在可视化界面中的设定位置绘制出设定类型及样式的图表。

步骤S103：将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码。

具体的，步骤S103，包括：

步骤C1：从所述图表标签中提取出各个图表属性信息，并将所述各个图表属性信息添加到所述代码模板中的对应图表属性配置项中；

步骤C2：从所述图表标签中提取出图表数据源信息；其中，所述图表数据源信息包括：图表所使用的字段信息、以及包含所述字段信息的数据库的地址信息；

步骤C3：将所述字段信息以及所述数据库的地址信息添加到所述代码模板中的图表数据源配置项中。

步骤S104：执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

在本实施例中，当设计人员通过Sketch编辑目标文件时，可以将用于生成图表的数据源信息通过插件添加到目标文件中，并在根据目标文件生成前端代码的过程中，将目标文件中的图表属性信息和图表数据源信息添加到对应代码模板的图表属性配置项和图表数据源配置项中；当屏幕终端执行前端代码时可以自动在大屏中绘制出各个图表以进行可视化展示。

具体的，在步骤S104之后，所述方法还包括：

步骤D1：接收图表修改指令；其中，所述图表修改指令包括：修改后的字段信息；

步骤D2：判断所述修改后的字段信息是否包含在所述数据库中；

步骤D3：若是，则根据所述修改后的字段信息修改所述代码模板中的图表数据源配置项，以重新形成前端代码。

在现有技术中，当前端需要修改图表所使用的字段信息时，需要后端重新配置图表数据源，前后端需要重新联调，较为繁琐；而在本实施例中，由于是将包含多个字段的数据库的地址信息配置在数据源中，若后期前端需要修改的字段仍包含在所述数据库中，就无需对数据源进行重新配置，只需要根据前端需求反馈对应字段的数据即可。在现有技术中，是将图表所需的字段信息配置为图表数据源，因此当图表所需的字段信息发生改变时，需要重新配置图表数据源；而在本实施例中，是将包含多个字段信息的数据库设置为图表数据源，因此不需要重新配置图表数据源。

进一步的，所述方法还包括：

识别出所述目标文件中的文本信息和图片信息，并将所述文本信息和图片信息显示在所述可视化界面中。

在目标文件中除了图表信息，还有很多静态资源信息，如大屏的背景、文字说明等，这些静态资源信息可以直接呈现在可视化界面中。

在本实施例中，由于目标文件是基于预设的图表模板生成的，所以可以通过识别目标文件中所包含的图表模板，快速的确定出与图表模板对应的代码模板，并利用代表模板将目标文件快速、高效的转换为前端代码。此外，在本实施例中是将包含多个字段信息的数据库配置在图表数据源中，当图表所需的字段发生改变，且改变后的字段仍存储在所述数据库中时，不需要重新配置数据源，可以直接使用数据库中该字段的数据值；相比于现有的重新配置数据源，能简化操作。

实施例二

本发明实施例提供了一种界面生成装置，如图2所示，该装置具体包括以下组成部分：

获取模块201，用于获取用于生成可视化界面的目标文件；

解析模块202，用于解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；

添加模块203，用于将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；

执行模块204，用于执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

具体的，所述装置，还包括：

处理模块，用于在所述获取用于生成可视化界面的目标文件之前，接收编辑指令，并根据所述编辑指令从Sketch图表库中选取对应类型的图表模板；其中，在所述Sketch图表库中包括各种类型的图表模板；根据所述编辑指令在所述图表模板中修改对应的图表属性信息，并利用预设插件在所述图表模板中添加图表数据源信息，从而形成所述图表信息；将所述图表信息添加到所述目标文件中。

在本实施例中，目标文件是通过Sketch软件生成的HTML格式的文件。目标文件是一个或多个图表、文本、图片的集合；大屏设计人员通过Sketch软件可以根据客户需求对图表、文本、图片的样式进行编辑，并对图表、文本、图片进行排版布局，从而形成目标文件。此外，图表是需要根据数据源绘制在可视化界面中的，文本和图片可以直接呈现在可视化界面中。

进一步的，解析模块202，具体用于：

从所述目标文件中解析出包含图表信息的图表标签；从所述图表标签中提取出图表ID信息；根据所述图表ID信息从预设的代码模板库中获取对应的代码模板；其中，所述代码模板包括：图表属性配置项和图表数据源配置项。

进一步的，添加模块203，具体用于：

从所述图表标签中提取出各个图表属性信息，并将所述各个图表属性信息添加到所述代码模板中的对应图表属性配置项中；从所述图表标签中提取出图表数据源信息；其中，所述图表数据源信息包括：图表所使用的字段信息、以及包含所述字段信息的数据库的地址信息；将所述字段信息以及所述数据库的地址信息添加到所述代码模板中的图表数据源配置项中。

更进一步的，所述装置还包括：

更新模块，用于在所述执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表之后，接收图表修改指令；其中，所述图表修改指令包括：修改后的字段信息；判断所述修改后的字段信息是否包含在所述数据库中；若是，则根据所述修改后的字段信息修改所述代码模板中的图表数据源配置项，以重新形成前端代码。

在现有技术中，图表数据源信息仅包含图表所使用的字段信息，因此，若后期图表所使用的字段发生改变，则需重新配置图表数据源信息，比较繁琐；而在本实施例中，将图表数据源信息配置为图表所使用的字段信息以及包含所述字段信息的数据库的地址信息，在所述数据库中除了所述字段信息外，还包含其他类型的字段信息，因此，若后期图表所使用的字段发送改变，且改变后的字段仍存储在所述数据库中，则不需要重新配置图表数据源，仅需要将数据库中的改变后的字段的数据值返回即可。

在本实施例中，由于目标文件是基于预设的图表模板生成的，所以可以通过识别目标文件中所包含的图表模板，快速的确定出与图表模板对应的代码模板，并利用代表模板将目标文件快速、高效的转换为前端代码。此外，在本实施例中是将包含多个字段信息的数据库配置在图表数据源中，当图表所需的字段发生改变，且改变后的字段仍存储在所述数据库中时，不需要重新配置数据源，可以直接使用数据库中该字段的数据值；相比于现有的重新配置数据源，能简化操作。

实施例三

本实施例还提供一种计算机设备，如可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图3所示，本实施例的计算机设备30至少包括但不限于：可通过系统总线相互通信连接的存储器301、处理器302。需要指出的是，图3仅示出了具有组件301-302的计算机设备30，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器301(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器301可以是计算机设备30的内部存储单元，例如该计算机设备30的硬盘或内存。在另一些实施例中，存储器301也可以是计算机设备30的外部存储设备，例如该计算机设备30上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器301还可以既包括计算机设备30的内部存储单元也包括其外部存储设备。在本实施例中，存储器301通常用于存储安装于计算机设备30的操作系统和各类应用软件，例如实施例二的界面生成装置的程序代码等。此外，存储器301还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器302在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器302通常用于控制计算机设备30的总体操作。

具体的，在本实施例中，处理器302用于执行处理器302中存储的界面生成方法的程序，所述界面生成方法的程序被执行时实现如下步骤：

获取用于生成可视化界面的目标文件；

解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；

将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；

执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

上述方法步骤的具体实施例过程可参见第一实施例，本实施例在此不再重复赘述。

实施例四

本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，所述计算机程序被处理器执行时实现如下方法步骤：

获取用于生成可视化界面的目标文件；

解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；

将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；

执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

上述方法步骤的具体实施例过程可参见第一实施例，本实施例在此不再重复赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

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

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

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

Claims (10)

1.一种界面生成方法，其特征在于，所述方法包括：

获取用于生成可视化界面的目标文件；

解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；

将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；

执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

2.根据权利要求1所述的界面生成方法，其特征在于，在所述获取用于生成可视化界面的目标文件之前，所述方法还包括：

接收编辑指令，并根据所述编辑指令从Sketch图表库中选取对应类型的图表模板；其中，在所述Sketch图表库中包括各种类型的图表模板；

根据所述编辑指令在所述图表模板中修改对应的图表属性信息，并利用预设插件在所述图表模板中添加图表数据源信息，从而形成所述图表信息；

将所述图表信息添加到所述目标文件中。

3.根据权利要求1所述的界面生成方法，其特征在于，所述解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板，具体包括：

从所述目标文件中解析出包含图表信息的图表标签；

从所述图表标签中提取出图表ID信息；

根据所述图表ID信息从预设的代码模板库中获取对应的代码模板。

4.根据权利要求3所述的界面生成方法，其特征在于，所述将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码，具体包括：

从所述图表标签中提取出各个图表属性信息，并将所述各个图表属性信息添加到所述代码模板中的对应图表属性配置项中；

从所述图表标签中提取出图表数据源信息；其中，所述图表数据源信息包括：图表所使用的字段信息、以及包含所述字段信息的数据库的地址信息；

将所述字段信息以及所述数据库的地址信息添加到所述代码模板中的图表数据源配置项中。

5.根据权利要求4所述的界面生成方法，其特征在于，在所述执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表之后，所述方法还包括：

接收图表修改指令；其中，所述图表修改指令包括：修改后的字段信息；

判断所述修改后的字段信息是否包含在所述数据库中；

若是，则根据所述修改后的字段信息修改所述代码模板中的图表数据源配置项，以重新形成前端代码。

6.一种界面生成装置，其特征在于，所述装置包括：

获取模块，用于获取用于生成可视化界面的目标文件；

解析模块，用于解析出包含在所述目标文件中的图表信息，并获取与所述图表信息对应的代码模板；其中，所述图表信息包括：图表属性信息和图表数据源信息；

添加模块，用于将所述图表属性信息和图表数据源信息添加到所述代码模板中，形成前端代码；

执行模块，用于执行所述前端代码以在可视化界面中绘制出与所述图表信息对应的图表。

7.根据权利要求6所述的界面生成装置，其特征在于，所述装置还包括：

处理模块，用于接收编辑指令，并根据所述编辑指令从Sketch图表库中选取对应类型的图表模板；其中，在所述Sketch图表库中包括各种类型的图表模板；根据所述编辑指令在所述图表模板中修改对应的图表属性信息，并利用预设插件在所述图表模板中添加图表数据源信息，从而形成所述图表信息；将所述图表信息添加到所述目标文件中。

8.根据权利要求6所述的界面生成装置，其特征在于，所述解析模块，具体用于：

从所述目标文件中解析出包含图表信息的图表标签；从所述图表标签中提取出图表ID信息；根据所述图表ID信息从预设的代码模板库中获取对应的代码模板。

9.一种计算机设备，所述计算机设备包括：存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至5任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1至5任一项所述方法的步骤。

Images