CN106780656A - 图表输出方法及装置 - Google Patents

Abstract

本发明提供了一种图表输出方法及装置，包括：接收图表参数；根据所述图像参数选择图表可视化语言；解析所述图表可视化语言并输出对应的图表。通过本发明，解决了相关技术中绘制echarts时过于复杂的技术问题，有效缩短了设计人员在设计图表展示方式时查阅复杂参数的时间，由于可视化语言封装了绘图参数中重复部分的代码，因此可以有效减少开发人员的代码量，使用者可以通过修改可视化语句，来实现修改图表的展示方式。

Description

图表输出方法及装置

技术领域

本发明涉及数据库领域，具体而言，涉及一种图表输出方法及装置。

背景技术

SKYONE:航空公司管理航班、客票等各类业务的统一前端产品，是众多后台信息服务的统一用户界面。

Web端：使用浏览器访问的产品界面。

TUI：TravelSky UI(航空公司业务前端用户界面组件库)。

TuiCharts：TUI组件库中的图表框架，实现了该专利的组件。

echarts：百度旗下的开源图表框架。

highcharts：挪威Highsoft公司旗下的图标框架。

API：Application Programming Interface(应用程序编程接口)

递归调用：递归调用是一种特殊的嵌套调用，是某个函数调用自己，而不是另外一个函数

JavaScript：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

二叉树：在计算机科学中，二叉树是每个节点最多有两个子树的树结构。

深度优先：深度优先是一种搜索算法(Depth-First-Search)。是沿着树的深度，遍历树的节点，尽可能深的搜索树的分支。

在相关技术中的SKYONE产品中，有众多业务模块需要将大量的数据用图表的方式展示。这些图表以：折线图、柱状图和饼状图为主，主要展示航班的运力、客座率、订座数和折扣的变化关系。由于这些数据一般需要以日、月、年为单位，多个航段或航空公司进行比较展示，因此，SKYONE的产品设计人员在设计自己的模块功能时，需要将这些数据进行大量的比较，并仔细研究哪种数据搭配和哪种图表展示方式能够让用户清晰的辨识。在产品人员做上述的工作时，主要需要经历以下几个步骤：

了解用户需要关注哪些数据变化

这些数据变化用什么方式展示(是柱状图？折线图？还是饼状图？)

尝试将各类数据的图表画出，并搭配在一起，进行用户研究，选择用户最需要的方式。

通过评审定下方案，编写文档并移交给开发人员进行产品研发。

在上述步骤中，第2,3,4步都涉及图表绘制的工作，其中，2,3需要产品设计人员使用图表框架在Web端绘制效果图，第4步需要开发人员在项目中使用图表框架编写绘图代码。

Web端的图表框架众多，其中以国内的echarts、国外的highcharts为典型代表。它们提供丰富的参数和API，由使用者编写参数配置，并通过图表框架的接口传入参数，在浏览器上显示相应的图表。由于这些图表框架功能众多，配置较为复杂，因此产品设计人员和开发人员在完成上述2,3,4步骤时，会遇到以下几个问题：配置参数过于复杂，导致使用者在绘制简单图表时，仍然耗费了大量的时间阅读手册。绘制不同的图表，仍然有很多参数或代码是重复和冗余的。使用者耗费了更多的精力在图表的外观和展示方式上。(例如将复杂关系的折线图变成柱状图，需要修改多处参数才能实现)

针对相关技术中存在的上述问题，目前尚未发现有效的解决方案。

发明内容

本发明旨在提供一种图表输出方法及装置，解决了相关技术中绘制echarts时过于复杂的技术问题。

本发明提供了一种图表输出方法，包括：接收图表参数；根据所述图像参数选择图表可视化语言；解析所述图表可视化语言并输出对应的图表。

可选的，所述图表内容包括：图表名称、图表对应的横坐标内容和纵坐标内容、图表相关的数据。

可选的，根据所述图像参数选择图表可视化语言包括：根据所述图像参数选择可视化语言函数、可视化语言关系符号、可视化语言变量。

可选的，解析所述图表可视化语言并输出对应的图表包括：使用TuiCharts组件解析所述图表可视化语言并输出对应的图表。

可选的，所述函数名称包含以下至少之一：折线图、柱状图、饼状图。

可选的，所述关系符号包括以下至少之一：并列、包含、叠加或反向叠加、成对出现；其中，不同的关系符号对应不同的运算优先级。

可选的，使用TuiCharts组件解析所述图表可视化语言并输出对应的图表包括；对所述可视化语言进行词法分析；对所述可视化语言进行语法解析生成中间对象；根据所述中间对象生成企业图表库echarts参数，使用所述echarts参数绘制echarts并输出。

可选的，对所述可视化语言进行词法分析包括：从所述可视化语言的第一个字符开始循环判断所述可视化语言的所有字符是否合法。

可选的，对所述可视化语言进行语法解析生成中间对象包括：将所述可视化语言的语句分解成多个最小的关系单元；根据关系符号处理两个相邻关系单元得到中间对象；将所述临时结果加入到二叉树结构的上一层最小关系单元中进行处理得到所述可视化语言中除函数外所有语句的中间对象。

可选的，根据所述中间对象生成企业图表库echarts参数，使用所述echarts参数绘制echarts并输出包括：从所述中间对象的叶子节点开始深度优先处理二叉树，将所有的变量名称所指向的数据按照关系符号进行对应的运算，将运算得到的处理结果返回给当前节点的父节点，直到计算到所述中间对象的根节点；以JavaScript的数组类型保存所述中间对象的计算结果，得到包含所有中间对象的所有计算结果的数组；将所述数组确定为所述echarts参数；将所述echarts参数、所述图表参数交给echarts接口绘制echarts并输出。

本发明提供了一种图表输出装置，包括：接收模块，用于接收图表参数；选择模块，用于根据所述图像参数选择图表可视化语言；处理模块，用于解析所述图表可视化语言并输出对应的图表。

可选的，所述图表内容包括：图表名称、图表对应的横坐标内容和纵坐标内容、图表相关的数据。

可选的，根据所述图像参数选择图表可视化语言包括：根据所述图像参数选择可视化语言函数、可视化语言关系符号、可视化语言变量。

可选的，所述处理模块用于使用TuiCharts组件解析所述图表可视化语言并输出对应的图表。

可选的，所述函数名称包含以下至少之一：折线图、柱状图、饼状图。

可选的，所述关系符号包括以下至少之一：并列、包含、叠加或反向叠加、成对出现；其中，不同的关系符号对应不同的运算优先级。

可选的，所述处理模块包括：第一分析单元，用于对所述可视化语言进行词法分析；第二分析单元，用于对所述可视化语言进行语法解析生成中间对象；处理单元，用于根据所述中间对象生成企业图表库echarts参数，使用所述echarts参数绘制echarts并输出。

根据本发明的实施例，接收图表参数；根据所述图像参数选择图表可视化语言；解析所述图表可视化语言并输出对应的图表。解决了相关技术中绘制echarts时过于复杂的技术问题，有效缩短了设计人员在设计图表展示方式时查阅复杂参数的时间，由于可视化语言封装了绘图参数中重复部分的代码，因此可以有效减少开发人员的代码量，使用者可以通过修改可视化语句，来实现修改图表的展示方式。

附图说明

构成本申请的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的图表输出方法的流程图；

图2是本发明实施例使用图表可视化语句绘图的过程图；

图3是本发明实施例的图表可视化语言的解析过程图；

图4是本发明实施例的词法分析的代码循环流程；

图5是本发明实施例的递归单元的处理逻辑图；

图6是本发明实施例解析“line(a+(b+c)>d,e)”语句的中间对象的二叉树结构示意图；

图7是根据本发明实施例的图表输出装置的结构框图；

图8为本发明实施例设置了“line(a,b)”所绘制出的图表效果图。

具体实施方式

下面将参考附图并结合实施例来详细说明本发明。

图1是根据本发明实施例的图表输出方法的流程图，如图1所示，该方法包括：

步骤S102，接收图表参数；

步骤S104，根据图像参数选择图表可视化语言；

步骤S106，解析图表可视化语言并输出对应的图表。

通过本实施例的上述步骤，接收图表参数；根据所述图像参数选择图表可视化语言；解析所述图表可视化语言并输出对应的图表。解决了相关技术中绘制echarts时过于复杂的技术问题，有效缩短了设计人员在设计图表展示方式时查阅复杂参数的时间，由于可视化语言封装了绘图参数中重复部分的代码，因此可以有效减少开发人员的代码量，使用者可以通过修改可视化语句，来实现修改图表的展示方式。

本实施例的图表内容包括：图表名称、图表对应的横坐标内容和纵坐标内容、图表相关的数据。

可选的，根据图像参数选择图表可视化语言包括：根据图像参数选择可视化语言函数、可视化语言关系符号、可视化语言变量。

可选的，解析图表可视化语言并输出对应的图表包括：使用TuiCharts组件解析图表可视化语言并输出对应的图表。

本实施例的函数名称包含以下至少之一：折线图、柱状图、饼状图。本实施例的关系符号包括以下至少之一：并列、包含、叠加或反向叠加、成对出现；其中，不同的关系符号对应不同的运算优先级。

可选的，使用TuiCharts组件解析图表可视化语言并输出对应的图表包括；

S11，对可视化语言进行词法分析；

S12，对可视化语言进行语法解析生成中间对象；

S13，根据中间对象生成企业图表库echarts参数，使用echarts参数绘制echarts并输出。

可选的，对可视化语言进行词法分析包括：从可视化语言的第一个字符开始循环判断可视化语言的所有字符是否合法。

可选的，对可视化语言进行语法解析生成中间对象包括：

S21，将可视化语言的语句分解成多个最小的关系单元；

S22，根据关系符号处理两个相邻关系单元得到中间对象；

S23，将临时结果加入到二叉树结构的上一层最小关系单元中进行处理得到可视化语言中除函数外所有语句的中间对象。

可选的，根据中间对象生成企业图表库echarts参数，使用echarts参数绘制echarts并输出包括：

S31，从中间对象的叶子节点开始深度优先处理二叉树，将所有的变量名称所指向的数据按照关系符号进行对应的运算，将运算得到的处理结果返回给当前节点的父节点，直到计算到中间对象的根节点；

S32，以JavaScript的数组类型保存中间对象的计算结果，得到包含所有中间对象的所有计算结果的数组；

S33，将数组确定为echarts参数；

S34，将echarts参数、图表参数交给echarts接口绘制echarts并输出。

下面结合根据本实施例的具体实施方式，结合实例进行详细具体的说明和介绍：

TUI中的TuiCharts组件，就是本实施例的具体实施成果，该组件在传入需要绘制的图表数据之后，使用图表的可视化语言进行绘图。组件的使用流程为：

设置标题、数据、横纵坐标内容。

设置图表可视化语言。

解析图表可视化语句。

绘图。

其过程为图2所示，图2是本发明实施例使用图表可视化语句绘图的过程图。

图表可视化语言

可视化语言包含三个函数名称、五个关系符号、最多26个变量的名称，由使用者根据想要的图形输入相应的可视化语句，TuiCharts组件会自动解析该语句并绘图。

函数名称包含以下三个：

line表示折线图

column表示柱状图

pan表示饼状图

关系符号有以下四类：

，表示并列

>表示包含

+-表示叠加或反向叠加

()成对出现，用于提高某一个符号的优先级

关系符号责描述各个数据之间按照什么方式显示图表。上面给出的关系符号顺序从上到下表示了关系之间的优先级。“，”号的优先级最低，最后运算。“()”的优先级最高，被“()”括起来的运算会最先运算。

变量名称由“a”，“b”，“c”等26个小写英文字母表示，其中，“a”表示第一组数据，“b”表示第二组数据，“c”表示第三组数据，以此类推。由于英文小写字母只有26个，因此变量名称最多支持26个，多出的数据将不被支持。(据统计，绝大多数的图表中的指标不会超过26个，一张图上超过26个指标的图表将超出一般用户的理解能力，因此，多出的暂不支持)。

图表的可视化语言由关系符号连接变量，再由函数名称划定范围而形成。例如：“line(a+b),column(c,d>e)”就是一个完整的可视化语句示例。它可以让TuiCharts组件唯一确定图表最后的显示结果。

图表可视化语言的解析

给出了可视化语句之后，TuiCharts将经过：词法分析、语法解析、生成中间对象、生成echarts参数、echarts绘图这几个步骤。其中涉及该专利发明的部分有：词法分析、语法解析、生成临时对象、生成echarts参数这四部分，如图3所示，图3是本发明实施例的图表可视化语言的解析过程图。

下面解释每一个部分详细思路：

a.词法分析

由于可视化语句(后简写为语句)是使用者自己书写的，词法分析部分主要用于判断该语句是否符合规范，以保证给后续的部分操作中词法是正确无误的。用户给出的语句在技术层面是一个字符串(string类型)，词法分析将会从语句的第一个字符开始不断循环，来判断当前这个字符是否可以出现。图4为词法分析部分的核心流程，它是一个程序循环，不断循环每一个字符是否合法。

需要说明是，图4是本发明实施例的词法分析的代码循环流程，图4中的词法逻辑判断是该部分的核心部分，它会记录上一个字符的内容和当前不能出现什么，如果当前字符的内容是记录中不允许出现的字符，则会认为语法错误。例如：如果上一个字符是“-”，那么当前字符将不能是其他关系符号，因此语句：“line(a-+b)”将会判定为错误的词法。

b.语法解析和中间对象

在经过词法分析之后，由于所有错误的语句已经被终止，因此，该部分将默认所有语句都是正确的。语法解析的过程将是一个递归调用的过程，即：将语句分解成最小的关系单元。

最小关系单元可以理解为最简单的语句：“a+b”。它的组成方式是：“变量名称关系符号变量名称”，表示第一组数据和第二组数据之间是什么关系。每一个关系单元，将只关注两个变量和中间的操作。因此，对于：“a+b>c”这种语句，由于“+”的优先级大于“>”，因此，先做“+”，递归调用的步骤是：

先处理“a+b”,将该操作的结果临时保存为A

再处理“A>c”。

每处理一个最小关系单元，都会得到一个临时的结果，这个临时的结果会被加入到上一层的最小关系单元中进行处理，依次类推，最后得到除了函数之外，其他所有语句的处理结果。图5是本发明实施例的递归单元的处理逻辑图。

经过递归处理后的结果，再根据函数对其增加属性。如果函数是line(折线图)，则将处理结果增加折线图的相关参数。如果是column(柱状图)，则将处理结果增加柱状图的相关参数。

增加了图形类型参数的中间结果就是中间对象。中间对象是一个JavaScript的对象(Object类型)数据，它是一个二叉树，它的每一层节点是关系符号运算，每一个分支的叶子节点是所运算的数据变量名称。例如：“line(a+(b+c)>d,e)”语句，经过语法解析后会得到图6所示的二叉树结构，图6是本发明实施例解析“line(a+(b+c)>d,e)”语句的中间对象的二叉树结构示意图，用于下一个步骤：“生成echarts”参数准备。

c.生成echarts参数

中间对象用于生成echarts参数，在这个过程中，程序会从中间对象的根节点开始，深度优先处理二叉树，将所有的变量名称所指向的数据，按照关系符号进行对应的运算(例如：如果是line的“+”号，则将两个变量所指向的数据依次相加)。每处理一个二叉树节点，将向它的父节点返回一个处理好的结果，该结果会参与父节点的符号运算，依次类推，一直计算到根节点。所有结果都以JavaScript的数组(Array类型)类型保存。

当所有结果计算到根节点时，将得到一个包含所有数据的数组，这部分数组就是echarts的数据部分参数。然后，程序再根据使用者提供的标题、横纵坐标等信息，生成完整的echarts图表参数，交给echarts接口进行绘图操作。

图7是根据本发明实施例的图表输出装置的结构框图，如图7所示，包括：接收模块70，用于接收图表参数；选择模块72，用于根据所述图像参数选择图表可视化语言；处理模块74，用于解析所述图表可视化语言并输出对应的图表。

可选的，所述图表内容包括：图表名称、图表对应的横坐标内容和纵坐标内容、图表相关的数据。

可选的，根据所述图像参数选择图表可视化语言包括：根据所述图像参数选择可视化语言函数、可视化语言关系符号、可视化语言变量。

可选的，所述处理模块用于使用TuiCharts组件解析所述图表可视化语言并输出对应的图表。

可选的，所述函数名称包含以下至少之一：折线图、柱状图、饼状图。

可选的，所述关系符号包括以下至少之一：并列、包含、叠加或反向叠加、成对出现；其中，不同的关系符号对应不同的运算优先级。

可选的，所述处理模块包括；第一分析单元，用于对所述可视化语言进行词法分析；第二分析单元，用于对所述可视化语言进行语法解析生成中间对象；处理单元，用于根据所述中间对象生成企业图表库echarts参数，使用所述echarts参数绘制echarts并输出。

下面使用具体实施方式进行说明：

TuiCharts是支持图表可视化语言的组件，通过使用该组件，可以体现所有该专利所涉及的实施方式。

使用TuiCharts将会非常简单，使用者只需向TuiCharts提供标题、横纵坐标以及数据，然后设置可视化语句规则就可以看到图表效果了。为了说明具体的实施方案，下面给出使用它的示例代码：

var c＝new TuiCharts($('#charts'))；//实例化对象

c.setOption({

title:'年度旅客量统计',//设置标题

tuiXAxis:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],//设置横坐标数据

tuiData:window.chartsData.data//设置数据

})；

在设置完需要的数据之后，就可以使用可视化语句进行定义并且画图了。

c.rules＝'line(a,b)'；

c.dealRules()；//解析语句

c.drawChart()；//画图

图8为本发明实施例设置了“line(a,b)”所绘制出的图表效果图。

使用者可以根据自己的需要，任意设置可视化语法，TuiCharts会分别绘制出相应的图表。

通过本实施例，有效的减少了使用者在网页上绘制图表时所耗费的时间，使用者不必查询复杂的echarts参数，通过简单的可视化语法即可实现所有参数的自动生成并绘图。为使用者提供快捷方便的图表展示的方式，使用者通过修改可视化语法，可以直接得到图表的效果，使得使用者可将更多的精力集中在数据表的用途上面，而不是制作和调试上面。可以有效减少程序开发者的代码行数，开发者除需要设置必要的数据之外，只需通过一条可视化语句来定义图表的展示方式。

以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (17)

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

接收图表参数；

根据所述图像参数选择图表可视化语言；

解析所述图表可视化语言并输出对应的图表。

2.根据权利要求1所述的方法，其特征在于，所述图表内容包括：图表名称、图表对应的横坐标内容和纵坐标内容、图表相关的数据。

3.根据权利要求1所述的方法，其特征在于，根据所述图像参数选择图表可视化语言包括：

根据所述图像参数选择可视化语言函数、可视化语言关系符号、可视化语言变量。

4.根据权利要求1所述的方法，其特征在于，解析所述图表可视化语言并输出对应的图表包括：

使用TuiCharts组件解析所述图表可视化语言并输出对应的图表。

5.根据权利要求1所述的方法，其特征在于，所述函数名称包含以下至少之一：折线图、柱状图、饼状图。

6.根据权利要求1所述的方法，其特征在于，所述关系符号包括以下至少之一：

并列、包含、叠加或反向叠加、成对出现；

其中，不同的关系符号对应不同的运算优先级。

7.根据权利要求4所述的方法，其特征在于，使用TuiCharts组件解析所述图表可视化语言并输出对应的图表包括；

对所述可视化语言进行词法分析；

对所述可视化语言进行语法解析生成中间对象；

根据所述中间对象生成企业图表库echarts参数，使用所述echarts参数绘制echarts并输出。

8.根据权利要求7所述的方法，其特征在于，对所述可视化语言进行词法分析包括：

从所述可视化语言的第一个字符开始循环判断所述可视化语言的所有字符是否合法。

9.根据权利要求7所述的方法，其特征在于，对所述可视化语言进行语法解析生成中间对象包括：

将所述可视化语言的语句分解成多个最小的关系单元；

根据关系符号处理两个相邻关系单元得到中间对象；

将所述临时结果加入到二叉树结构的上一层最小关系单元中进行处理得到所述可视化语言中除函数外所有语句的中间对象。

10.根据权利要求7所述的方法，其特征在于，根据所述中间对象生成企业图表库echarts参数，使用所述echarts参数绘制echarts并输出包括：

从所述中间对象的叶子节点开始深度优先处理二叉树，将所有的变量名称所指向的数据按照关系符号进行对应的运算，将运算得到的处理结果返回给当前节点的父节点，直到计算到所述中间对象的根节点；

以JavaScript的数组类型保存所述中间对象的计算结果，得到包含所有中间对象的所有计算结果的数组；

将所述数组确定为所述echarts参数；

将所述echarts参数、所述图表参数交给echarts接口绘制echarts并输出。

11.一种图表输出装置，其特征在于，包括：

接收模块，用于接收图表参数；

选择模块，用于根据所述图像参数选择图表可视化语言；

处理模块，用于解析所述图表可视化语言并输出对应的图表。

12.根据权利要求11所述的装置，其特征在于，所述图表内容包括：图表名称、图表对应的横坐标内容和纵坐标内容、图表相关的数据。

13.根据权利要求11所述的装置，其特征在于，根据所述图像参数选择图表可视化语言包括：

根据所述图像参数选择可视化语言函数、可视化语言关系符号、可视化语言变量。

14.根据权利要求11所述的装置，其特征在于，所述处理模块用于使用TuiCharts组件解析所述图表可视化语言并输出对应的图表。

15.根据权利要求11所述的装置，其特征在于，所述函数名称包含以下至少之一：折线图、柱状图、饼状图。

16.根据权利要求11所述的装置，其特征在于，所述关系符号包括以下至少之一：

并列、包含、叠加或反向叠加、成对出现；

其中，不同的关系符号对应不同的运算优先级。

17.根据权利要求14所述的装置，其特征在于，所述处理模块包括；

第一分析单元，用于对所述可视化语言进行词法分析；

第二分析单元，用于对所述可视化语言进行语法解析生成中间对象；

处理单元，用于根据所述中间对象生成企业图表库echarts参数，使用所述echarts参数绘制echarts并输出。