CN107015956B

CN107015956B - Web客户端中图表的绘制方法及装置

Info

Publication number: CN107015956B
Application number: CN201610912686.0A
Authority: CN
Inventors: 董晓庆
Original assignee: Alibaba Group Holding Ltd
Current assignee: Advanced New Technologies Co Ltd; Advantageous New Technologies Co Ltd
Priority date: 2016-10-19
Filing date: 2016-10-19
Publication date: 2020-04-14
Anticipated expiration: 2036-10-19
Also published as: CN107015956A

Abstract

本申请涉及计算机技术领域，尤其涉及一种Web客户端中图表的绘制方法及装置，在一种Web客户端中图表的绘制方法中，可以对输入的采用第一语言编写的语句代码进行分析，从而判断该语句代码是否为用于绘制图形的语句代码；当该语句代码是用于绘制图形的语句代码时，可以从Web服务器中获取该语句代码对应的数据集，并将该绘制图表的语句代码转换为Web客户端对应的绘图语句；之后根据上述数据集以及绘图语句，在Web客户端中绘制图表；也即本申请可以将采用其它语言编写的图形绘制语句转化为Web客户端对应的绘图语句，从而可以进一步在Web客户端中进行图表的绘制，由此，提高了Web客户端可绘制图表的广泛性。

Description

Web客户端中图表的绘制方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种Web客户端中图表的绘制方法及装置。

背景技术

传统技术中，当不需要对数据进行复杂的分析、计算等操作，就可以进行图表的绘制时，可以直接在Web客户端中完成图表的绘制；当需要在对数据进行复杂的分析、计算等操作之后，才能进行图表的绘制时，首先需要通过专门的数据分析工具(如，基于R语言的可视化分析工具)对数据进行分析、计算等操作，此处，数据分析工具对应的编程语言与Web客户端对应的编程语言不同，所以在对数据进行分析、计算等操作之后，只能在数据分析工具中进行图表的绘制，而无法在Web客户端中进行该图表的绘制；由此可以看出，传统技术中Web客户端可绘制的图表具有局限性。

发明内容

本申请描述了一种Web客户端中图表的绘制方法及装置，可以提高Web客户端可绘制图表的广泛性。

第一方面，提供了一种Web客户端中图表的绘制方法，该方法包括：

输入采用第一语言编写的语句代码；

对所述语句代码进行语法分析，以确定所述语句代码是否为用于绘制图形的语句代码；

当确定所述语句代码是用于绘制图形的语句代码时，向Web服务器发送数据获取请求，所述数据获取请求用于指示所述Web服务器获取所述语句代码对应的数据集；

接收所述Web服务器发送的所述数据集，将所述语句代码转换为Web客户端对应的绘图语句；

根据所述绘图语句以及所述数据集，在所述Web客户端中绘制图表。

第二方面，提供了一种Web客户端中图表的绘制装置，该装置包括：

输入单元，用于输入采用第一语言编写的语句代码；

分析单元，用于对所述输入单元输入的所述语句代码进行语法分析，以确定所述语句代码是否为用于绘制图形的语句代码；

发送单元，用于当所述分析单元确定所述语句代码是用于绘制图形的语句代码时，向Web服务器发送数据获取请求，所述数据获取请求用于指示所述Web服务器获取所述语句代码对应的数据集；

接收单元，用于接收所述Web服务器发送的所述数据集；

转换单元，用于将所述语句代码转换为Web客户端对应的绘图语句；

绘制单元，用于根据所述转换单元得到的所述绘图语句以及所述接收单元接收的所述数据集，在所述Web客户端中绘制图表。

本申请提供的Web客户端中图表的绘制方法及装置，可以对输入的采用第一语言编写的语句代码进行分析，从而判断该语句代码是否为用于绘制图形的语句代码；当该语句代码是用于绘制图形的语句代码时，可以从Web服务器中获取该语句代码对应的数据集，并将该绘制图表的语句代码转换为Web客户端对应的绘图语句；之后根据上述数据集以及绘图语句，在Web客户端中绘制图表；也即本申请可以将采用其它语言编写的图形绘制语句转化为Web客户端对应的绘图语句，从而可以进一步在Web客户端中进行图表的绘制，由此，提高了Web客户端可绘制图表的广泛性。

附图说明

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

图1为本申请提供的Web客户端中图表的绘制方法的应用场景示意图；

图2为本申请一种实施例提供的Web客户端中图表的绘制方法流程图；

图3为本申请提供的一种图表的示意图；

图4为本申请另一种实施例提供的Web客户端中图表的绘制方法的信息交互图；

图5为本申请提供的Web客户端中图表的绘制装置示意图。

具体实施方式

下面结合附图，对本发明的实施例进行描述。

本申请实施例提供的Web客户端中图表的绘制方法适用于根据其它语言编写的图形绘制语句在Web客户端中绘制图表的场景，此处的其它语言可以是指数据分析工具对应的编程语言，其通常不是Web客户端对应的编程语言。在一个例子中，上述其它语言可以是指R语言或者matlab语言等，而Web客户端对应的编程语言则可以为javascript语言等。在本说明书中，以其它语言为R语言为例进行说明。此外，上述图表可以是指所有常见的图表，如点图、线图、区域图、柱状图以及饼图等。

图1为本申请提供的Web客户端中图表的绘制方法的应用场景示意图，图1中，Web客户端可以包括R语言命令行工具101和图表绘制模块102，R语言命令行工具101可以是在Web客户端被启动时就开始运行，具体地，R语言命令行工具101在运行之后，可以对输入的采用R语言编写的语句代码(简称R语句)进行语法分析，以确定该语句代码是否为用于绘制图形的语句代码；如果该语句代码是用于绘制图形的语句代码，则可以将该语句代码发送至图表绘制模块102；图表绘制模块102在接收到该语句代码之后，可以从Web服务器获取该语句代码对应的数据集，其中，该数据集可以是指数据分析工具对原始数据进行复杂的分析、计算等操作之后得到的数据结果，此处，数据分析工具对数据进行的复杂的分析、计算等操作可以是基于R语言进行的；之后图表绘制模块102可以将上述语句代码转换为Web客户端对应的绘图语句(如，Javascript语句)；最后图表绘制模块102可以根据获取的数据集以及Web客户端对应的绘图语句，在Web客户端中绘制图表。

需要说明的是，上述是在语句代码是用于绘制图形的语句代码的情况下，R语言命令行工具101所执行的操作，当该语句代码不是用于绘制图形的语句代码时，可以将该语句代码发送至Web服务器，由Web服务器执行该语句代码，并返回执行结果。具体地，Web服务器可以包括数据服务模块103和R语言服务模块104，其中，数据服务模块103用于获取与图像绘制模块102发送的语句代码相对应的数据集，并将获取的数据集发送给图像绘制模块102；R语言服务模块104用于执行R语言命令行工具101发送的语句代码，并将该语句代码的执行结果返回给R语言命令行工具101。

图2为本申请一种实施例提供的Web客户端中图表的绘制方法流程图。所述方法的执行主体可以为图1中的Web客户端，如图2所示，所述方法具体可以包括：

步骤210，输入采用第一语言编写的语句代码。

此处可以是向R语言命令行工具101输入采用第一语言编写的语句代码。

上述第一语言可以是指数据分析工具对应的编程语言，其通常与Web客户端对应的编程语言不同。在一个例子中，该第一语言可以是指R语言。在第一语言为R语言时，上述第一语言编写的语句代码也可以称为R语句。

步骤220，对语句代码进行语法分析，以确定语句代码是否为用于绘制图形的语句代码。

此处，可以是由R语言命令行工具101对语句代码进行语法分析。

其中，步骤220具体可以包括：

对语句代码进行语法分析，以确定语句代码是否包含预设的绘图函数；

当语句代码包含预设的绘图函数时，确定语句代码是用于绘制图形的语句代码。

上述预设的绘图函数可以根据不同的语言来预先设定。举例来说，在第一语言为R语言时，预设的绘图函数可以为：g2()、point()等。在预设的绘图函数为上述两个函数的情况下，则如下两行语句代码均可以确定为用于绘制图形的语句代码。

p<-g2(data＝small,mapping＝attrs(x＝carat,y＝price,color＝cut))；

g2_point(p)；

其中，因为第一行语句代码包含了预设的绘图函数：g2()；第二行语句代码中包含了预设的绘图函数：point()，所以上述两行语句代码均可以确定为用于绘制图形的语句代码。

当然，在实际应用中，在第一语言为其它语言时，上述预设的绘图函数也可以设定为其它函数，如，第一语言为matlab时，预设的绘图函数可以为：fplot()或者stem()等，本申请对此不作限定。

步骤230，当确定语句代码是用于绘制图形的语句代码时，向Web服务器发送数据获取请求，该数据获取请求用于指示Web服务器获取语句代码对应的数据集。

此处，R语言命令行工具101在确定语句代码是用于绘制图形的语句代码时，可以将该语句代码发送至图表绘制模块102，由图表绘制模块102向Web服务器的数据服务模块103发送数据获取请求，数据服务模块103在接收到数据获取请求之后，获取该语句代码对应的数据集；之后数据服务模块103将获取的数据集发送至图表绘制模块102。在一个例子中，图表绘制模块102可以通过函数：data()来获取数据集，该函数的输入参数可以为数据集的名称。

此处的数据集可以是指数据分析工具对原始数据进行复杂的分析、计算等操作之后得到的数据结果。以原始数据为淘宝网系统中的业务数据为例来说，该原始数据可以是指一天的包裹数量以及店铺的成交额等；而数据集中的数据则可以是指一段时间的平均值、平均值、最高值等数据。

步骤240，接收Web服务器发送的数据集，将语句代码转换为Web客户端所能识别的绘图语句。

此处，可以是由图表绘制模块102接收数据服务模块103发送的数据集。图表绘制模块102在接收到数据集之后，可以对接收的数据集进行预处理，此处的预处理可以包括：从数据集中选取预设数量的数据记录等。可以理解的是，数据集中的数据量比较巨大，其通常包含了几万条的数据记录，而绘制图表可能只需要预设数量(如，1000条)的数据记录即可。

当然，在实际应用中，当数据集中的数据量比较小时，可以不执行上述对数据集进行预处理的步骤。

以绘制展示钻石的克拉数与价格之间的关系的点图图表为例来说，获取钻石的数据集(diamonds)以及对钻石的数据集进行预处理的过程可以如下所示：

require(ggplot2)//载入ggplot2的包,为了便于使用R语言的绘图函数

data(diamonds)//获取钻石的数据集

set.seed(42)//设置获取随机数的方式

small<-diamonds[sample(nrow(diamonds),1000),]//从钻石的数据集中随机获取1000条数据

head(small,n＝3L)//从1000条数据中随机选取3条数据，以便查看数据集所包含的字段以及各个字段的类型。

假设获取的3条数据如表1所示：

表1

从表1中可以看出，钻石的数据集中包含了：钻石的克拉数(carat)、钻石的切割工艺(cut)、钻石的颜色(color)、钻石的品质(clarity)、钻石的规整程度(depth)、钻石的价格(price)等字段。

在接收到数据集之后，或者在接收到数据集并对数据集进行预处理之后，可以将采用第一语言编写的语句代码转换为Web客户端对应的绘图语句，该转换过程具体可以为：

从存储单元中读取语句代码中包含的预设的绘图函数对应的目标绘图函数，其中，预设的绘图函数采用第一语言编写，目标绘图函数采用第二语言编写，第二语言是指Web客户端所能识别的语言，存储单元用于记录采用第一语言编写的绘图函数与采用第二语言编写的绘图函数的对应关系；

将预设的绘图函数替换为目标绘图函数，从而得到Web客户端对应的绘图语句。

以第一语言为R语言，第二语言为Javascript语言为例来说，存储单元的内容可以如表2所示。

表2

如前述例子，假设用于绘制图形的语句代码如下：

p<-g2(data＝small,mapping＝attrs(x＝carat,y＝price,color＝cut))；

g2_point(p)；

则转换后的Web客户端所能识别的绘图语句如下：

chart.source(data)

chart.point()

.position(‘carat*price’)

.color(‘cut’)

chart.render()；

步骤250，根据绘图语句以及数据集，在Web客户端中绘制图表。

其中，步骤250具体可以包括：

判断绘图语句的目标绘图函数是否包含输入参数；

当目标绘图函数包含输入参数时，从数据集中选取输入参数对应的数据；

将数据作为输入参数的参数值，根据目标绘图函数，在Web客户端中绘制图表。

以前述获得的Web客户端对应的绘图语句为例来说，目标绘图函数：chart.source()、chart.position()以及chart.color()均包含了输入参数，当数据集为钻石的数据集时，可以从钻石的数据集中选取“carat”字段的内容、“price”字段的内容以及“cut”字段的内容；并将整个钻石的数据集作为目标绘图函数：chart.source()的输入参数的参数值；而将钻石的数据集中“carat”字段的内容和“price”字段的内容作为目标绘图函数：chart.position()的输入参数的参数值，将钻石的数据集中“cut”字段的内容作为目标绘图函数：chart.color()的输入参数的参数值，根据目标绘图函数，在Web客户端中绘制的图表可以如图3所示，图3中，将“carat”字段的内容映射到了图表的x轴方向，将“price”字段的内容映射到了y轴方向，“cut”字段的不同内容用不同的颜色来表示。

综上，本申请实现了根据数据分析工具对数据的分析、计算结果，在Web客户端中绘制图表的功能；也即既利用了数据分析工具强大的数据分析能力，又可以直接在Web客户端中绘制图表，从而达到了将原本相分离的两个过程：数据的分析、计算过程和绘制图表的过程融合到一起的目的。

需要说明的是，上述步骤210-步骤250是在确定采用第一语言编写的语句代码是用于绘制图形的语句代码的情况下，Web客户端与Web服务器之间的信息交互过程，当确定语句代码不是用于绘制图形的语句代码时，向Web服务器发送语句代码，以用于Web服务器执行语句代码；接收Web服务器返回的语句代码的执行结果。

下面结合图4，以一个实际的绘制图表的过程为例，如，以绘制展示钻石的克拉数与价格之间的关系的点图图表为例，对本申请作进一步详细描述：

步骤410，R语言命令行工具101向R语言服务模块104发送语句代码：require(ggplot2)。

此处，由于语句代码：require(ggplot2)不是用于绘制图形的语句代码，所以R语言命令行工具101将该语句代码发送至R语言服务模块104，由R语言服务模块104执行该语句代码，并向R语言命令行工具101返回执行结果，此处的执行结果可以为：R语言服务模块104在R语言命令行工具101中载入ggplot2包。

步骤420，R语言命令行工具101向R语言服务模块104发送语句代码：data(diamonds)。

基于与上述语句代码同样的理由，由R语言服务模块104执行该语句代码，执行结果是：获取所请求的钻石的数据集。

步骤430，R语言命令行工具101向R语言服务模块104发送语句代码：set.seed(42)。

基于与上述语句代码同样的理由，由R语言服务模块104执行该语句代码，执行结果是：设定向R语言命令行工具101返回的数据量。

步骤440，R语言命令行工具101向R语言服务模块104发送语句代码：small<-diamonds[sample(nrow(diamonds),1000),]。

基于与上述语句代码同样的理由，由R语言服务模块104执行该语句代码，执行结果是：从数据集中获取1000条数据记录。

步骤450，R语言命令行工具101向R语言服务模块104发送语句代码：head(small,n＝3L)。

基于与上述语句代码同样的理由，由R语言服务模块104执行该语句代码，执行结果是：向R语言服务模块104返回1000条数据记录中的前3条数据记录。

步骤460，R语言命令行工具101向图表绘制模块102发送语句代码：p<-g2(data＝small,mapping＝attrs(x＝carat,y＝price,color＝cut))。

此处，由于语句代码：p<-g2(data＝small,mapping＝attrs(x＝carat,y＝price,color＝cut))是用于绘制图形的语句代码，所以R语言命令行工具101将该语句代码发送至图表绘制模块102。

步骤470，图表绘制模块102获取该语句代码对应的数据集：diamonds。

步骤480，将上述语句代码转换为如下的绘图语句：

chart.source(data)

chart.point()

.position(‘carat*price’)

.color(‘cut’)

并执行上述绘图语句。

步骤490，R语言命令行工具101向图表绘制模块102发送语句代码：g2_point(p)。

步骤4100，图表绘制模块102将该语句代码转换为如下的绘图语句：

chart.render()

并执行上述绘图语句，从而达到了在数据分析工具中对数据进行分析、计算等操作，之后根据计算结果在Web客户端中绘制图表的目的。从而使得在Web客户端中不仅能够根据简单的数据，进行图表的绘制；而且也能够根据数据分析工具的分析、计算结果，进行图表的绘制，也即提高了Web客户端中可绘制图表的广泛性。

需要说明的是，本申请在Web客户端中绘制的图表具有交互功能，如，鼠标移动到图表上展示详细信息、对数据进行筛选(某些分类的数据不显示，仅仅展示某个时间段的数据)等。

与上述Web客户端中图表的绘制方法对应地，本申请实施例还提供的一种Web客户端中图表的绘制装置，如图5所示，该装置包括：

输入单元501，用于输入采用第一语言编写的语句代码。

分析单元502，用于对输入单元501输入的语句代码进行语法分析，以确定语句代码是否为用于绘制图形的语句代码。

发送单元503，用于当分析单元502确定语句代码是用于绘制图形的语句代码时，向Web服务器发送数据获取请求，该数据获取请求用于指示Web服务器获取语句代码对应的数据集。

接收单元504，用于接收Web服务器发送的数据集。

转换单元505，用于将语句代码转换为Web客户端对应的绘图语句。

绘制单元506，用于根据转换单元505得到的绘图语句以及接收单元504接收的数据集，在Web客户端中绘制图表。

需要说明的是，上述输入单元501和分析单元502可以由图1中的R语言命令行工具101实现；发送单元503、接收单元504、转换单元505以及绘制单元506可以由图1中的图表绘制模块102实现。

可选地，分析单元502具体可以用于：

可选地，转换单元505具体可以用于：

从存储单元中读取语句代码中包含的预设的绘图函数对应的目标绘图函数，其中，预设的绘图函数采用第一语言编写，目标绘图函数采用第二语言编写，第二语言是指Web客户端对应的语言，存储单元用于记录采用第一语言编写的绘图函数与采用第二语言编写的绘图函数的对应关系；

可选地，绘制单元506具体可以用于：

判断绘图语句的目标绘图函数是否包含输入参数；

可选地，发送单元503，还用于当确定语句代码不是用于绘制图形的语句代码时，向Web服务器发送语句代码，以用于Web服务器执行语句代码；

接收单元504，还用于接收Web服务器返回的语句代码的执行结果。

本申请实施例装置的各功能模块的功能，可以通过上述方法实施例的各步骤来实现，因此，本申请提供的装置的具体工作过程，在此不复赘述。

本申请提供的Web客户端中图表的绘制方法，输入单元501输入采用第一语言编写的语句代码；分析单元502对语句代码进行语法分析，以确定语句代码是否为用于绘制图形的语句代码；当确定语句代码是用于绘制图形的语句代码时，发送单元503向Web服务器发送数据获取请求；接收单元504接收Web服务器发送的数据集；转换单元505将语句代码转换为Web客户端对应的绘图语句；绘制单元506根据绘图语句以及数据集，在Web客户端中绘制图表。由此，提高了Web客户端可绘制图表的广泛性。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本发明所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。

以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的技术方案的基础之上，所做的任何修改、等同替换、改进等，均应包括在本发明的保护范围之内。

Claims

1.一种Web客户端中图表的绘制方法，其特征在于，包括：

输入采用第一语言编写的语句代码；

2.根据权利要求1所述的方法，其特征在于，所述对所述语句代码进行语法分析，以确定所述语句代码是否为用于绘制图形的语句代码，包括：

对所述语句代码进行语法分析，以确定所述语句代码是否包含预设的绘图函数；

当所述语句代码包含所述预设的绘图函数时，确定所述语句代码是用于绘制图形的语句代码。

3.根据权利要求1所述的方法，其特征在于，所述将所述语句代码转换为Web客户端对应的绘图语句，包括：

从存储单元中读取所述语句代码中包含的预设的绘图函数对应的目标绘图函数，其中，所述预设的绘图函数采用第一语言编写，所述目标绘图函数采用第二语言编写，所述第二语言是指所述Web客户端对应的语言，所述存储单元用于记录采用第一语言编写的绘图函数与采用第二语言编写的绘图函数的对应关系；

将所述预设的绘图函数替换为所述目标绘图函数，从而得到Web客户端对应的绘图语句。

4.根据权利要求3所述的方法，其特征在于，所述根据所述绘图语句以及所述数据集，在Web客户端中绘制图表，包括：

判断所述绘图语句的目标绘图函数是否包含输入参数；

当所述目标绘图函数包含输入参数时，从所述数据集中选取所述输入参数对应的数据；

将所述数据作为所述输入参数的参数值，根据所述目标绘图函数，在Web客户端中绘制图表。

5.根据权利要求1-4任一项所述的方法，其特征在于，还包括：

当确定所述语句代码不是用于绘制图形的语句代码时，向所述Web服务器发送所述语句代码，以用于所述Web服务器执行所述语句代码；

接收所述Web服务器返回的所述语句代码的执行结果。

6.一种Web客户端中图表的绘制装置，其特征在于，包括：

输入单元，用于输入采用第一语言编写的语句代码；

接收单元，用于接收所述Web服务器发送的所述数据集；

7.根据权利要求6所述的装置，其特征在于，所述分析单元具体用于：

8.根据权利要求6所述的装置，其特征在于，所述转换单元具体用于：

9.根据权利要求8所述的装置，其特征在于，所述绘制单元具体用于：

判断所述绘图语句的目标绘图函数是否包含输入参数；

10.根据权利要求6-9任一项所述的装置，其特征在于，

所述发送单元，还用于当确定所述语句代码不是用于绘制图形的语句代码时，向所述Web服务器发送所述语句代码，以用于所述Web服务器执行所述语句代码；

所述接收单元，还用于接收所述Web服务器返回的所述语句代码的执行结果。