CN112328317A - 一种基于node-canvas的服务端生成图表方法 - Google Patents

Abstract

本发明公开一种基于node‑canvas的服务端生成图表方法，该方法基于restful服务接口的可视化图表生成，可以灵活支持不同服务端不同服务地址部署的生成图表需求，接口保证和服务端网络畅通就可实现生成图片需求，服务间保证以restful接口方式交互，因此无论客户端是哪种类型语言或平台，支持http协议即可进行能力的调用并获取根据参数生成的图表，而且设置在服务端无需部署任何浏览器服务中间件，都可通过nodejs的服务端canvas绘制能力和请求绘图的第三方库参数进行绘制，且保证和在浏览器端相同的画图配置项，且扩展生成图片的属性，甚至绘图使用第三方库的选项及动态数据处理的函数。

Description

一种基于node-canvas的服务端生成图表方法

技术领域

本发明涉及IT可视化领域，尤其是一种基于node-canvas的服务端生成图表方法，主要用于后端的可视化支持功能。

背景技术

IT可视化目前发展迅猛，当前可视化图表支持的套件非常丰富，但是主要应用于系统的Web页面的图表渲染展现居多，可视化图表主要用于明确展示业务数据的逻辑性和突出展示数据的价值。在很多场景下，页面的图表很可能会应用于后端的业务文档生成的一部分素材，这时则不会产生和前端浏览器的交互，没有了浏览器内核的支持，图表渲染则无法在后端生成和获取，因此即便有再丰富的图表套件支持，后端需要使用这些图表都无从下手。目前使用的方式是通过在服务器安装浏览器内核库调用其api的方式进行模拟浏览器页面渲染，从而抓起展现结果。

目前还没有一个较为完善的后端渲染图表的轻量级解决方案，大部分的场景是在服务器安装浏览器内核引擎，应用通过调用其内核的方法，模拟在浏览器上运行绘制可视化图表，这样会带来以下四个问题：

1.需要安装工程时，附加安装与应用无关的浏览器引擎，这样增加了工程的复杂性和耦合性不够灵活，导致应用臃肿；

2.调用引擎进行渲染时，由于是黑盒调用，如果调用失败，无法快速定位问题，无明确的日志反馈，需要反复调试；

3.后端内核提供sdk的调用方式不够灵活，引擎和部署的生成文档服务不部署在一起，则无法正常调用；

4.调用sdk，如果是不通类型的语言，调用方式不同，不通用，需要对不同的语言支持进行sdk的安装和二次开发。

发明内容

为克服目前使用通过在服务器安装浏览器内核库调用其api的方式进行模拟浏览器页面渲染的问题，本发明提供一种基于node-canvas的服务端生成图表方法。

为实现上述目的，本发明采用下述技术方案：

在本发明一实施例中，提出了一种基于node-canvas的服务端生成图表方法，该方法包括：

请求生成图表客户端依据使用的生成图表的第三方库的配置项进行请求参数配置项组装后对该设置发起restful服务请求；

图表处理服务端接收到请求生成图表客户端的请求后，对参数进行校验，校验参数格式、必输参数校验和第三方库的支持，如果当前内置库不支持则提示需要安装；如果参数校验不通过则提示检查参数；

校验通过图表处理服务端生成画布用于第三方库的图表绘制；

加载画布支持的字体文件；

通过传递参数配置项绘制图表；

将图片落地磁盘保存或以BASE64格式方式支持反馈请求生成图表客户端；

绘制失败则会保存日志，并反馈请求生成图表客户端失败原因。

进一步地，restful服务请求是以Post的方式进行请求参数发送的。

进一步地，请求参数是双方约定好的规范，发送的消息体中的参数直接影响后续生成图表的内容，该内容包括：生成图表的宽度及高度和引入的生成图表的第三方库的配置项。

进一步地，配置项中包括：图表样式的配置项及具体需要渲染图表的数据。

进一步地，参数支持类型包括：字符串和JSON对象，如果为字符串，在处理参数时会转化为对象；字符串形式支持包括函数，如果有函数，则需要在当前应用中内置好为全局函数，该内置默认函数库，主要为对参数进行计算和格式化的函数，如果有特殊的内置函数，当前支持扩展，保持服务启动前在函数文件中补充完整即可。

进一步地，图表处理服务端接收到请求生成图表客户端的请求时，对参数和请求方式进行校验，如果是非Post的方式请求会直接返回请求失败；如果参数中对应的必输参数不存在，则不予处理直接提示参数不全；如果参数为字符串类型，在转化为对象时报错，则直接提示配置项不合法；如果以上校验全部通过，则开始进行后续初始化画布的操作。

进一步地，校验通过图表处理服务端生成画布用于第三方库的图表绘制，包括：

使用基于NodeJS的Node-canvas模块进行初始化画布的操作，依据参数中的宽度及高度通过其暴露的createCanvas函数进行画布的初始化用以渲染第三方库的图表，然后在图表处理服务端取到canvas的绘图上下文，进行各种图表的绘制操作或提供给其他第三方库的图表供其加载配置进行绘制。

进一步地，加载画布支持的字体文件，包括：

通过调用Node-canvas的registFont函数进行字体注册，包含默认字体及对应的字号设置，默认12px，通过传递参数设置字体和字号，使其可以在画布上正常绘制文字。

进一步地，通过传递参数配置项绘制图表，包括：

处理参数配置项，参数配置项如果是字符串支持参数中的函数，通过eval函数将字符串转换为对象，内置参数作为echarts的初始化options，需要特殊处理参数中的animation参数，必须设置为false，即取消动画，否则生成图表将无法正常显示；如果有支持的第三方库不支持，则需要提前通过npm安装，然后使用，默认图表均需要支持通过canvas上下文进行绘制。

进一步地，将图片落地磁盘保存或以BASE64格式方式支持反馈请求生成图表客户端，包括：

通过绘制后的canvas上下文中通过toBuffer方法转换为Base64字符串，如果请求参数中包含了path属性，如果存在则保存在对应路径的文件夹下，如果不存在则表明接口直接返回Base64字符串。进一步地，绘制失败则会保存日志，并反馈请求生成图表客户端失败原因，包括：

如果在绘制过程中，由于配置项存在错误或者没有安装支持的第三方图表库，则会记录当前请求的参数和异常信息当日志文件，并通过接口返回错误信息。

有益效果：

1.无需安装任何第三方的浏览器内核服务，首先安装内核服务会依赖很多服务器环境，其次内核服务是黑盒，无法明确绘制过程中的错误信息，另外部署应用会强依赖这个服务，而本方法只是在当前Web应用内部增加了一个用于生成图表的服务，几乎无任何附加组件和中间件等。

2.以restful接口的方式提供生成图表，可以更灵活的支持客户端调用，本地sdk的方式对部署引用方式不够友好，而通过restful的方式屏蔽了语言的差异性，只要满足可以通过http协议调用接口即可。

3.灵活装配用于生成图表的第三方库，内置了主流的生成图表库，如果需要引入其他的库可以通过包安装方式或手动引入文件的方式进行装配，对本身服务几乎无任何影响；另外支持外部动态函数的支持，同样函数只需要通过安装或手动引入的方式即可在配置项中使用。

4.对生成图表的配置参数可以最大限度的复用前端处理的配置，几乎无需变更任何配置，只要修改业务数据即可，后端生成图表可以无需关注更多的配置参数，而把注意力放在生成业务数据上，即可生成和浏览器端看到的一样效果的统计图表。

附图说明

图1是本发明一实施例的基于node-canvas的服务端生成图表方法流程示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神，应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本发明的实施方式可以实现为一种系统、装置、设备、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本发明的实施方式，提出了一种基于node-canvas的服务端生成图表方法，基于restful服务接口的可视化图表生成，可以灵活的支持不同服务端、不同服务地址部署的生成图表的需求，接口只要保证和服务端网络畅通就可以实现生成图片的需求，服务间保证以restful接口的方式进行交互，所以无论请求客户端是哪种类型语言或平台，只要支持http协议即可以进行能力的调用并获取根据参数生成的图表，而且设置在服务端无需部署任何浏览器服务中间件，都可以通过nodejs的服务端canvas绘制能力和请求绘图的第三方库参数进行绘制，且保证了和在浏览器端相同的画图配置项，并且扩展了生成图片的属性，包括：图片大小、生成图片格式、字体，甚至绘图使用第三方库的选项及动态数据处理的函数，该方法包括：

1.请求生成图表客户端依据使用的生成图表的第三方库的配置项进行请求参数配置项组装后对该设置发起restful请求

在实际对该发明提供的能力发起请求前，需要请求的客户端对请求参数进行封装，请求的restful服务是以Post的方式进行参数发送，请求参数是双方约定好的规范，发送的消息体中的参数将直接影响后续生成图表图片的内容，内容包括：生成图片图片的宽度、高度，引入的生成图表的第三方库的配置项，配置项中包括：图表样式的配置项及具体需要渲染图表的数据，参数支持类型包括：字符串和JSON对象，如果为字符串，在处理参数时会转化为对象。字符串形式支持包括函数，如果有函数，则需要在当前应用中内置好为全局函数，该发明中内置默认函数库，主要为对参数进行计算和格式化的函数，如果有特殊的内置函数，该发明支持扩展，保持服务启动前在函数文件中补充完整即可。

2.图表处理服务端接收到客户端的请求进行后，对参数进行校验，校验参数格式，必输参数校验和第三方图表库的支持，如果当前内置库不支持则提示需要安装；如果参数校验不通过则提示检查参数

在该发明提供的服务接收参数时，对参数和请求方式进行校验，如果是非Post方式请求会直接返回请求失败；如果请求参数中对应的必填参数不存在，例如：生成图表图片的宽、高参数不存在，则不予处理直接提示参数不全；如果请求参数为字符串类型，在转化为对象时报错，则直接提示配置项参数不合法；如果以上校验全部通过，则开始进行后续初始化画布(依据传递的画布宽、高)的操作。

3.校验通过服务端生成画布用于第三方库的图表绘制

使用基于NodeJS的Node-canvas模块进行初始化画布的操作，依据参数中的宽度和高度参数通过其暴露的createCanvas函数，进行画布的初始化用以渲染第三方图表，然后在服务端可以取到canvas的绘图上下文，就可以进行各种图表的绘制操作或提供给其他第三方的图表库供其加载配置进行绘制。

4.加载画布支持的字体文件

通过调用Node-canvas的registFont函数进行字体注册，包含默认字体及对应的字号设置，默认12px，可以通过传递参数设置字体和字号，使其可以再画布上正常绘制文字。

5.通过传递参数配置项绘制图表

处理配置项参数，配置项参数如果是字符串支持参数中的函数，通过eval函数将字符串转换为对象，内置参数作为echarts的初始化options，需要特殊处理参数中的animation参数，必须设置为false，即取消动画，否则生成图片将无法正常显示；如果有支持的第三方库不支持，则需要在该发明中提前通过npm安装，然后使用，默认图表均需要支持通过canvas上下文进行绘制。

6.将图片落地磁盘保存或以BASE64格式方式支持反馈请求客户端

通过绘制后的canvas上下文中通过toBuffer方法转换为Base64字符串，如果请求参数中包含了path属性，如果存在则保存在对应路径的文件夹下，如果不存在则表明接口直接返回Base64字符串。

7.绘制失败则会保存日志，并反馈请求客户端失败原因

如果在绘制过程中发生异常，比如由于配置项存在错误或者没有安装支持的第三方图表库，则会记录当前请求的参数和异常信息当日志文件，并通过接口返回错误信息。

下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。

图1是本发明一实施例的基于node-canvas的服务端生成图表方法流程示意图。如图1所示，请求流程如下：

1.后端(客户端)发起restful请求，提供服务端的接口地址、请求参数即可，由于和前端使用的相同的配置项，基本复用前端代码即可，可以支持json对象或直接字符串。

2.处理图片服务端接收到请求参数后，分析参数是否合法，即必填参数是否具备，如果参数格式有误或缺少必填字段则直接返回客户端请求失败。

3.参数合法校验后，服务端开始初始化画布及其上下文，以供第三方图片绘制。

4.引入默认的或参数指定的画布字体，用以展现画布的文字。

5.初始画布和注册字体完成后加载生成图表配置项，如果绘制成功则将图表图片的Base64的数据通过接口返回给请求方，如果失败则记录请求参数和处理异常原因日志到日志文件并返回客户端错误。

以上通过一个简单的restful接口请求，取代了复杂的Excel处理图表的复杂api调用，并可以复用前端的图表生成配置项，而使得后端可以专注的处理汇聚数据，从而既满足了客户呈现的要求又简化了后端的代码处理提升了效率。

需要说明的是，尽管在上述实施例及附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

为了对上述基于node-canvas的服务端生成图表方法进行更为清楚的解释，下面结合一个具体的实施例来进行说明，然而值得注意的是该实施例仅是为了更好地说明本发明，并不构成对本发明不当的限定。

下面举例来展示本发明的生成图表方法，具体如下：

季度报表发送调度：

在当前后台调度中，需要后端在每季度的1号发送上季度的统计Excel数据，用户要求的数据中，不仅要存在数据网格，还要有对应明细数据的统计图表作为图片插入到Excel中做为数据决策，后端通过Excel支持的开发库对图表的支持不够友好相对复杂且性能不佳，而且用户希望可以以页面的图表形式展现(Web展现页面挪到后端生成的Excel文件中)，后端Excel的展现效果很难达到要求，这样后端需要通过与前端相同的配置项来进行绘制图表生成图片，这样既复用了前端的绘制图表配置项信息，减少重复开发，又可以达到同前端相同的呈现效果，按如下步骤进行处理即可：

1.报表生成调度程序通过调用生成图表的Restful接口进行请求，请求参数模板可以支持Json对象的类型或直接字符串，请求参数中除了包含对应的第三方图表库中的绘图配置项及画布定义宽高大小，以及以什么样的方式生成，是需要保存在某一服务器上或者直接返回图片的Base64。

2.服务端接收参数后进行参数校验，校验通过后进行初始化画布、注册图表中使用字体文件及解析绘图配置项的操作，以上操作结束后依赖第三方库进行绘制，然后转换为落地磁盘的图片文件或Base64。

3.如果生成图片文件，则直接返回生成图片成功，如果是生成Base64串，则返回结果中直接包含图片内容，同时服务端记录请求参数及返回内容到日志文件。

4.请求端接收到图片Base64串，可以通过对应的生成图片策略直接生成图片并插入到对应Excel的Sheet页中；如果失败，则会收到处理异常的返回信息，内容包含错误原因等。

本发明提出的基于node-canvas的服务端生成图表方法的优点如下：

1.以restful服务-客户端的方式提供给客户端供其调用生成图片，这样规避了本地安装浏览器内核服务程序存在外部依赖组件的情况，此发明仅需要部署一个服务端程序对外暴露服务接口即可以给有需求的应用提供服务，且具备较好的并发处理能力。

2.程序可以灵活配置和安装第三方的图表库，目前默认支持主流的图表库，可依据参数不同生成不同类型的图表，同样加载画布字体也是可以灵活依据参数进行配置，这样保证了在浏览器端绘图的配置可以支持复用于服务端，且扩展参数可以更好支持服务端的请求需求，但凡canvas画布支持的图表绘制库均可以在此设置中进行装配和调用支持。

3.生成格式灵活，可以支持生成图片后落地磁盘提供访问图片链接的形式，也可以支持直接返回图片的BASE64格式供请求端使用，生成图片或格式也是可以通过参数决定。

4.在当前服务下会有请求参数和处理过程的详细日志，同时请求结果中也会体现执行中的错误，帮助调用方可以在生成图片异常的情况下快速定位问题。

虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和范围内所包含的各种修改和等同布置。

对本发明保护范围的限制，所属领域技术人员应该明白，在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。

Claims (11)

1.一种基于node-canvas的服务端生成图表方法，其特征在于，该方法包括：

请求生成图表客户端依据使用的生成图表的第三方库的配置项进行请求参数配置项组装后对该设置发起restful服务请求；

图表处理服务端接收到请求生成图表客户端的请求后，对参数进行校验，校验参数格式、必输参数校验和第三方库的支持，如果当前内置库不支持则提示需要安装；如果参数校验不通过则提示检查参数；

校验通过图表处理服务端生成画布用于第三方库的图表绘制；

加载画布支持的字体文件；

通过传递参数配置项绘制图表；

将图片落地磁盘保存或以BASE64格式方式支持反馈请求生成图表客户端；

绘制失败则会保存日志，并反馈请求生成图表客户端失败原因。

2.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述restful服务请求是以Post的方式进行请求参数发送的。

3.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述请求参数是双方约定好的规范，发送的消息体中的参数直接影响后续生成图表的内容，该内容包括：生成图表的宽度及高度和引入的生成图表的第三方库的配置项。

4.根据权利要求1或3所述的基于node-canvas的服务端生成图表方法，其特征在于，所述配置项中包括：图表样式的配置项及具体需要渲染图表的数据。

5.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述参数支持类型包括：字符串和JSON对象，如果为字符串，在处理参数时会转化为对象；字符串形式支持包括函数，如果有函数，则需要在当前应用中内置好为全局函数，该内置默认函数库，主要为对参数进行计算和格式化的函数，如果有特殊的内置函数，当前支持扩展，保持服务启动前在函数文件中补充完整即可。

6.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述图表处理服务端接收到请求生成图表客户端的请求时，对参数和请求方式进行校验，如果是非Post的方式请求会直接返回请求失败；如果参数中对应的必输参数不存在，则不予处理直接提示参数不全；如果参数为字符串类型，在转化为对象时报错，则直接提示配置项不合法；如果以上校验全部通过，则开始进行后续初始化画布的操作。

7.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述校验通过图表处理服务端生成画布用于第三方库的图表绘制，包括：

使用基于NodeJS的Node-canvas模块进行初始化画布的操作，依据参数中的宽度及高度通过其暴露的createCanvas函数进行画布的初始化用以渲染第三方库的图表，然后在图表处理服务端取到canvas的绘图上下文，进行各种图表的绘制操作或提供给其他第三方库的图表供其加载配置进行绘制。

8.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述加载画布支持的字体文件，包括：

通过调用Node-canvas的registFont函数进行字体注册，包含默认字体及对应的字号设置，默认12px，通过传递参数设置字体和字号，使其可以在画布上正常绘制文字。

9.根据权利要求7所述的基于node-canvas的服务端生成图表方法，其特征在于，所述通过传递参数配置项绘制图表，包括：

处理参数配置项，参数配置项如果是字符串支持参数中的函数，通过eval函数将字符串转换为对象，内置参数作为echarts的初始化options，需要特殊处理参数中的animation参数，必须设置为false，即取消动画，否则生成图表将无法正常显示；如果有支持的第三方库不支持，则需要提前通过npm安装，然后使用，默认图表均需要支持通过canvas上下文进行绘制。

10.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述将图片落地磁盘保存或以BASE64格式方式支持反馈请求生成图表客户端，包括：

通过绘制后的canvas上下文中通过toBuffer方法转换为Base64字符串，如果请求参数中包含了path属性，如果存在则保存在对应路径的文件夹下，如果不存在则表明接口直接返回Base64字符串。

11.根据权利要求1所述的基于node-canvas的服务端生成图表方法，其特征在于，所述绘制失败则会保存日志，并反馈请求生成图表客户端失败原因，包括：

如果在绘制过程中，由于配置项存在错误或者没有安装支持的第三方图表库，则会记录当前请求的参数和异常信息当日志文件，并通过接口返回错误信息。

Images