CN114201716A - 图表处理方法、装置及电子设备 - Google Patents

Abstract

本发明公开一种图表处理方法、装置及电子设备，涉及自动化技术领域，其中方法包括：获取被添加至目标区域内的目标图表组件的标识；获取预先设置的与标识对应的图表的前端代码段；接收对目标图表组件中至少一个配置参数的调整指令；配置参数包括数据源；根据调整指令，对图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；通过预先设置的解析器解析调整后的图表的前端代码段，并根据解析结果以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据。该方案可以实现前端显示代码的编写与web应用程序的开发之间的解耦，提高图表生成效率，消除所生成的图表与所开发的web应用程序显示的图表在样式上的差异。

Description

图表处理方法、装置及电子设备

技术领域

本申请涉及自动程化技术领域，特别涉及图表处理方法、装置及电子设备。

背景技术

目前，在web应用程序的开发过程中，一般是采用例如MVC这样的构建模式，以达到代码耦合性低、重用性高、生命周期成本低、部署快、可维护性高、有利于软件工程化管理等目的效果。在MVC软件构建模式中，M指Model(模型)层，是应用程序中用于处理应用程序数据逻辑的部分，例如，模型对象负责在数据库中存取数据；V指View(视图)层，是应用程序中处理数据显示的部分，例如，依据模型提供的数据创建视图；C指Controller(控制器)层，是应用程序中处理用户交互的部分，例如，负责从视图读取数据，控制用户输入，并向模型发送数据。

其中，视图是指用户看到并与之交互的界面，通常由HTML元素组成的界面，在web项目开发时，可以采用Html语言或JavaScript语言编写。Model(模型)层包括很多模型，这些模型表示企业数据和业务的规则。Model(模型)层拥有最多的处理任务，例如，它可以用EJBs和ColdFusion Components这样的构件对象来处理数据库，被模型返回的数据是中立的，就是说与数据格式无关，这样一个模型能为多个视图提供数据，由于应用于模型的代码只需写一次就可以被多个视图重用，所以减少了代码的重复性。Controller(控制器)层接收用户的输入并调用模型和视图去完成用户的需求，所以当单击web页面中的链接和发送HTML表单是，控制器本身不输出任何东西，也不做任何处理，它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

基于web应用的上述软件构建模式，当开发人员需要与软件定制方沟通用户界面上图表的实际显示样式及显示效果时，往往需要在上述MVC软件架构的三层代码编写完成后才能够进行沟通；并且，为了确定显示效果最好的图表显示样式，沟通的过程中往往需要现场编码并反复编写同一图表显示样式的代码。这样就导致图表的生成效率较低，且所生成的图表与所开发的web应用程序显示的图表在显示样式上有差异。

发明内容

本申请的目的是提供一种图表处理方法、装置及电子设备，以提高图表生成效率，消除所生成的图表与所开发的web应用程序显示的图表在显示样式上的差异。

为解决上述技术问题，本说明书第一方面提供一种图表处理方法，包括：获取被添加至目标区域内的目标图表组件的标识；获取预先设置的与所述标识对应的图表的前端代码段，所述图表的前端代码段用于限定图表中数据的显示样式，和/或图表在web页面中图表的显示样式；接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；通过预先设置的解析器解析调整后的图表的前端代码段，并根据解析结果，以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，得到图表显示结果。

在一些实施例中，在得到调整后的图表的前端代码段之后，且在通过预先设置的解析器解析调整后的图表的前端代码段之前，还包括：将调整后的图表的前端代码段打包成预定格式的数据对象；将所述数据对象发送至解析器；解析器接收所述数据对象；相应地，所述通过预先设置的解析器解析调整后的图表的前端代码段，包括：通过预先设置的解析器解析所述数据对象。

在一些实施例中，通过预先设置的解析器解析所述数据对象之后，包括：判断解析结果中的数据源是否为URL；在数据源不是URL的情况下，通过解析器从数据源获取数据；将获取到的数据填充至解析结果。

在一些实施例中，判断解析结果中的数据源是否为URL之后，还包括：在数据源是URL的情况下，从解析结果中获取请求数据、响应数据；其中，所述请求数据为待显示的图表中的数据属性，所述响应数据为待反馈的服务器中的数据字段；向所述URL定位的数据库服务器发送HTTP请求，并接收反馈的数据；其中，所述HTTP请求中包括所述请求数据、所述响应数据；将反馈的数据填充至解析结果。

在一些实施例中，在用户未确定图表显示样式的情况下，重复执行下列操作：接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；通过预先设置的解析器解析调整后的图表的前端代码段，并以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

在一些实施例中，所述方法还包括：接收代码保存指令；响应于所述代码保存指令，显示保存路径的输入入口；接收输入的保存路径；按照所述保存路径，保存所述图表的前端代码段。

在一些实施例中，所述保存路径包括web应用程序源代码的前端代码所在的文件或文件夹。

本说明书第二方面提供一种图表处理装置，包括：第一获取单元，用于获取被添加至目标区域内的目标图表组件的标识；第二获取单元，用于获取预先设置的与所述标识对应的图表的前端代码段，所述图表的前端代码段用于限定图表中数据的显示样式，和/或图表在web页面中图表的显示样式；第一接收单元，用于接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；调整单元，用于根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；解析显示单元，用于通过预先设置的解析器解析调整后的图表的前端代码段，并根据解析结果，以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

在一些实施例中，所述装置还包括：打包单元，用于将调整后的图表的前端代码段打包成预定格式的数据对象；第一发送单元，用于将所述数据对象发送至解析器；第三接收单元，用于解析器接收所述数据对象；相应地，所述解析显示单元通过预先设置的解析器解析所述数据对象。

在一些实施例中，所述装置还包括：判断单元，用于判断解析结果中的数据源是否为URL；第三获取单元，用于在数据源不是URL的情况下，通过解析器从数据源获取数据；第一填充单元，用于将获取到的数据填充至解析结果。

在一些实施例中，所述装置还包括：第四获取单元，用于在数据源是URL的情况下，从解析结果中获取请求数据、响应数据；其中，所述请求数据为待显示的图表中的数据属性，所述响应数据为待反馈的服务器中的数据字段；第二发送单元，用于向所述URL定位的数据库服务器发送HTTP请求，并接收反馈的数据；其中，所述HTTP请求中包括所述请求数据、所述响应数据；第二填充单元，用于将反馈的数据填充至解析结果。

在一些实施例中，在用户未确定图表显示样式的情况下，重复执行下列操作：第一接收单元接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；调整单元根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；解析显示单元通过预先设置的解析器解析调整后的图表的前端代码段，并以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

在一些实施例中，所述装置还包括：第四接收单元，用于接收代码保存指令；显示单元，用于响应于所述代码保存指令，显示保存路径的输入入口；第五接收单元，用于接收输入的保存路径；保存单元，用于按照所述保存路径，保存所述图表的前端代码段。

本说明书第三方面提供一种电子设备，包括：存储器和处理器，所述处理器和所述存储器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而实现第一方面任一项所述方法的步骤。

本说明书第四方面提供一种计算机存储介质，所述计算机存储介质存储有计算机程序指令，所述计算机程序指令被处理器执行时实现第一方面任一项所述方法的步骤。

上述图表处理方法、装置及电子设备，提供可操作的图表组件，对于图表组件，提供数据源等配置参数，使得通过用户对图表组件的添加、调整操作来生成图表的前端代码段，使得用户的操作简单便捷；在生成前端代码段之后，通过预先设置的解析器解析前端代码段，并根据解析结果显示数据，方便用户确认显示效果；该方法实现了前端显示代码的编写与web应用程序的开发之间的解耦，可以独立于web应用程序开发项目而执行，使得开发人员能够在web应用程序开发之前提前与软件定制方确定图表显示样式，避免开发过程中重复多次修改，提高了图表生成效率；生成图表的前端代码段能够直接作为web应用程序开发项目中的前端代码段，从而可以消除所生成的图表与所开发的web应用程序显示的图表在显示样式上的差异。

附图说明

为了更清楚地说明本申请实施方式或现有技术中的技术方案，下面将对实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1示出了在线图表设计平台的内部逻辑结构；

图2示出了在线图表设计平台的一个显示界面；

图3示出了本说明书提供的图表处理方法的一种实施例的流程图；

图4示出了本说明书提供的图表处理方法的另一种实施例的流程图；

图5示出了本说明书提供的图表处理装置的一种实施例的原理框图；

图6示出了本说明书提供的图表处理装置的另一种实施例的原理框图；

图7示出了根据本说明书实施例的一种电子设备的结构示意图。

具体实施方式

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

为了提高开发人员的图表处理效率、图表显示样式的沟通效率，本说明书实施例提供一种在线图表设计平台，该在线图表设计平台可以是一个网站，也可以是一个应用程序。

开发人员在进行软件开发之前，就可以通过该在线图表设计平台和软件定制方沟通图表的显示样式。之所以要通过该在线图表设计平台来沟通图表的显示样式，而不是直接从图表的显示样式库中选取图表的显示样式，是因为软件定制方的数据量、数据变化特点会影响图表的显示样式，以及图表在web页面的显示效果，只有结合软件定制方的数据去调整图表在web页面的显示样式，才能够得到较好的显示效果。

图1示出了在线图表设计平台的内部逻辑结构，图2示出了在线图表设计平台的一个显示界面。

本说明书实施例所提供的在线图表设计平台，可以独立于web应用程序的开发软件运行。在线图表设计平台的用途有两部分，一是通过拖拽、配置操作，预览出用户想要的图表，二是生成或解析代码串，将预览结果保存下来，提供给解析器使用。

与一般在线图表设计平台的不同，本发明的核心之处就在于，还设置了解析器、代码串。在Vue.JS和ECharts的传统开发方案基础上，增加上述的“代码串”生成和解析规则，使得在线图表设计平台可以根据此规则对图表进行处理。

代码串连接起了各个模块的工作。考虑到便于MySQL等关系型数据库的存储，代码串文本可以使用UTF-8字符集；考虑到便于HTTP网络传输，编码结构可以使用JSON。最小长度可以为0，最大长度视图表可以根据复杂度而定，一般不超过1Mb。代码串生成规则，可以遵循Vue.JS和JSX组件树的结构。

如图1所示，该在线图表设计平台包括以下几个模块：内置的ECharts模块、拖拽模块、预览模块、图表生成器。

ECharts是一个基于JavaScript的开源可视化图表库。内置的ECharts模块，使用开源的vue-echarts实现，基于ECharts的封装，采用组件化、响应式的设计思想，提供丰富的基础图表样板代码段。例如，绘制折线图的代码段、绘制饼图的代码段、绘制柱状图的代码段等。

拖拽模块使用开源的vuedraggable实现，它将任意两个元素进行逻辑绑定，使得可以使用鼠标将一个元素拖拽到另一个元素中，同时该元素的数据也被传递给后者，每次拖拽或配置操作，都会将操作结果记录到代码串中，当预览时，将代码串传输给解析器。

预览模块可以看作是解析器的超集，除了核心的对代码串进行解析的工作之外，还提供了多种交互方式，方便开发人员以所见即所得的方式在线调试图表，支持从服务端程序接口或数据库获取数据源。

图表生成器，是对内置的ECharts模块提供的图表样板代码段进行再加工的模块，用户在此设置静态或动态图表，各字段、表单的属性和样式，设计数据结构，以及组合多个图表。

基于上述具体实施例，本说明书提供一种图表处理方法，如图3所示，包括如下步骤：

S310：获取被添加至目标区域内的目标图表组件的标识。

目标区域可以是用户交互界面中的一个分区，例如图2中所示的图表编辑区。也可以是指定路径下的一个文件夹。

该步骤中的“添加”，可以是通过拖拽的方式添加至目标区域，也可以是通过点击目标图表组件紧接着点击目标区域的方式添加至目标区域，或者也可以是通过点击目标区域内的添加按钮弹出选择框，从选择框中选择目标图表组件的方式添加至目标区域。当然，也可以采用其他方式，这里不再一一列举。

图表组件，可以为柱状图、折线图、散点图、表格等图表组件。

在用户交互界面上，图表组件的符号可以是文字符号，也可以是缩略图等。每个图表组件的符号都对应有一个标识符。该标识符可以是任意的形式，例如，可以为“***#1”。

S320：获取预先设置的与标识对应的前端代码段。

每个图表组件还对应有一个前端代码段。图表组件可以是预先采用Echarts等开源软件库生成的，在生成图表组件之后，按照预定规则为生成的图表组件编码即可形成图表组件的标识。

图表的前端代码段用于限定图表中数据的显示样式。例如，图表中折线或柱状图的颜色等内容。

在一些实施例中，图表的前端代码段中还可以预先设置有图表在web页面中的显示样式。例如，图表在web页面中是居中放置还是靠右放置、图表与web显示页面的大小比例。也即，图表在web页面中是如何布局的。

在一些实施例中，除了提供图表组件之外，还会提供页面布局组件。页面布局组件，例如可以为栅格布局、一栏式布局、两栏式布局、左右布局等。

在一些实施例中，还会提供选择组件、输入文本组件、输入数字组件、色彩选择器组件、日期选择器组件等图2中所示的表单组件或者其他表单组件。在前端代码中，页面也被称为表单。

这些图表组件、页面布局组件、表单组件可以按照预定规则组合在一起形成web页面的前端代码段。也即，可以通过本说明书所提供的方法实现整个web页面前端代码段的开发，web页面的前端代码段包括了图表的前端代码段，也包括了表单组件、页面布局组件的前端代码段。Web页面的前端代码段能够实现一个开发完成的应用程序web页面的完整显示。预定规则可以为组件树。

本说明书中所述的前端代码或前端代码段，是用于控制页面显示内容、与用户进行交互的代码段。具体地，用户从停留在当前页面到发起新请求的这段时间内，前端代码段可以控制页面内容。当用户停留在当前页面时，由于前端代码段可以监听用户在浏览器中的各种行为(比如鼠标点击、键盘输入、滚动页面等等)，并可以针对这些行为作出相应的反馈。

前端代码段可以分为三层：结构层、表现层和行为层。结构层的作用是表述一个页面中有哪些信息，以及这些信息之间的关系是什么，这一层在技术上是由HTML技术来实现的。表现层决定了页面中的信息会以什么样的外观呈现出来，这一层由CSS技术来实现。行为层控制了页面如何与用户进行交互，这一层由JS技术来实现。

在前端代码段与用户的交互过程中，有些事情光靠前端就可以做出响应。比如我们在网页上做了一个计算器的功能，当用户输入算式之后，前端代码段就可以直接计算出结果并显示给用户。整个过程不需要服务器的参与就可以完成。但有些事情，只有前端代码段是无法完成的。此时前端代码段就需要把部分任务交给后端代码段来处理，拿到处理结果之后再交给用户。在这个过程中，前端代码段可以让用户一直停留在当前页面，交互过程具有良好的连续性。

S330：接收对目标图表组件中至少一个配置参数的调整指令。

配置参数包括：与数据源有关的配置参数、与数据源无关的配置参数。

与数据源有关的配置参数是指数据源的地址，该地址可以是本地的存储路径，例如存储在本地的一个excel文件作为数据源；该地址也可以是网络地址，例如数据库的地址，具体是指数据库服务器的地址。数据库服务器可以是指服务器设备实体，也可以指数据库软件。例如，MySQL数据库软件。

与数据源无关的配置参数，是指限定图表中数据显示样式的参数。例如，图表中折线或柱状图的颜色等内容。

S340：根据调整指令，对图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段。

图表中预先设置的前端代码段中，会对各个配置参数设置默认值，这些默认值，只是用于显示出图表样式，并非所有默认的配置参数都是适合的，因此，需要对部分或全部的默认配置进行调整。

S350：通过预先设置的解析器解析调整后的图表的前端代码段，并根据解析结果以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，得到图表显示结果。

解析器，可以是预先写好的应用程序，该解析器应用程序可以被嵌入到在线图表设计平台中使用。

需要注意的是，在web应用程序开发过程中所用到的开发软件可能也会配置有解析器，现有技术中所提及的解析器通常是开发软件中配置的解析器。但是，本说明书所提供的方法中所述的解析器并不是web应用程序开发软件中的解析器。

由于调整后的图表的前端代码段是用于限定图表中数据的显示样式的，因此，解析器对调整后的图表的前端代码段完成解析后，也会以其所限定显示样式显示数据。用户(具体可以为开发人员和软件定制方)可以根据显示结果来确认图表的显示效果，并在此基础上确定这样的显示效果是否合适或最优。

上述图表处理方法，提供可操作的图表组件，对于图表组件，提供数据源等配置参数，使得通过用户对图表组件的添加、调整操作来生成图表的前端代码段，使得用户的操作简单便捷；在生成前端代码段之后，通过预先设置的解析器解析前端代码段，并根据解析结果显示数据，从而得到了图表显示结果。该方法实现了前端显示代码的编写与web应用程序的开发之间的解耦，可以独立于web应用程序开发项目而执行，使得开发人员能够在web应用程序开发之前提前与软件定制方确定图表显示样式，避免开发过程中重复多次修改，提高了图表生成效率；生成图表的前端代码段能够直接作为web应用程序开发项目中的前端代码段，从而可以消除所生成的图表与所开发的web应用程序显示的图表在显示样式上的差异。

在一些实施例中，在用户未确定图表显示样式的情况下，重复执行上述步骤S330至S350，直至接收到用户的图表确认指令后，保存用户确认的图表对应的前端代码段，还可以将用户确认的图表对应的前端代码段作为web应用程序的前端代码段。

基于上述具体实施例，本说明书提供另一种图表处理方法，如图4所示，包括如下步骤：

S401：获取被添加至目标区域内的目标图表组件的标识。

S402：获取预先设置的与标识对应的前端代码段。

S403：接收对目标图表组件中至少一个配置参数的调整指令。

S404：根据调整指令，对图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段。

上述步骤S401至S404请参阅步骤S310至S340，不再赘述。

S405：将调整后的图表的前端代码段打包成预定格式的数据对象。

预定格式的数据对象，例如可以为JSON格式，这是一种轻量级的数据交换格式。图表的前端代码段通常数据量较大，将前端代码段转换成数据对象进行传输，能够较大程度地减少数据传输量，提高传输效率，从而提高在线图表设计平台的响应速度。

需要说明的是，JSON作为一种数据交换格式，在现有技术中，通常是用于HTTP数据传输、前端数据传输至后台数据，通常不会用于将开发人员编写完成的前端代码传输至web应用程序开发软件中的解析器。

S406：将数据对象发送至预先设置的解析器。

S407：解析器接收数据对象。

S408：通过解析器解析数据对象。

S409：判断解析结果中的数据源是否为URL。在不是的情况下，执行步骤S410和S411，以及S415；在是的情况下，执行步骤S412至S415。

S410：通过解析器从数据源获取数据。

S411：将获取到的数据填充至解析结果。

S412：从解析结果中获取请求数据、响应数据。

其中，请求数据为待显示的图表中的数据属性，响应数据为待反馈的服务器中的数据字段。

S413：向URL定位的数据库服务器发送HTTP请求，并接收反馈的数据。

其中，HTTP请求中包括请求数据、响应数据，

S414：将反馈的数据填充至解析结果。

S415：根据解析结果，以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

从图4所述方法可以看出，解析器实际上起到了使前端代码段可视化显示、提供数据的作用。

在一些情况下，图3或图4所述的方法得到的前端代码段可以由开发人员复制到web应用程序开发过程的前端代码所在的文件或文件夹中，例如，复制到js文件中，或者也可以将全部的前端代码复制到一个新的文件中，并将这个新的文件加载至web应用程序开发项目中。在一些情况下，图3或图4所述的方法还可以包括如下步骤：接收代码保存指令；响应于代码保存指令，显示保存路径的输入入口；接收输入的保存路径；按照保存路径，保存图表的前端代码段。保存路径可以为web应用程序源代码的前端代码所在的文件或文件夹，即将用于生成用户所确认图表的前端代码段直接作为web应用程序源代码中的前端代码，在web应用程序开发的过程中，无需另外编写前端代码。

由此可见，图3或图4所述的方法实际上是一种可视化的简便的前端代码编程方法，通过该方法所得到的前端代码段是可以直接作为web应用程序的前端代码段来使用的。

本说明书实施例提供一种图表处理装置，如图5所示，包括第一获取单元10、第二获取单元20、第一接收单元30、调整单元40和解析显示单元50。

第一获取单元10用于获取被添加至目标区域内的目标图表组件的标识。

第二获取单元20用于获取预先设置的与标识对应的图表的前端代码段，图表的前端代码段用于限定图表中数据的显示样式，和/或图表在web页面中图表的显示样式。

第一接收单元30用于接收对目标图表组件中至少一个配置参数的调整指令；配置参数包括数据源。

调整单元40用于根据调整指令，对图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段。

解析显示单元50用于通过预先设置的解析器解析调整后的图表的前端代码段，并根据解析结果，以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

上述图表处理装置，提供可操作的图表组件，对于图表组件，提供数据源等配置参数，使得通过用户对图表组件的添加、调整操作来生成图表的前端代码段，使得用户的操作简单便捷；在生成前端代码段之后，通过预先设置的解析器解析前端代码段，并根据解析结果显示数据，方便用户确认显示效果；该方法实现了前端显示代码的编写与web应用程序的开发之间的解耦，可以独立于web应用程序开发项目而执行，使得开发人员能够在web应用程序开发之前提前与软件定制方确定图表显示样式，避免开发过程中重复多次修改，提升了确定图表样式的效率；生成的前端代码段能够直接作为web应用程序开发项目中的前端代码段，较大程度地提高了web应用程序开发的效率。

图6示出了本说明书实施例提供的另一种图表处理装置的原理框图。如图6所示，该装置包括第一获取单元10、第二获取单元20、第一接收单元30、调整单元40、打包单元60、第一发送单元70、第三接收单元80、解析显示单元90、判断单元100、第三获取单元110、第一填充单元120、第四获取单元130、第二发送单元140和第二填充单元150。

第一获取单元10用于获取被添加至目标区域内的目标图表组件的标识。

第二获取单元20用于获取预先设置的与标识对应的图表的前端代码段，图表的前端代码段用于限定图表中数据的显示样式，和/或图表在web页面中图表的显示样式。

第一接收单元30用于接收对目标图表组件中至少一个配置参数的调整指令；配置参数包括数据源。

调整单元40用于根据调整指令，对图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段。

打包单元60用于将调整后的图表的前端代码段打包成预定格式的数据对象。

第一发送单元70用于将数据对象发送至解析器。

第三接收单元80用于解析器接收数据对象。

解析单元90用于解析器解析数据对象。

判断单元100用于判断解析结果中的数据源是否为URL。

第三获取单元110用于在数据源不是URL的情况下，通过解析器从数据源获取数据。

第一填充单元120用于将获取到的数据填充至解析结果。

第四获取单元130用于在数据源是URL的情况下，从解析结果中获取请求数据、响应数据。其中，请求数据为待显示的图表中的数据属性，响应数据为待反馈的服务器中的数据字段。

第二发送单元140用于向URL定位的数据库服务器发送HTTP请求，并接收反馈的数据；其中，HTTP请求中包括请求数据、响应数据。

第二填充单元150用于将反馈的数据填充至解析结果。

显示单元160用于根据解析结果，以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

在一些实施例中，在用户未确定图表显示样式的情况下，重复执行下列操作：

第一接收单元30接收对目标图表组件中至少一个配置参数的调整指令；配置参数包括数据源。

调整单元根据40调整指令，对图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段。

解析显示单元50用于根据解析结果，并以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，得到图表显示结果。

在一些实施例中，图表处理装置还包括第四接收单元160、显示单元170、第五接收单元180和保存单元190。

第四接收单元160用于接收代码保存指令。

显示单元170用于响应于代码保存指令，显示保存路径的输入入口。

第五接收单元180用于接收输入的保存路径。

保存单元190用于按照保存路径，保存图表的前端代码段。

上述图表处理装置的描述及有益效果可以参阅方法部分的描述及有益效果，不再赘述。

本发明实施例还提供了一种电子设备，如图7所示，该电子设备可以包括处理器701和存储器702，其中处理器701和存储器702可以通过总线或者其他方式连接，图7中以通过总线连接为例。

处理器701可以为中央处理器(Central Processing Unit，CPU)。处理器701还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。

存储器702作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本发明实施例中的图表处理方法对应的程序指令/模块(例如，图5所示的第一获取单元10、第二获取单元20、第一接收单元30、调整单元40和解析显示单元50，或者图6所示的第一获取单元10、第二获取单元20、第一接收单元30、调整单元40、打包单元60、第一发送单元70、第三接收单元80、解析显示单元90、判断单元100、第三获取单元110、第一填充单元120、第四获取单元130、第二发送单元140和第二填充单元150)。处理器701通过运行存储在存储器702中的非暂态软件程序、指令以及模块，从而执行处理器的各种功能应用以及数据分类，即实现上述方法实施例中的图表处理方法。

存储器702可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储处理器701所创建的数据等。此外，存储器702可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器702可选包括相对于处理器701远程设置的存储器，这些远程存储器可以通过网络连接至处理器701。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

所述一个或者多个模块存储在所述存储器702中，当被所述处理器701执行时，执行如图3或图4所示实施例中的图表处理方法。

上述电子设备具体细节可以参阅图3或图4对应实施例中的相关描述和效果进行理解，此处不再赘述。

本说明书提供一种计算机存储介质，该计算机存储介质存储有计算机程序指令，该计算机程序指令被处理器执行时实现图3或图4所示方法的步骤。

本说明书提供一种计算机程序产品，该计算机程序产品包含有计算机程序，该计算机程序被处理器执行时实现图3或图4所示方法的步骤。

本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(Random AccessMemory，RAM)、快闪存储器(Flash Memory)、硬盘(Hard Disk Drive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。

在20世纪90年代，对于一个技术的改进可以很明显地区分是硬件上的改进(例如，对二极管、晶体管、开关等电路结构的改进)还是软件上的改进(对于方法流程的改进)。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件(Programmable Logic Device,PLD)(例如现场可编程门阵列(Field Programmable GateArray，FPGA))就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片2。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器(logic compiler)”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言(Hardware Description Language，HDL)，而HDL也并非仅有一种，而是有许多种，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware DescriptionLanguage)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(RubyHardware Description Language)等，目前最普遍使用的是VHDL(Very-High-SpeedIntegrated Circuit Hardware Description Language)与Verilog2。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

本说明书中的各个实施方式均采用递进的方式描述，各个实施方式之间相同相似的部分互相参见即可，每个实施方式重点说明的都是与其他实施方式的不同之处。

上述实施方式阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本申请时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施方式的某些部分的方法。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

虽然通过实施方式描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。

Claims (15)

1.一种图表处理方法，其特征在于，包括：

获取被添加至目标区域内的目标图表组件的标识；

获取预先设置的与所述标识对应的图表的前端代码段，所述图表的前端代码段用于限定图表中数据的显示样式，和/或图表在web页面中图表的显示样式；

接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；

根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；

通过预先设置的解析器解析调整后的图表的前端代码段，并根据解析结果，以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，得到图表显示结果。

2.根据权利要求1所述的方法，其特征在于，在得到调整后的图表的前端代码段之后，且在通过预先设置的解析器解析调整后的图表的前端代码段之前，还包括：

将调整后的图表的前端代码段打包成预定格式的数据对象；

将所述数据对象发送至解析器；

解析器接收所述数据对象；

相应地，所述通过预先设置的解析器解析调整后的图表的前端代码段，包括：通过预先设置的解析器解析所述数据对象。

3.根据权利要求2所述的方法，其特征在于，通过预先设置的解析器解析所述数据对象之后，包括：

判断解析结果中的数据源是否为URL；

在数据源不是URL的情况下，通过解析器从数据源获取数据；

将获取到的数据填充至解析结果。

4.根据权利要求3所述的方法，其特征在于，判断解析结果中的数据源是否为URL之后，还包括：

在数据源是URL的情况下，从解析结果中获取请求数据、响应数据；其中，所述请求数据为待显示的图表中的数据属性，所述响应数据为待反馈的服务器中的数据字段；

向所述URL定位的数据库服务器发送HTTP请求，并接收反馈的数据；其中，所述HTTP请求中包括所述请求数据、所述响应数据；

将反馈的数据填充至解析结果。

5.根据权利要求1所述的方法，其特征在于，在用户未确定图表显示样式的情况下，重复执行下列操作：

接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；

根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；

通过预先设置的解析器解析调整后的图表的前端代码段，并以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

6.根据权利要求1所述的方法，其特征在于，还包括：

接收代码保存指令；

响应于所述代码保存指令，显示保存路径的输入入口；

接收输入的保存路径；

按照所述保存路径，保存所述图表的前端代码段。

7.根据权利要求6所述的方法，其特征在于，所述保存路径包括web应用程序源代码的前端代码所在的文件或文件夹。

8.一种图表处理装置，其特征在于，包括：

第一获取单元，用于获取被添加至目标区域内的目标图表组件的标识；

第二获取单元，用于获取预先设置的与所述标识对应的图表的前端代码段，所述图表的前端代码段用于限定图表中数据的显示样式，和/或图表在web页面中图表的显示样式；

第一接收单元，用于接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；

调整单元，用于根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；

解析显示单元，用于通过预先设置的解析器解析调整后的图表的前端代码段，并根据解析结果，以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

9.根据权利要求8所述的装置，其特征在于，还包括：

打包单元，用于将调整后的图表的前端代码段打包成预定格式的数据对象；

第一发送单元，用于将所述数据对象发送至解析器；

第三接收单元，用于解析器接收所述数据对象；

相应地，所述解析显示单元通过预先设置的解析器解析所述数据对象。

10.根据权利要求9所述的装置，其特征在于，还包括：

判断单元，用于判断解析结果中的数据源是否为URL；

第三获取单元，用于在数据源不是URL的情况下，通过解析器从数据源获取数据；

第一填充单元，用于将获取到的数据填充至解析结果。

11.根据权利要求10所述的装置，其特征在于，还包括：

第四获取单元，用于在数据源是URL的情况下，从解析结果中获取请求数据、响应数据；其中，所述请求数据为待显示的图表中的数据属性，所述响应数据为待反馈的服务器中的数据字段；

第二发送单元，用于向所述URL定位的数据库服务器发送HTTP请求，并接收反馈的数据；其中，所述HTTP请求中包括所述请求数据、所述响应数据；

第二填充单元，用于将反馈的数据填充至解析结果。

12.根据权利要求8所述的装置，其特征在于，在用户未确定图表显示样式的情况下，重复执行下列操作：

第一接收单元接收对所述目标图表组件中至少一个配置参数的调整指令；所述配置参数包括数据源；

调整单元根据所述调整指令，对所述图表的前端代码段中至少一个配置参数进行调整，得到调整后的图表的前端代码段；

解析显示单元通过预先设置的解析器解析调整后的图表的前端代码段，并以调整后的图表的前端代码段所限定的显示样式显示数据源中的数据，以用于用户确认图表显示效果。

13.一种电子设备，其特征在于，包括：

存储器和处理器，所述处理器和所述存储器之间互相通信连接，所述存储器中存储有计算机指令，所述处理器通过执行所述计算机指令，从而实现权利要求1至7任一项所述方法的步骤。

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

15.一种计算机程序产品，其特征在于，包含有计算机程序，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述方法的步骤。

Images