CN106055535B - 一种图表生成方法及装置 - Google Patents

Abstract

本发明实施例公开了一种图表生成方法及装置，所述方法包括：获取配置信息以及脚本，所述配置信息是由用户在配置页面上对图表参数项进行配置后得到的，所述脚本是所述用户在配置所述图表参数项时所引用的脚本，所述脚本用于获取图表数据；将所述配置信息转化为图表库对应的原始配置参数；执行所述脚本以获取所述图表数据，并根据所述图表数据和所述原始配置参数生成最终配置参数，以供图表库原生接口调用所述最终配置参数。本发明实施例旨在提高图表制作的效率和可读性，从而降低图表制作的工作量以及技术门槛。

Description

一种图表生成方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种图表生成方法及装置。

背景技术

随着互联网技术的快速发展，人类制造的数据越来越多，互联网大数据也得到越来越多的重视。如果没有可视化的数据统计，数据的理解将越发困难。

在WEB前端技术的快速发展下，图表统计的开发工具越来越多的出现在用户的视野中，如：FusionCharts、Highcharts、Echarts等图表库工具。

然而，面对现有的各种图表库工具，对于很多用户来说还是很陌生，使用起来具有一定的难度，主要体现在以下几个方面：

1)、用户需要一定的时间熟悉图表库工具的使用方式和配置参数结构；

2)、用户使用图表统计时，针对不同的数据业务，还需要在后端开发数据获取和逻辑处理的相关代码，以获取业务数据提供给前端使用；

3)、当需要修改图表统计的结构或图表数据时，既要修改相关业务代码，还存在着版本发布所需的额外时间和风险。

发明内容

本发明实施例提供了一种图表生成方法及装置，旨在提高图表制作的效率和可读性，从而降低图表制作的工作量以及技术门槛。

有鉴于此，本发明第一方面提供一种图表生成方法，包括：

获取配置信息以及脚本，所述配置信息是由用户在图表库配置页面上对图表参数项进行配置后得到的，所述脚本是所述用户在配置所述图表参数项时所引用的脚本，所述脚本用于获取图表数据；

将所述配置信息转化为图表库对应的原始配置参数；

执行所述脚本以获取所述图表数据，并根据所述图表数据和所述原始配置参数生成最终配置参数，以供图表库原生接口调用所述最终配置参数。

相应地，所述根据所述图表数据和所述原始配置参数生成最终配置参数包括：

将所述图表数据添加到所述原始配置参数对应的图表参数项中，并生成最终配置参数。

相应地，所述根据所述图表数据和所述原始配置参数生成最终配置参数之后，所述方法还包括：

根据所述最终配置参数，对图表进行渲染。

相应地，所述获取配置信息以及脚本之前，所述方法还包括：

编写脚本。

相应地，结构化查询语言SQL脚本或敏捷开发语言Groovy脚本。

相应地，所述图表数据包括：图表图例、X轴数据、Y轴数据和系列Series数据。

本发明第一方面提供一种图表生成装置，包括：

页面配置器，用于获取配置信息以及脚本，所述配置信息是由用户在图表库配置页面上对图表参数项进行配置后得到的，所述脚本是所述用户在配置所述图表参数项时所引用的脚本，所述脚本用于获取图表数据；

配置参数解析器，用于将所述配置信息转化为图表库对应的原始配置参数；

脚本解析器，用于执行所述脚本以获取所述图表数据；

div加载器，用于根据所述图表数据和所述原始配置参数生成最终配置参数，以供图表库原生接口调用所述最终配置参数；

图表库原生接口，用于调用所述最终配置参数。

相应地，所述div加载器用于根据所述图表数据和所述原始配置参数生成最终配置参数包括：

所述div加载器用于将所述图表数据添加到所述原始配置参数对应的图表参数项中，并生成最终配置参数。

相应地，所述div加载器根据所述图表数据和所述原始配置参数生成最终配置参数之后，所述装置还包括：

渲染器，用于根据所述最终配置参数，对图表进行渲染。

相应地，所述页面配置器获取配置信息以及脚本之前，所述装置还包括：

脚本编辑器，用于编写脚本。

相应地，所述脚本包括：结构化查询语言SQL脚本或敏捷开发语言Groovy脚本。

相应地，所述图表数据包括：图表图例、X轴数据、Y轴数据和系列Series数据。

从以上技术方案可以看出，本发明实施例具有以下优点：

本发明实施例提供的技术方案中，通过获取配置信息以及脚本，并将配置信息转化为图表库对应的原始配置参数，且执行脚本以获取图表数据，并根据图表数据和原始配置参数生成最终配置参数，以供图表库原生接口调用最终配置参数，因此相对于现有技术，本发明实施例提高了图表制作的效率和可读性，降低了图表制作的工作量以及技术门槛。

附图说明

图1为本发明实施例中图表生成方法一个实施例的流程图；

图2为本发明实施例中图表生成方法一个实施例的示意图；

图3为本发明实施例中图表生成方法一个实施例的另一示意图；

图4为本发明实施例中图表生成方法一个实施例的另一示意图；

图5为本发明实施例中图表生成装置一个实施例的模块框图。

具体实施方式

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

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”和“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，图1为本发明实施例中图表生成方法一个实施例的流程图，该方法包括：

101、编写脚本；

本发明实施例通过脚本编辑器编写获取图表数据的脚本，该脚本可以是结构化查询语言SQL脚本或敏捷开发语言Groovy脚本，具体此处不做限定。

其中，图表数据可以包括：图表图例、X轴数据、Y轴数据和系列Series数据等。每个编写好的脚本均可以设置一个别名，在页面配置过程中若需要查询数据库获取图表数据，只需引用脚本对应的别名即可。这样方便图表数据的实时更改，简化了图表制作所涉及的后台数据获取的代码开发。每种类型的脚本必须返回特定规则的别名才能获取图表数据，以下是几个SQL脚本编写规范示例：

(1)获取图表图例：select columnname as‘legend’from tablename where…，其中返回字段名称必须为‘legend’；

(2)获取X轴数据：select columnname as‘x’from tablename where…，其中返回字段名称必须为‘x’；

(3)获取Y轴数据：select columnname as‘y’from tablename where…，其中返回字段名称必须为‘y’；

(4)获取series数据：select columnname as‘系列名称’from tablenamewhere…，其中返回字段名称必须与页面配置的“图例”一致。

应理解，在本发明实施例中，步骤101仅在图表库初始化之前执行，即在图表库出厂之前，会编写一些用来获取图表数据的脚本，并存放在图表库中，以供用户在配置图表时使用。

102、获取配置信息以及脚本；

本发明实施例中，配置信息是由用户在图表库配置页面上对图表参数项进行配置后得到的，脚本是用户在配置图表参数项时所引用的脚本，脚本用于获取图表数据。

具体地，用户在图表库配置页面上配置图表参数项时，图表配置器会根据用户的操作，获取相应的配置信息以及在配置的过程中引用的脚本，该脚本可以上述步骤101中编写的脚本中的一个或多个，具体此处不做限定。

在本发明实施例中，用户在引用脚本时，具体可以是在图表库配置页面上的某一个或多个图表参数项中填写所要引用的脚本对应的别名。

应理解，在现有技术中，用户使用图表统计时，针对不同的数据业务，需要在后端开发数据获取和逻辑处理的相关代码，以获取业务数据提供给前端使用。而且现有的图表不能随改随用，如果用户要对图表进行修改时，需要在后台修改相应的图表代码，之后再发布版本，这样比较消耗时间。而本发明实施例则直接通过脚本去获取图表数据，无需用户在后台编辑代码而得到。

本发明实施例中，配置信息可以是标题、图表风格、提示框、图例、工具箱、时间轴、XY坐标轴、Series项、加载提示等配置参数。页面配置器中对配置参数的每一项都有中文描述，有利于配置人员快速读懂图表参数的含义，避免分析生涩的json参数或学习官方文档，从而降低开发门槛。

请参阅图2至图4所示，本发明实施例是基于ECharts图表库(百度的一款图表库工具)的图表配置方法及插件的页面配置器的原型设计图：

(1)第一个页面(如图2所示)是基本信息tab页(页签)的设计原型，填写图表标题、展示风格、别名等信息。

(2)第二个页面(如图3所示)是图表的图例元素的配置项，包括布局方式、位置、图例内容、样式等，其中图例内容可以填写固定值或者引用脚本，固定值的项用逗号隔开。

(3)第三个页面(如图4所示)是图表的Series数据的配置项，包括系列类型、系列名称、标点、标线、图表数据，其中图表数据可以填写固定值或者脚本查询，系列名称必须与图例内容对应，多个图例要对应多个series数据，图上的“添加”按钮就是用来创建多个series数据的。

其次，本发明实施例中，用户只需要在页面配置器对应的配置页面上输入配置信息和引用脚本，提高了图表的易读性，同时降低了对用户的技术要求。再次，部署后再次更新图表，不需要考虑启停服务器等有关发布的工作，只需实时的修改图表配置即可。

103、将配置信息转化为图表库对应的原始配置参数；

页面配置器在获取了配置信息以及被引用的脚本之后，相应的，配置参数解析器会将配置信息转化为图表库对应的原始配置参数，该原始配置参数可以是图表库的标准规范的json参数，且该json参数可以持久化的保存在数据库中。

104、执行脚本以获取图表数据，并根据图表数据和原始配置参数生成最终配置参数，以供图表库原生接口调用最终配置参数；

具体地，当加载图表时，可通过div加载器加载图表所依赖的原生js文件，如<divchartId＝”chart_alias”></div>，其中chart_alias是图表配置的别名，并通过脚本解析器执行引用脚本，并获取引用脚本对应的图表数据，且将图表数据添加到原始配置参数对应的图表参数项中，并生成最终配置参数，该最终配置参数可以供图表库原生接口调用。本发明实施例区别于传统的图表开发方式，无需编写前端和后端代码，通过页面配置的方式配置开发图表，并进行预览测试，使用时以div+别名的方式加载即可。

105、根据最终配置参数，对图表进行渲染。

在div加载器加载得到最终配置参数之后，由图表库原生接口对该最终配置参数进行调用，图表库相应的图表展示单元会根据该最终配置参数进行展示图表操作，在图表库展示图表时，相应的，会对图表进行渲染，以得到更有直观效果的图表。

可见，本发明是利用图表库高自定义参数的特点，实现一种以页面配置的可视化方式操作图表配置参数项，从而达到控制图表展示效果的目的。

本发明实施例可以帮助用户快速的配置开发统计图表，降低开发工作量。而且以页面配置的方式开发图表，配置开发人员根据参数描述进行配置，提高了图表的易读性，同时降低了对开发者的技术要求。再次，部署后再次更新图表，不需要考虑启停服务器等有关发布的工作，只需实时的修改图表配置即可。

上面对本发明实施例中的图表生成方法进行了描述，下面对本发明实施例中的图表生成装置进行描述，请参阅图5，图5为本发明实施例中图表生成装置一个实施例的模块框图，该装置包括：

页面配置器201，用于获取配置信息以及脚本，配置信息是由用户在图表库配置页面上对图表参数项进行配置后得到的，脚本是用户在配置图表参数项时所引用的脚本，脚本用于获取图表数据；

配置参数解析器202，用于将配置信息转化为图表库对应的原始配置参数；

脚本解析器203，用于执行脚本以获取图表数据；

div加载器204，用于根据图表数据和原始配置参数生成最终配置参数，以供图表库原生接口调用最终配置参数；

图表库原生接口205，用于调用最终配置参数。

相应地，div加载器204用于根据图表数据和原始配置参数生成最终配置参数包括：

div加载器204用于将图表数据添加到原始配置参数对应的图表参数项中，并生成最终配置参数。

相应地，div加载器204根据图表数据和原始配置参数生成最终配置参数之后，装置还包括：

渲染器206，用于根据最终配置参数，对图表进行渲染。

相应地，页面配置器获取配置信息以及脚本之前，装置还包括：

脚本编辑器207，用于编写脚本。

相应地，脚本包括：结构化查询语言SQL脚本或敏捷开发语言Groovy脚本。

相应地，图表数据包括：图表图例、X轴数据、Y轴数据和系列Series数据。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文全称：Read-OnlyMemory，英文缩写：ROM)、随机存取存储器(英文全称：Random Access Memory，英文缩写：RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (8)

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

编写脚本，每个编写好的脚本设置有一个别名，所述脚本存放在图表库中，以供用户在配置图表时使用；

当用户在图表库配置页面上的一个或多个图表参数项中填写所要引用的脚本对应的别名之后，获取配置信息以及脚本，所述配置信息是由用户在图表库配置页面上对图表参数项进行配置后得到的，所述脚本是所述用户在配置所述图表参数项时所引用的脚本，所述脚本用于获取图表数据；

将所述配置信息转化为图表库对应的原始配置参数，所述原始配置参数是所述图表库的标准规范的json参数；

执行所述脚本以获取所述图表数据，并根据所述图表数据和所述原始配置参数生成最终配置参数，以供图表库原生接口调用所述最终配置参数；

所述根据所述图表数据和所述原始配置参数生成最终配置参数包括：

将所述图表数据添加到所述原始配置参数对应的图表参数项中，并生成最终配置参数。

2.根据权利要求1所述的方法，其特征在于，所述根据所述图表数据和所述原始配置参数生成最终配置参数之后，所述方法还包括：

根据所述最终配置参数，对图表进行渲染。

3.根据权利要求1所述的方法，其特征在于，所述脚本包括：结构化查询语言SQL脚本或敏捷开发语言Groovy脚本。

4.根据权利要求1所述的方法，其特征在于，所述图表数据包括：图表图例、X轴数据、Y轴数据和系列Series数据。

5.一种图表生成装置，其特征在于，包括：

脚本编辑器，用于编写脚本，每个编写好的脚本设置有一个别名，所述脚本存放在图表库中，以供用户在配置图表时使用；

页面配置器，用于当用户在图表库配置页面上的一个或多个图表参数项中填写所要引用的脚本对应的别名之后，获取配置信息以及脚本，所述配置信息是由用户在图表库配置页面上对图表参数项进行配置后得到的，所述脚本是所述用户在配置所述图表参数项时所引用的脚本，所述脚本用于获取图表数据；

配置参数解析器，用于将所述配置信息转化为图表库对应的原始配置参数，所述原始配置参数是所述图表库的标准规范的json参数；

脚本解析器，用于执行所述脚本以获取所述图表数据；

div加载器，用于根据所述图表数据和所述原始配置参数生成最终配置参数，以供图表库原生接口调用所述最终配置参数；

图表库原生接口，用于调用所述最终配置参数；

所述div加载器用于根据所述图表数据和所述原始配置参数生成最终配置参数包括：所述div加载器用于将所述图表数据添加到所述原始配置参数对应的图表参数项中，并生成最终配置参数。

6.根据权利要求5所述的装置，其特征在于，所述div加载器根据所述图表数据和所述原始配置参数生成最终配置参数之后，所述装置还包括：

渲染器，用于根据所述最终配置参数，对图表进行渲染。

7.根据权利要求5所述的装置，其特征在于，所述脚本包括：结构化查询语言SQL脚本或敏捷开发语言Groovy脚本。

8.根据权利要求5所述的装置，其特征在于，所述图表数据包括：图表图例、X轴数据、Y轴数据和系列Series数据。

Images