CN110737850A

CN110737850A - 一种图表生成方法及装置

Info

Publication number: CN110737850A
Application number: CN201910855295.3A
Authority: CN
Inventors: 黄文辉; 孙迁; 杨成颖; 卢龙辉; 许星
Original assignee: Suning Cloud Computing Co Ltd
Current assignee: Suning Cloud Computing Co Ltd
Priority date: 2019-09-10
Filing date: 2019-09-10
Publication date: 2020-01-31

Abstract

本发明公开了一种图表生成方法及装置，该方法包括如下步骤：单页应用组件接收单页应用页面根据用户操作发出的图表生成请求，获取图表生成请求中的待生成图表的图表类型以及数据；单页应用组件调用预先定义的与图表类型对应的图形类，将数据生成对应图表。本发明通过胶水组件将图表逻辑与单页应用进行连接，而胶水组件不涉及任何图表逻辑，因此，可以轻松切换单页应用框架，并且可以通过更换组件实现来实现代码的复用，通过在抽象类提供所有图表类共用的方法，而由于图形类全部是该抽象类的子类，可以方便的使用抽象类里的逻辑，同时可以通过重写实现自己的定制化业务逻辑，因而可以提高复用程度。

Description

一种图表生成方法及装置

技术领域

本发明涉及技术开发技术领域，特别涉及一种图表生成方法及装置。

背景技术

图表是web开发中较为独立的内容，因为常常出现定制需求而难以做出满意的抽象。目前通行的图表库有两种，一种是通过配置生成图表，另一种则是提供各种友好的API，用户通过给定的API自己绘制图表。

虽然，这些图表库提供了优秀的绘图能力，但是如何将图表库高效、可维护的结合进单页应用成为一个空白领域。虽然对于只涉及数个图表的小型项目，可以选择将图表逻辑在各自的页面单独进行维护。但是，在以生成图表报告为核心的项目中，这样的方案必然会导致低复用、难维护等问题，尤其在大数据领域，上述情况尤为常见。并且，在传统项目中，人们往往聚焦于业务本身，强调快速实现图表的能力而忽视扩展行、复用性和可维护性。一旦后续对图表进行迭代，这样的做法将带来沉重的技术债，具体表现为：业务中的代码无法复用。即使设法抽取出公共逻辑，面对多变的业务未经合理组织的图表逻辑也显得非常脆弱，毫无扩展性。同时，一旦决定更换技术栈，耦合进组件的图表逻辑无法简单的分离，甚至不得不放弃旧的代码而重写。而且，目前的SPA(指单页Web应用)框架没有通行的、针对图表的插件，如何将图表和SPA应用进行结合，成为技术开发亟需解决的问题。

发明内容

为了解决现有技术的问题，本发明实施例提供了一种图表生成方法及装置，以克服现有技术中难以将图表生成和单页应用结合、图表实现逻辑与组件本身容易耦合以及图表实现逻辑复用性低等问题。

为解决上述一个或多个技术问题，本发明采用的技术方案是：

一方面，提供了一种图表生成方法，该方法包括如下步骤：

单页应用组件接收单页应用页面根据用户操作发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据；

所述单页应用组件调用预先定义的与所述图表类型对应的图形类，将所述数据生成对应图表。

进一步的，所述图形类通过使用图形引擎实现所继承的抽象类中定义的方法来实现，所述抽象类用于定义图形类需要实现的抽象方法以及所有图形类共用的方法。

进一步的，所述图形引擎为至少一个图表库。

进一步的，所述单页应用组件接收单页应用页面根据用户操作发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据包括：

所述单页应用组件通过与待生成图表对应的配置项接口接收用户在单页应用页面发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据。

进一步的，所述单页应用组件为胶水组件，所述胶水组件为不包含核心逻辑的组件。

另一方面，提供了一种图表生成装置，所述装置包括：

数据获取模块，用于单页应用组件接收单页应用页面根据用户操作发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据；

图表生成模块，用于所述单页应用组件调用预先定义的与所述图表类型对应的图形类，将所述数据生成对应图表。

进一步的，所述图形引擎为至少一个图表库。

进一步的，所述数据获取模块具体用于：

所述单页应用组件通过与待生成图表对应的配置项接口接收单页应用页面根据用户操作发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据。

本发明实施例提供的技术方案带来的有益效果是：

1、本发明实施例提供的图表生成方法及装置，通过胶水组件将图表逻辑与单页应用进行连接，而胶水组件不涉及任何图表逻辑，因此，可以轻松切换单页应用框架，并且可以通过更换组件实现来实现代码的复用；

2、本发明实施例提供的图表生成方法及装置，通过在抽象类提供所有图表类共用的方法，而由于图形类全部是该抽象类的子类，可以方便的使用抽象类里的逻辑，同时可以通过重写实现自己的定制化业务逻辑，因而可以提高复用程度；

3、本发明实施例提供的图表生成方法及装置，只需要增加配置项的定义，并在图表类中实现对应逻辑即可实现扩展，使用方便。

附图说明

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

图1是根据一示例性实施例示出的图表生成方法的流程图；

图2是根据另一示例性实施例示出的图表生成方法的流程图；

图3是根据一示例性实施例示出的图表生成装置的结构示意图。

具体实施方式

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

单页Web应用(single page web application，SPA)，就是只有一张Web页面的应用。单页应用程序(SPA)是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。

本发明实施例中，针对复杂的图表需求，将图表库与单页应用项目进行结合，适用于图表需求较重的项目，尤其适合数据可视化领域。使用本发明实施例提供的方案，图形逻辑高度聚合，对外仅暴露一个组件。当用户需要在项目中插入图形的时候，仅需要引入该图表生成组件，并传入数据、配置项和图表类型，即可生成图表。尤其配置项完全可控，可以自行控制粒度。另外，将图形实现聚集在一起，而不是分散在页面中，更方便管理。

图1是根据一示例性实施例示出的图表生成方法的流程图，参照图1所示，该方法包括如下步骤：

S101：单页应用组件接收单页应用页面根据用户操作发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据。

具体的，本发明实施例中，将预先定义的配置项接口以及图形类等以组件的形式实现在单页应用页面上。当用户有图表生成需求时，可以直接在单页应用页面上发出携带有待生成图表的图表类型以及数据等信息的图表生成请求，单页应用组件接收该图表生成请求，并从该图表请求中获取待生成图表的图表类型以及数据等信息，这里的数据是指需要生成图表的数据。其中，图表类型包括柱状图、饼状图、折线图、散点图、条形图、面积图、环状图、雷达图、气泡图、股价图、复合图等，本发明实施例中，不对图表类型做具体限制，因此这里不再一一列举。

S102：所述单页应用组件调用预先定义的与所述图表类型对应的图形类，将所述数据生成对应图表。

具体的，单页应用组件根据获取到的图表类型从预先定义的图形类中调用与图表类型对应的图形类，然后根据上述步骤获取到的数据绘制出对应的图表。

作为一种较优的实施方式，本发明实施例中，所述图形类通过使用图形引擎实现所继承的抽象类中定义的方法来实现，所述抽象类用于定义图形类需要实现的抽象方法以及所有图形类共用的方法。

具体的，首先，需要选定一个图表库，这个图表库用来实现项目中的图表(即用来支持图形实现)，将该图表库作为应用的图形引擎，作为一种较优的示例，本发明实施例中可以选取图表库D3作为图形引擎。

其次，需要根据实际需求定义一个抽象类，抽象类用来表征对问题领域进行分析、设计中得出的抽象概念，是对一系列看上去不同，但是本质上相同的具体概念的抽象。抽象类中需要定义图形类需要实现的抽象方法，并且在本发明实施例中，由抽象类提供所有图形类共用的方法。这里需要说明的是，将共用逻辑在抽象类里实现，由于图形类全部是该抽象类的子类，因此，可以方便的使用抽象类里的逻辑，同时可以通过重写实现定制化业务逻辑，提高复用性。以下为抽象类声明的一个示例：

最后，为每种图表实现其对应的图形类，该图形类需要继承自上述抽象类，并且使用上述步骤选定的图形引擎实现抽象类中的抽象方法。

作为一种较优的实施方式，本发明实施例中，所述图形引擎为至少一个图表库。

具体的，本发明实施例中，对具体选定的图表库的数量以及类型等均不做限定，用户可以根据自己的实际需求进行选取。例如，若是有需要，用户可以在一个项目中使用多个图表库作为图形引擎。除此之外，本发明实施例还支持针对特定图表进行定制化开发。

图2是根据另一示例性实施例示出的图表生成方法的流程图，参照图2所示，该方法包括如下步骤：

S201：单页应用组件接收用户在单页应用页面发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据。

S202：所述单页应用组件通过与待生成图表对应的配置项接口接收单页应用页面根据用户操作发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据。

具体的，作为一种较优的实施方式，本发明实施例中，还需要预先定义好每一类待实现图表的配置项接口。配置项接口用于接收用户输入的待生成图表的数据等信息。在定义配置项接口前，还可以先整理出所有待实现的图表(如柱状图、饼图、条形图等)，然后对这些待实现图表进行分类，再针对每一类待实现图表，定义它的配置项接口。然后单页应用组件通过与待生成图表对应的配置项接口接收用户在单页应用页面发出的图表生成请求，获取图表生成请求中的待生成图表的图表类型以及数据。例如，若是待生成图表为柱状图，则通过柱状图配置接口接收用户在单页应用页面发出的图表生成请求。

以下以柱状图为例，定义的配置项接口为：

以下是实现图形类的一个示例：

这里需要说明的是，本发明实施例中，还支持对待实现图表进行扩展，具体实施时，只需要针对待扩展的图表增加配置项的定义，并在图形类中实现对应的逻辑即可实现，操作简单方便。

作为一种较优的实施方式，本发明实施例中，所述单页应用组件为胶水组件，所述胶水组件为不包含核心逻辑的组件。

具体的，通常进行组件化开发时会倾向于使用组件对图形进行封装，以简化使用，但是，实际上这样操作会带来一定弊端。例如，一旦切换组件库，之前的图表逻辑全然无法再次使用。本发明实施例中，为了使图形逻辑和组件本身不耦合，使用了胶水组件来实现单页应用组件。胶水组件不包含核心逻辑，仅将图表实现方法封装成组件以供业务选择的组件框架使用。胶水组件为一个不包含核心逻辑的中间层，一个简单的封装，该中间层的作用是把核心业务封装成组件供视图核心的组件库使用。即胶水组件不涉及任何图表逻辑，只要组件开发框架提供基本的组件化开发能力，就可以通过更换组件来实现代码复用。因此，通过使用胶水组件这种方式，既可以享受组件带来的便利性，又可以获得图表库的复用性。

作为一种较优的实施方式，本发明实施例中，可以使用Vue或React等技术来实现单页应用组件。即如果是使用Vue技术，则实现一个Vue组件，如果是使用React技术，则实现React组件，以此类推。以下是使用Vue技术来实现单页应用组件的示例：

图2是根据一示例性实施例示出的图表生成装置的结构示意图，参照图2所示，该装置包括：

作为一种较优的实施方式，本发明实施例中，所述数据获取模块具体用于：

综上所述，本发明实施例提供的技术方案带来的有益效果是：

需要说明的是：上述实施例提供的图表生成装置在触发图表生成业务时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的图表生成装置与图表生成方法实施例属于同一构思，即该装置是基于该图表生成方法的，其具体实现过程详见方法实施例，这里不再赘述。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种图表生成方法，其特征在于，所述方法包括如下步骤：

2.根据权利要求1所述的图表生成方法，其特征在于，所述图形类通过使用图形引擎实现所继承的抽象类中定义的方法来实现，所述抽象类用于定义图形类需要实现的抽象方法以及所有图形类共用的方法。

3.根据权利要求2所述的图表生成方法，其特征在于，所述图形引擎为至少一个图表库。

4.根据权利要求1至3任一所述的图表生成方法，其特征在于，所述单页应用组件接收单页应用页面根据用户操作发出的图表生成请求，获取所述图表生成请求中的待生成图表的图表类型以及数据包括：

5.根据权利要求1至3任一所述的图表实现方法，其特征在于，所述单页应用组件为胶水组件，所述胶水组件为不包含核心逻辑的组件。

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

7.根据权利要求6所述的图表生成装置，其特征在于，所述图形类通过使用图形引擎实现所继承的抽象类中定义的方法来实现，所述抽象类用于定义图形类需要实现的抽象方法以及所有图形类共用的方法。

8.根据权利要求7所述的图表生成装置，其特征在于，所述图形引擎为至少一个图表库。

9.根据权利要求6至8任一所述的图表生成装置，其特征在于，所述数据获取模块具体用于：

10.根据权利要求6至8任一所述的图表实现装置，其特征在于，所述单页应用组件为胶水组件，所述胶水组件为不包含核心逻辑的组件。