CN116628379A - 可视化图形生成方法、装置、电子设备及存储介质 - Google Patents
可视化图形生成方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN116628379A CN116628379A CN202310587423.7A CN202310587423A CN116628379A CN 116628379 A CN116628379 A CN 116628379A CN 202310587423 A CN202310587423 A CN 202310587423A CN 116628379 A CN116628379 A CN 116628379A
- Authority
- CN
- China
- Prior art keywords
- visual
- data
- external system
- graph
- picture
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 60
- 230000000007 visual effect Effects 0.000 claims abstract description 180
- 238000012544 monitoring process Methods 0.000 claims abstract description 5
- 238000009877 rendering Methods 0.000 claims description 25
- 238000004088 simulation Methods 0.000 claims description 15
- 230000008569 process Effects 0.000 claims description 7
- 230000004044 response Effects 0.000 claims description 4
- 238000004590 computer program Methods 0.000 claims description 3
- 238000012545 processing Methods 0.000 abstract description 26
- 238000010586 diagram Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 9
- 238000004891 communication Methods 0.000 description 7
- 238000011161 development Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 3
- 238000012800 visualization Methods 0.000 description 3
- BUGBHKTXTAQXES-UHFFFAOYSA-N Selenium Chemical compound [Se] BUGBHKTXTAQXES-UHFFFAOYSA-N 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000012827 research and development Methods 0.000 description 2
- 229910052711 selenium Inorganic materials 0.000 description 2
- 239000011669 selenium Substances 0.000 description 2
- 230000003442 weekly effect Effects 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 235000014510 cooky Nutrition 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 230000002708 enhancing effect Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/001—Texturing; Colouring; Generation of texture or colour
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本公开提供了一种可视化图形生成方法、装置、电子设备及计算机可读存储介质，涉及数据处理技术领域。该方法包括：节点服务端响应于外部系统对服务接口的调用，接收来自外部系统的可视化图形的类型参数和数据，根据类型参数和数据生成可视化图形，当监听到可视化图形渲染完成后，对可视化图形区域进行截图获得可视化图形对应的图片，将可视化图形对应的图片发送至外部系统，以便外部系统展示图片。本公开实施例能返回统一的可视化图形，并在可视化图形渲染完成后，对可视化图形区域进行截图，提高可视化图形处理效率。
Description
技术领域
本公开涉及数据处理技术领域，尤其涉及一种可视化图形生成方法、装置、电子设备及计算机可读存储介质。
背景技术
相关技术中，前端可通过可视化工具生成可视化图形，在H5端、PC网页端、APP端等进行展示，使用的可视化工具在多端下会有差异导致展示的形式也不统一；后端则通过phantomjs或selenium对前端制图工具生成的可视化图形进行截图，但截图时由于phantomjs或selenium技术没有处理异步能力，只能估算制图完成时间点后进行截图，存在延迟估算问题。
需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
本公开提供一种可视化图形生成方法、装置、电子设备及计算机可读存储介质，至少在一定程度上克服相关技术中处理可视化图形效率低的问题。
本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。
根据本公开的一个方面，提供一种可视化图形生成方法，其特征在于，应用于节点服务端，包括：响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据；根据所述类型参数和所述数据生成可视化图形；当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片；将所述可视化图形对应的图片发送至所述外部系统，以便所述外部系统展示所述图片。
在本公开的一个实施例中，所述当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片包括：模拟浏览器监听到所述可视化图形渲染完成后，获取页面中的可视化图形区域；根据所述类型参数对所述可视化图形区域进行截图获得所述可视化图形对应的所述图片。
在本公开的一个实施例中，所述根据所述类型参数和所述数据生成可视化图形包括：通过模拟浏览器将所述类型参数和所述数据发送至绘制组件；所述绘制组件根据所述类型参数处理所述数据生成可视化图形。
在本公开的一个实施例中，所述类型参数包括：截图位置、图片类型、坐标参数、应用场景、图像尺寸或图像颜色。
在本公开的一个实施例中，所述绘制组件包括echarts、antv或table。
在本公开的一个实施例中，基于express框架及node服务实现所述节点服务端。
在本公开的一个实施例中，所述模拟浏览器为puppeteer。
根据本公开的另一个方面，还提供了一种可视化图形生成装置，包括：
数据接收模块，响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据；
图形生成模块，根据所述类型参数和所述数据生成可视化图形；
图片生成模块，当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片；
图片发送模块，将所述可视化图形对应的图片发送至所述外部系统，以便所述外部系统展示所述图片。
根据本公开的另一个方面，还提供了一种电子设备，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述可视化图形生成方法。
根据本公开的另一个方面，还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的可视化图形生成方法。
本公开的实施例所提供的可视化图形生成方法、装置、电子设备及计算机可读存储介质，节点服务端响应于外部系统对服务接口的调用，接收来自外部系统的可视化图形的类型参数和数据，根据类型参数和数据生成可视化图形，当监听到可视化图形渲染完成后，对可视化图形区域进行截图获得可视化图形对应的图片，将可视化图形对应的图片发送至外部系统，以便外部系统展示图片，可返回统一的可视化图形，并在可视化图形渲染完成后，对可视化图形区域进行截图，提高可视化图形处理效率。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1示出本公开实施例中一种可视化图形生成方法流程图；
图2示出本公开实施例中一种可视化图形对应的图片生成方法流程图；
图3示出本公开实施例中又一种可视化图形生成方法流程图；
图4示出本公开实施例中一种可视化图形生成装置示意图；
图5示出本公开实施例中一种可视化图形生成系统示意图；
图6示出了可以应用于本公开实施例的可视化图形生成方法的示例性系统架构的示意图；
图7示出本公开实施例中一种电子设备的结构框图；和
图8示出本公开实施例中一种计算机可读存储介质的示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。
此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
为了便于理解，下面首先对本公开涉及到的几个名词进行解释如下：
node服务的平台是Node.js，Node.js是一个开源的、跨平台的运行时环境。
express是基于Node.js运行环境的Web应用程序开发框架。
puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的node库。
下面结合附图及实施例对本示例实施方式进行详细说明。
首先，本公开实施例中提供了一种可视化图形生成方法，该方法可以由任意具备计算处理能力的电子设备执行。
图1示出本公开实施例中一种可视化图形生成方法流程图，如图1所示，本公开实施例中提供的可视化图形生成方法，应用于节点服务端，包括如下步骤：
S102，响应于外部系统对服务接口的调用，接收来自外部系统的可视化图形的类型参数和数据。
node服务的平台是Node.js，Node.js是一个开源的、跨平台的运行时环境，可以使用javascript创建各种服务器端工具和应用程序，可以直接运行在计算机或操作系统上。
express是基于Node.js运行环境的Web应用程序开发框架，express提供了一个轻量级模块，类似于封装的工具库，它把node服务的HTTP模块的功能封装在一个简单易用的接口中，用于扩展HTTP模块的功能，能够轻松地处理服务器的路由、响应、Cookie和HTTP请求的状态。
在一个实施例中，基于express框架及node服务实现节点服务端、创建服务接口，服务接口可为HTTP接口，外部系统可向节点服务端提供的服务接口发送调用请求，其中，调用请求包括可视化图形的类型参数和数据，节点服务端响应于外部系统对服务接口的调用，通过服务接口接收来自外部系统的可视化图形的类型参数和数据。
数据为待处理生成可视化图形的数据，类型参数为生成可视化图形需要的参数。
在一个实施例中，类型参数包括但不限于：截图位置、图片类型、坐标参数、应用场景、图像尺寸或图像颜色等。
截图位置为对可视化图形区域进行截图获得可视化图形对应的图片的位置数据；图像尺寸为对可视化图形区域进行截图获得可视化图形对应图片的尺寸；图像颜色为对可视化图形区域进行截图获得可视化图形对应图片的颜色。例如，饼图中每个区域对应不同的颜色；图片类型包括但不限于：柱形图、条形图、折线图、面积图、饼图、散点图、气泡图、雷达图等；应用场景为数据所应用的场景信息，例如序列比、分类数据比较、时间趋势比、系列趋势的比较等；坐标参数为可视化图形中的坐标参数，例如，可视化图形为柱形图时，横坐标参数可为：年份，纵坐标参数可为：个。
S104，根据类型参数和数据生成可视化图形。
可视化图形为将数据通过echarts、antv、table等可视化工具或自定义组件开发后渲染出来的图表。
在一个实施例中，通过模拟浏览器将类型参数和数据发送至绘制组件，绘制组件根据类型参数处理数据生成可视化图形。
在一个实施例中，绘制组件是嵌入在节点服务端内vue项目，主要用于生成可视化图形，绘制组件为可视化工具或自定义组件，通过可视化工具或自定义组件根据类型参数处理数据展示不同的可视化效果图形；可视化工具包括但不限于：echarts、antv、D3或table等市场现有的绘制工具；自定义组件为根据客户需要设定的绘制工具，可高效生成可视化图形。
S106，当监听到可视化图形渲染完成后，对可视化图形区域进行截图获得可视化图形对应的图片。
在一个实施例中，图2示出本公开实施例中一种可视化图形对应的图片生成方法流程图，如图2所示，本公开实施例中提供的可视化图形对应的图片生成方法，包括如下步骤：
S202，模拟浏览器监听绘制组件的渲染信息。
在一个实施例中，模拟浏览器为puppeteer，puppeteer是谷歌官方出品的一个通过DevTools协议控制headless Chrome的node库，可以通过puppeteer的提供的接口直接控制Chrome模拟大部分用户操作来作为爬虫访问页面来收集数据。
在一个实施例中，模拟浏览器可定时监控绘制组件的渲染信息，或接收绘制组件发送的渲染完成的信息后获取页面中的可视化图形区域。
S204，模拟浏览器监听到可视化图形渲染完成后，获取页面中的可视化图形区域。
S206，根据类型参数对可视化图形区域进行截图获得可视化图形对应的图片。
在一个实施例中，模拟浏览器根据类型参数中图像尺寸等数据对可视化图形区域进行截图获得可视化图形对应的图片。
S104，将可视化图形对应的图片发送至外部系统，以便外部系统展示图片。
在一个实施例中，可视化图形对应的图片的类型包括但不限于：Base64格式、二进制格式等，Base64格式的图片可以直接在浏览器中展示，二进制格式的图像编码则需要进行数据转换后展示图片。
在一个实施例中，以可视化工具为echarts，图像尺寸为：宽度为500、高度为500、图片为Base64格式、图片类型为条形图为例，生成Base64格式图片代码如下：
function draw(){
var buf＝node_echarts({
width:500,
height:500,
option:HistogramOption,
//If the path is not set,return the Buffer of image.
//path:path.join(__dirname,'../public/image1.jpg'),
enableAutoDispose:true
})；
var base64＝`data:image/png；base64,`+buf.toString('base64')；
console.log(base64)；
}
上述实施例中，通过调用HTTP接口，传入类型参数及数据，返回可视化图形数据，能够保持技术栈统一、兼容浏览器、在H5端、PC网页端、APP端等多端环境下展现形式统一、降低了多次开发的成本，且采用puppeteer技术截图，具有异步处理能力，可在图形绘制完之后进行截图，没有延迟，可高效处理可视化图形。
图3示出本公开实施例中又一种可视化图形生成方法流程图，如图3所示，本公开实施例中提供的可视化图形生成方法，包括如下步骤：
S302，外部系统调用节点服务端提供的HTTP接口，并附带可视化图形的类型参数及数据。
在一个实施例中，express把node服务的HTTP模块的功能封装在HTTP接口中，用于扩展HTTP模块的功能。
S304，节点服务端监听到HTTP接口被调用，通过puppeteer模拟浏览器，携带类型参数及数据访问绘制组件。
S306，绘制组件根据类型参数对数据生成相应的可视化图形。
S308，puppeteer模拟浏览器监听绘制组件渲染完成后，对可视化图形区域进行截图，并转化成base64或二进制格式的图片。
S310，puppeteer模拟浏览器返回图片给外部系统。
S312，外部系统依据返回的图片数据直接展示。
在一个实施例中，外部系统为报表系统时，当报表系统需要发布日报或周报时，需要将每日或每周的数据以图片的形式展示在邮件中进行发送，可以通过调用HTTP接口，返回多种数据可视化图形。
上述实施例中，通过利用前端页面工程及puppeteer模拟浏览器的异步处理能力，使得在puppeteer模拟浏览器下前端页面功能进行可视化图形渲染后进行截图返回结果，能够可视化图形多端统一展示、puppeteer模拟浏览器具有异步处理能力，降低了研发成本。
基于同一发明构思，本公开实施例中还提供了一种可视化图形生成装置，如下面的实施例。由于该装置实施例解决问题的原理与上述方法实施例相似，因此该装置实施例的实施可以参见上述方法实施例的实施，重复之处不再赘述。
图4示出本公开实施例中一种可视化图形生成装置示意图，如图4所示，该可视化图形生成装置包括：数据接收模块401、图形生成模块402、图片生成模块403、图片发送模块404；
数据接收模块401，响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据；
图形生成模块402，根据所述类型参数和所述数据生成可视化图形；
图片生成模块403，当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片；
图片发送模块404，将所述可视化图形对应的图片发送至所述外部系统，以便所述外部系统展示所述图片。
上述实施例中，通过调用HTTP接口，传入类型参数及数据，返回可视化图形数据，能够保持技术栈统一、兼容浏览器、在H5端、PC网页端、APP端等多端环境下展现形式统一、降低了多次开发的成本，且采用puppeteer技术截图，具有异步处理能力，可在图形绘制完之后进行截图，没有延迟，可高效处理可视化图形。
基于同一发明构思，本公开实施例中还提供了一种可视化图形生成系统，如下面的实施例。由于该系统实施例解决问题的原理与上述方法实施例相似，因此该系统实施例的实施可以参见上述方法实施例的实施，重复之处不再赘述。
图5示出本公开实施例中一种可视化图形生成系统示意图，如图5所示，该可视化图形生成系统5包括：基础组件501、绘制组件502；
基础组件501是由express及puppetee r组成的node应用项目，对外提供服务接口，响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据并发送至绘制组件502，当监听到绘制组件502渲染完成可视化图形后对可视化图形区域进行截图获得所述可视化图形对应的图片。
绘制组件502是嵌入系统内vue项目，主要用于生成可视化图形，绘制组件为可视化工具或自定义组件，通过可视化工具或自定义组件根据类型参数处理数据展示不同的可视化效果图形；可视化工具包括但不限于：echarts、antv、D3或table等市场现有的绘制工具；自定义组件为根据客户需要设定的绘制工具。
在一个实施例中，以vue项目引入绘制组件echarts完成动态渲染为例进行介绍，安装echarts运行依赖，并引入项目，创建一个echarts的盒子容器，准备数据和参数配置项，初始化echarts实例并根据this.option的数据绘制图表，在mounted中执行上述渲染方法，watch监听数据变化，如果option.series.data的数组中有数据，那么此时就能渲染上去了，但是不能动态改变，通过将原始数据进行处理后再进行赋值的方法绑定数据源，再添个按钮或者时间选择器调用parseData就完成了vue项目引入echarts，再通过echarts根据类型参数处理数据生成可视化图形。
上述实施例中，通过利用前端页面工程及puppeteer模拟浏览器的异步处理能力，使得在puppeteer模拟浏览器下前端页面功能进行可视化图形渲染后进行截图返回结果，能够可视化图形多端统一展示、puppeteer模拟浏览器具有异步处理能力，降低了研发成本。
图6示出了可以应用于本公开实施例的可视化图形生成方法的示例性系统架构的示意图。
如图6所示，系统架构600可以包括客户端601、602、603，网络604和节点服务端605。
节点服务端605安装Node.js运行环境，使用Node.js创建一个能够接收请求和响应请求的对象。
对用户利用客户端601、602、603所进行操作的装置提供支持的后台管理节点服务端可以对接收到的请求等数据进行分析等处理，并将处理结果反馈给客户端。
网络604用以在客户端601、602、603和节点服务端605之间提供通信链路的介质，可以是有线网络，也可以是无线网络。
可选地，上述的无线网络或有线网络使用标准通信技术和/或协议。网络通常为因特网、但也可以是任何网络，包括但不限于局域网(Local Area Network，LAN)、城域网(Metropolitan Area Network，MAN)、广域网(Wide Area Network，WAN)、移动、有线或者无线网络、专用网络或者虚拟专用网络的任何组合)。在一些实施例中，使用包括超文本标记语言(Hyper Text Mark-up Language，HTML)、可扩展标记语言(ExtensibleMarkupLanguage，XML)等的技术和/或格式来代表通过网络交换的数据。此外还可以使用诸如安全套接字层(Secure Socket Layer，SSL)、传输层安全(Transport Layer Security，TLS)、虚拟专用网络(Virtual Private Network，VPN)、网际协议安全(InternetProtocolSecurity，IPsec)等常规加密技术来加密所有或者一些链路。在另一些实施例中，还可以使用定制和/或专用数据通信技术取代或者补充上述数据通信技术。
客户端601、602、603可以是各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机、台式计算机等。
可选地，不同的客户端601、602、603中安装的应用程序的客户端是相同的，或基于不同操作系统的同一类型应用程序的客户端。基于终端平台的不同，该应用程序的客户端的具体形态也可以不同，比如，该应用程序客户端可以是手机客户端、PC客户端等。
可选地，节点服务端605可以是独立的物理节点服务端，也可以是多个物理节点服务端构成的节点服务端集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content DeliveryNetwork，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云节点服务端。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此。客户端601、602、603以及节点服务端605可以通过有线或无线通信方式进行直接或间接地连接，本申请在此不做限制。
本领域技术人员可以知晓，图6中的客户端、网络和节点服务端的数量仅仅是示意性的，根据实际需要，可以具有任意数目的客户端、网络和节点服务端。本公开实施例对此不作限定。
所属技术领域的技术人员能够理解，本公开的各个方面可以实现为系统、方法或程序产品。因此，本公开的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。
下面参照图7来描述根据本公开的这种实施方式的电子设备700。图7显示的电子设备700仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图7所示，电子设备700以通用计算设备的形式表现。电子设备700的组件可以包括但不限于：上述至少一个处理单元710、上述至少一个存储单元720、连接不同系统组件(包括存储单元720和处理单元710)的总线730。
其中，存储单元存储有程序代码，程序代码可以被处理单元710执行，使得处理单元710执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。
例如，处理单元710可以执行上述方法实施例的如下步骤：节点服务端响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据；根据所述类型参数和所述数据生成可视化图形；当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片；将所述可视化图形对应的图片发送至所述外部系统，以便所述外部系统展示所述图片。
例如，处理单元710可以执行上述方法实施例的如下步骤：外部系统调用节点服务端提供的HTTP接口，并附带可视化图形的类型参数及数据；节点服务端监听到HTTP接口被调用，通过puppeteer模拟浏览器，携带类型参数及数据访问绘制组件；绘制组件根据类型参数对数据生成相应的可视化图形；puppeteer模拟浏览器监听绘制组件渲染完成后，对可视化图形区域进行截图，并转化成base64或二进制格式的图片；puppeteer模拟浏览器返回图片给外部系统；外部系统依据返回的图片数据直接展示。
存储单元720可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)7201和/或高速缓存存储单元7202，还可以进一步包括只读存储单元(ROM)7203。
存储单元720还可以包括具有一组(至少一个)程序模块7205的程序/实用工具7204，这样的程序模块7205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线730可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备700也可以与一个或多个外部设备740(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备700交互的设备通信，和/或与使得该电子设备700能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口750进行。并且，电子设备700还可以通过网络适配器760与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器760通过总线730与电子设备700的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备700使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施方式的方法。
在本公开的示例性实施例中，还提供了一种计算机可读存储介质，该计算机可读存储介质可以是可读信号介质或者可读存储介质。图8示出本公开实施例中一种计算机可读存储介质的示意图，如图8所示，该计算机可读存储介质800上存储有能够实现本公开上述方法的程序产品。在一些可能的实施方式中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本公开各种示例性实施方式的步骤。
例如，本公开实施例中的程序产品被处理器执行时实现如下步骤的方法：节点服务端响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据；根据所述类型参数和所述数据生成可视化图形；当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片；将所述可视化图形对应的图片发送至所述外部系统，以便所述外部系统展示所述图片。
例如，本公开实施例中的程序产品被处理器执行时实现如下步骤的方法：外部系统调用节点服务端提供的HTTP接口，并附带可视化图形的类型参数及数据；节点服务端监听到HTTP接口被调用，通过puppeteer模拟浏览器，携带类型参数及数据访问绘制组件；绘制组件根据类型参数对数据生成相应的可视化图形；puppeteer模拟浏览器监听绘制组件渲染完成后，对可视化图形区域进行截图，并转化成base64或二进制格式的图片；puppeteer模拟浏览器返回图片给外部系统；外部系统依据返回的图片数据直接展示。
本公开中的计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
在本公开中，计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
可选地，计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
在具体实施时，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。
在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。
应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
此外，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。
通过以上实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、移动终端、或者网络设备等)执行根据本公开实施方式的方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由所附的权利要求指出。
Claims (10)
1.一种可视化图形生成方法，其特征在于，应用于节点服务端，包括：
响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据；
根据所述类型参数和所述数据生成可视化图形；
当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片；
将所述可视化图形对应的图片发送至所述外部系统，以便所述外部系统展示所述图片。
2.根据权利要求1所述的可视化图形生成方法，其特征在于，所述当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片包括：
模拟浏览器监听到所述可视化图形渲染完成后，获取页面中的可视化图形区域；
根据所述类型参数对所述可视化图形区域进行截图获得所述可视化图形对应的所述图片。
3.根据权利要求1所述的可视化图形生成方法，其特征在于，所述根据所述类型参数和所述数据生成可视化图形包括：
通过模拟浏览器将所述类型参数和所述数据发送至绘制组件；
所述绘制组件根据所述类型参数处理所述数据生成可视化图形。
4.根据权利要求1所述的可视化图形生成方法，其特征在于，所述类型参数包括：截图位置、图片类型、坐标参数、应用场景、图像尺寸或图像颜色。
5.根据权利要求3所述的可视化图形生成方法，其特征在于，所述绘制组件包括echarts、antv或table。
6.根据权利要求1所述的可视化图形生成方法，其特征在于，基于express框架及node服务实现所述节点服务端。
7.根据权利要求2或3所述的可视化图形生成方法，其特征在于，所述模拟浏览器为puppeteer。
8.一种可视化图形生成装置，其特征在于，包括：
数据接收模块，响应于外部系统对服务接口的调用，接收来自所述外部系统的可视化图形的类型参数和数据；
图形生成模块，根据所述类型参数和所述数据生成可视化图形；
图片生成模块，当监听到所述可视化图形渲染完成后，对可视化图形区域进行截图获得所述可视化图形对应的图片；
图片发送模块，将所述可视化图形对应的图片发送至所述外部系统，以便所述外部系统展示所述图片。
9.一种电子设备，其特征在于，包括：
处理器；以及
存储器，用于存储所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1～7中任意一项所述可视化图形生成方法。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1～7中任意一项所述的可视化图形生成方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310587423.7A CN116628379A (zh) | 2023-05-23 | 2023-05-23 | 可视化图形生成方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310587423.7A CN116628379A (zh) | 2023-05-23 | 2023-05-23 | 可视化图形生成方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116628379A true CN116628379A (zh) | 2023-08-22 |
Family
ID=87609334
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310587423.7A Pending CN116628379A (zh) | 2023-05-23 | 2023-05-23 | 可视化图形生成方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116628379A (zh) |
-
2023
- 2023-05-23 CN CN202310587423.7A patent/CN116628379A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3816823A1 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
| JP6092381B2 (ja) | ウェブクライアントを介したリモートアプリケーションへのアクセスを提供する方法、システム、及びコンピュータ読取可能記憶媒体 | |
| JP7220753B2 (ja) | ラベル付けツールの生成方法と装置、ラベル付け方法と装置、電子デバイス、記憶媒体及びプログラム | |
| CN111338623A (zh) | 一种开发用户界面的方法、装置、介质和电子设备 | |
| CN113808231B (zh) | 信息处理方法及装置、图像渲染方法及装置、电子设备 | |
| CN111026439B (zh) | 应用程序的兼容方法、装置、设备及计算机存储介质 | |
| CN109582317B (zh) | 用于调试寄宿应用的方法和装置 | |
| CN113505302A (zh) | 支持动态获取埋点数据的方法、装置、系统及电子设备 | |
| CN112631590A (zh) | 组件库生成方法、装置、电子设备和计算机可读介质 | |
| CN111444095A (zh) | 移动设备的测试平台系统和测试方法 | |
| CN110275787B (zh) | 在线平台数据传输方法、装置、介质及电子设备 | |
| CN115550687A (zh) | 三维模型场景交互方法、系统、设备、装置及存储介质 | |
| CN110266701B (zh) | 智能设备数据传输方法、装置、介质及电子设备 | |
| KR20210001858A (ko) | 텍스트의 컬러 결정 방법 및 장치 | |
| CN113553123A (zh) | 数据处理方法、装置、电子设备及存储介质 | |
| CN116389492A (zh) | 视频分析系统、方法、装置、计算机可读存储介质 | |
| CN116628379A (zh) | 可视化图形生成方法、装置、电子设备及存储介质 | |
| CN115731319A (zh) | 图形绘制方法、装置、设备及存储介质 | |
| CN111367525B (zh) | 一种前端架构系统 | |
| CN113835816A (zh) | 一种虚拟机桌面显示方法、装置、设备及可读存储介质 | |
| CN112767225A (zh) | 前端图像处理方法、装置、电子设备和可读存储介质 | |
| CN112965699B (zh) | 前端页面生成方法、装置、计算机系统和可读存储介质 | |
| CN110430175B (zh) | 基于ac35平台的加密协议植入方法、装置及设备 | |
| CN117519728A (zh) | 容器镜像部署方法、系统、装置、设备及存储介质 | |
| CN116664379A (zh) | 倾斜摄影图像加载方法、系统、装置、设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |