CN115129553A - 图可视化方法、装置、设备、介质及产品 - Google Patents
图可视化方法、装置、设备、介质及产品 Download PDFInfo
- Publication number
- CN115129553A CN115129553A CN202210786656.5A CN202210786656A CN115129553A CN 115129553 A CN115129553 A CN 115129553A CN 202210786656 A CN202210786656 A CN 202210786656A CN 115129553 A CN115129553 A CN 115129553A
- Authority
- CN
- China
- Prior art keywords
- graph
- template object
- node
- event
- attribute
- 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
- 238000007794 visualization technique Methods 0.000 title claims abstract description 23
- 230000003993 interaction Effects 0.000 claims abstract description 76
- 238000009877 rendering Methods 0.000 claims abstract description 25
- 238000012800 visualization Methods 0.000 claims abstract description 21
- 230000006870 function Effects 0.000 claims description 55
- 230000002452 interceptive effect Effects 0.000 claims description 49
- 238000012544 monitoring process Methods 0.000 claims description 42
- 238000005316 response function Methods 0.000 claims description 42
- 238000000034 method Methods 0.000 claims description 39
- 230000003068 static effect Effects 0.000 claims description 32
- 238000010586 diagram Methods 0.000 claims description 27
- 238000010801 machine learning Methods 0.000 claims description 21
- 230000004044 response Effects 0.000 claims description 17
- 238000012549 training Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 12
- 230000002159 abnormal effect Effects 0.000 claims description 4
- 230000000007 visual effect Effects 0.000 abstract description 21
- 238000012545 processing Methods 0.000 abstract description 10
- 230000000694 effects Effects 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 11
- 238000004891 communication Methods 0.000 description 9
- 230000006399 behavior Effects 0.000 description 6
- 238000004364 calculation method Methods 0.000 description 5
- 230000001960 triggered effect Effects 0.000 description 4
- 238000013461 design Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 239000000470 constituent Substances 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000013507 mapping Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3065—Monitoring arrangements determined by the means or processing involved in reporting the monitored data
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3003—Monitoring arrangements specially adapted to the computing system or computing system component being monitored
- G06F11/302—Monitoring arrangements specially adapted to the computing system or computing system component being monitored where the computing system component is a software system
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3065—Monitoring arrangements determined by the means or processing involved in reporting the monitored data
- G06F11/3072—Monitoring arrangements determined by the means or processing involved in reporting the monitored data where the reporting involves data filtering, e.g. pattern matching, time or event triggered, adaptive or policy-based reporting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/3089—Monitoring arrangements determined by the means or processing involved in sensing the monitored data, e.g. interfaces, connectors, sensors, probes, agents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/32—Monitoring with visual or acoustical indication of the functioning of the machine
- G06F11/323—Visualisation of programs or trace data
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
- G06F11/3438—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment monitoring of user actions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Quality & Reliability (AREA)
- Software Systems (AREA)
- Computing Systems (AREA)
- Computer Hardware Design (AREA)
- Mathematical Physics (AREA)
- Computer Vision & Pattern Recognition (AREA)
- Computer Security & Cryptography (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供了图可视化方法、装置、设备、介质及产品,涉及数据处理领域,尤其涉及数据展示技术领域。具体实现方案为根据图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与待编辑图元素对应的目标模板对象;从图编辑请求中获取待编辑图元素的至少一项属性的配置值,对目标模板对象的属性进行配置;其中,属性至少包括交互样式;基于配置后的目标模板对象,根据所述交互样式的配置值在界面中渲染显示对应的图元素。本公开的方案提高了图的可视化编辑效率和效果。
Description
技术领域
本公开涉及计算机技术领域,尤其涉及数据展示领域,具体涉及一种图可视化方法、装置、设备、介质及产品。
背景技术
前端图可视化,是指在浏览器端展示DAG图(Directed Acyclic Graph,有向无环图)、流程图的一种技术。由于在DAG图和流程图中会涉及到多种类型的节点,因此在对图进行展示时对图中不同类型节点的交互样式定义存在配置复杂的问题。
发明内容
本公开提供了一种用于图可视化方法、装置、设备、介质及产品。
根据本公开的一方面,提供了图可视化方法,包括:
获取图编辑请求;
根据所述图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与所述待编辑图元素对应的目标模板对象;
从所述图编辑请求中获取所述待编辑图元素的至少一项属性的配置值,对所述目标模板对象的属性进行配置;其中,所述属性至少包括交互样式;
基于配置后的目标模板对象,根据所述交互样式的配置值在界面中渲染显示对应的图元素。
根据本公开的另一方面,提供了一种图可视化装置,包括:
图编辑请求获取模块,用于获取图编辑请求;
目标模板对象确定模块,用于根据所述图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与所述待编辑图元素对应的目标模板对象;
属性配置模块,用于从所述图编辑请求中获取所述待编辑图元素的至少一项属性的配置值,对所述目标模板对象的属性进行配置;其中,所述属性至少包括交互样式;
图元素渲染模块,用于基于配置后的目标模板对象,根据所述交互样式的配置值在界面中渲染显示对应的图元素。
根据本公开的另一方面,提供了一种电子设备,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行本公开中任一实施例所述的图可视化方法。
根据本公开的另一方面,提供了一种存储有计算机指令的非瞬时计算机可读存储介质,其中,所述计算机指令用于使所述计算机执行根据本公开中任一实施例所述的图可视化方法。
根据本公开的另一方面,提供了一种计算机程序产品,包括计算机程序,所述计算机程序在被处理器执行时实现根据本公开中任一实施例所述的图可视化方法。
应当理解,本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征,也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。
附图说明
附图用于更好地理解本方案,不构成对本公开的限定。其中:
图1是根据本公开实施例的一种图可视化方法的示意图;
图2是根据本公开实施例的另一种图可视化方法的示意图;
图3是根据本公开实施例的又一种图可视化方法的示意图;
图4是根据本公开实施例的一种预设候选模板对象的自定义过程示意图;
图5是根据本公开实施例的一种图可视化装置的结构示意图;
图6是用来实现本公开实施例的图可视化方法的电子设备的框图。
具体实施方式
以下结合附图对本公开的示范性实施例做出说明,其中包括本公开实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本公开的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
图1是根据本公开实施例的一种图可视化方法的示意图,本实施例可适用于对前端图可视化展示时交互样式配置进行优化的情况,例如在在浏览器端展示DAG图、流程图,该方法可以通过图可视化装置执行,该装置可以通过软件和/或硬件的方式实现,并集成在电子设备中;本实施例中涉及到的电子设备可以为等本地服务器等具有通信和计算能力的设备。具体的,参考图1,该方法具体包括如下:
S110、获取图编辑请求。
其中,图编辑请求是指在创建可视化图的过程中对图中任意元素进行创建的请求。该图编辑请求可以由用户自定义进行确定,也可以根据绘图需求进行自动确定。
示例性的,对于绘制流程图来说,当用户需要构建任一流程时,则构建流程的需求即为图编辑请求;对于机器学习中DAG图绘制来说,当创建某一子模型,则构建子模型对应的元素即为图编辑请求。
具体的,图编辑请求中至少包括待编辑图元素,待编辑图元素对请求编辑的图的类型进行确定,以及该待编辑图元素的属性配置值,属性配置值可以对图元素的具体内容以及样式进行确定。示例性的,对于流程编辑请求来说,待编辑图元素为流程框,流程框的属性配置值可以包括流程具体内容以及该流程需要渲染的样式等。
S120、根据图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与待编辑图元素对应的目标模板对象。
其中,待编辑图元素是指在此次图编辑请求中需要对待可视化图进行编辑的内容。待编辑图元素中可以包括至少一个图形节点。预设候选模板对象是指预先根据可视化图的内容对其中不同类型的图形节点进行编辑的模板,以便在对可视化图进行编辑时可以对图形节点进行快速复用,提高对可视化图的编辑效率。预设候选模板对象集合是指将与可视化图相关的所有预设候选目标对象进行组册的结果。对于图编辑请求中可以包括至少一个待编辑图元素。
具体的,根据待编辑图元素的类型从预设候选模板对象集合中,选择与该类型匹配的目标模板对象,待编辑图元素的类型用于对待编辑图元素进行划分。示例性的,待编辑图元素的类型包括文本类型和图片类型,从预设候选模板对象集合中选择可以展示文本和图片的预设候选模板对象作为目标模板对象。例如图编辑请求为流程图编辑请求时,待编辑图元素为流程框元素,则从预设候选模板对象集合中确定与流程框形状匹配的目标模板对象。
示例性的,预先配置多种类型的候选模板对象,每一个候选模板对象有一个唯一标识符,以用于区分,并将所有候选模板对象进行存储到一个对象中,以候选模板对象的唯一标识符作为key,将候选模板对象作为值。当用户发送图编辑请求时,图编辑请求中需要包括表征该模板的唯一标识符,以根据图编辑请求中唯一标识符从候选模板对象集合中找到该目标模板对象。
S130、从图编辑请求中获取待编辑图元素的至少一项属性的配置值,对目标模板对象的属性进行配置;其中,属性至少包括交互样式。
其中,待编辑图元素的属性用于对待编辑图元素的具体内容进行表征,具体内容表示了图元素在画布上的具体展示内容,交互样式属性用于对图元素响应不同交互行为的方式进行表征,对图元素的交互行为可以是通过界面人为交互也可以是通过后台事件触发交互,交互样式内容展示了在有交互行为时图元素在画布上的展示内容。
具体的,用户根据自己的绘制需求以及候选模板对象中所提供的交互样式标识,确实为待编辑图元素设置的交互样式的配置值,在对该图元素进行编辑时,将该配置值对目标模板对象中对应交互样式的变量进行替换即可实现对图元素交互样式的自主配置实现。此外,待编辑图元素中还包括对图元素内容进行确定的属性。
S140、基于配置后的目标模板对象,根据交互样式的配置值在界面中渲染显示对应的图元素。
在配置后的目标模板对象中,包括了待渲染图元素的静态显示内容以及交互样式的动态显示配置,根据目标模板对象中的配置值在界面中显示对应的图元素的静态显示,并根据对交互样式属性的配置值对图元素进行相应的动态渲染。示例性的,在目标模板对象中包括节点信息和连线信息,以及对节点信息和连线信息的交互样式配置,首先根据节点信息和连线信息在界面中对节点和连线进行渲染,然后根据交互样式配置对节点信息和连线信息进行添加交互样式的关联事件、监听函数和响应函数。
在本实施例的另一个可选实现方式中,交互样式包括关联事件、监听函数和响应函数;
相应的,根据所述交互样式的配置值在界面中渲染显示对应的图元素,包括:
在所述图元素的交互样式的监听函数,监听到对所述图元素的关联事件时,执行所述响应函数,以对所述图元素进行样式渲染。
在交互样式属性中,包括了关联事件、监听函数以及响应函数,其中,关联事件表示了交互的具体行为,监听函数用于对该具体行为进行获取,响应函数用于对该具体行为进行响应,通过在模板对象中对交互样式属性进行设置,使得用户在可视化图编辑时可以自定义关联事件的交互样式,实现样式的灵活配置,且由于在模板对象中提前配置了交互样式属性,用户在发送图编辑请求时,只需要根据自身需求确定不同交互样式的配置值即可,配置简单,且不需要用户掌握专业知识。示例性的,交互样式的配置值包括交互样式标识,交互样式标识用于表征预先设置的与不同展示样式,通过在模板对象中预先确定与不同响应函数对应的交互样式标识,则用户可以直接根据交互样式标识对响应函数进行选择。
具体的,图元素在界面上完成绘制后,其交互样式的监听函数启动运行,保持着对相应关联事件的监听,在监听到相应的关联事件后,执行对应的响应函数,实现对相应交互样式进行展示的响应。
示例性的,在上述示例的基础上,为关联事件为鼠标悬停事件设置交互样式标识设置为a时表征对应的响应函数为放大样式,当为图元素中的圆形节点配置该属性时,在界面中渲染显示圆形节点时,监听函数启动运行对鼠标位置进行监听,当监听到鼠标位置与圆形节点位置重合时,则表示关联事件被触发,高亮显示的响应函数进行响应。
在本实施例的另一个可选实现方式中,关联事件包括下述至少一项:后台触发事件和界面操作事件;
界面操作事件包括下述至少一项:拖动事件、选中事件、鼠标悬停事件。
其中,后台触发事件是指根据后台数据运行信息确定对图元素进行互动触发的事件,例如对于流程图来说,后台触发事件可以是任一流程完成事件;界面操作事件用于表征用户在界面上对图元素的操作,界面操作事件一般需要鼠标作为工具进行参与,具体包括拖动事件,用于表征用户操作鼠标对图元素进行拖动,选中事件,用于表征用户操作鼠标对图元素进行选中确定,鼠标悬停事件用于表征用户操作鼠标停留在图元素的上方,但是未对图元素进行选中或其他实质操作。
示例性的,在流程图可视化中,为候选目标对象添加选中关联事件以及鼠标悬停关联事件,用户在发送图编辑请求时,需要对选中关联事件以及鼠标悬停关联事件进行配置值的设置,即确定每一个关联事件所需要响应的具体样式变化,具体的样式变化通过响应函数进行确定,响应函数是需要设置好的代码段库,与交互样式标识一一对应。
通过对关联事件进行确定可以实现用户对可视化图中的多种交互进行自由配置,且不需要与技术栈强绑定,用户配置简单且灵活,实现可视化图的交互样式丰富展示。
在本实施例的另一个可选实现方式中,图为机器学习训练流程图,机器学习训练流程图中图元素的节点为机器学习模型中的子模型,机器学习训练流程图中图元素的连线为子模型之间的数据流向,关联事件包括子模型执行当前计算的结束事件或异常事件。
在待编辑图元素中包括节点元素和连线元素,其中节点元素用于对图形进行表征,连线元素用于对图形之间的连接进行表征。具体的,当需要在进行训练的机器学习模型中增加子模型,则发送待编辑图请求,待编辑图请求中包括与该子模型对应的候选模板对象的唯一标识信息,以及该子模型关联事件对应的交互样式标识,通过该交互样式标识可以对应确定具体的响应函数。
示例性的,预先根据不同类型的子模型设置对应的候选模板对象,示例性的,用包括圆形节点的候选模板对象表示第一类型的子模型,包括矩形节点的候选模板对象表示第二类型的子模型,当需要增加第一类型子模型时,根据获取到的子模型类型确定对应的目标模板对象为包括圆形节点的模板对象,并根据子模型之间的数据流向,确定节点之间连线方向。为圆形节点添加关联事件,例如当该子模型的计算结束时,圆形节点进行高亮显示,则确定圆形节点的关联事件为子模型执行当前计算的结束事件,监听函数为监听是否接收到子模型结束的参数输入,若监听到,则执行相应高亮显示的响应函数。
通过对机器学习训练流程图的可视化交互样式的配置,实现了对机器学习训练过程的可视化。
在本实施例的另一个可选实现方式中,交互样式的配置值包括交互样式标识;
相应的,在图元素的交互样式的监听函数,监听到对图元素的关联事件时,执行响应函数之前,该方法还包括:
基于配置后的目标模板对象中的交互样式标识,从预设资源库中调取对应的监听函数并启动运行,以对关联事件进行监听。
其中,预设资源库中是预先进行编辑的监听函数代码段库以及还包括对应的响应函数代码段库,具体对代码库内容并不限制。交互样式标识用于表征预先设置的与不同展示样式,通过在模板对象中预先确定与不同响应函数对应的交互样式标识,则用户可以直接根据交互样式标识对响应函数进行选择。由于交互样式标识表征了需要对图元素进行展示的关联事件的交互样式,交互样式标识可以用数字或字母进行唯一性标识,具体内容不做限制。
具体的,用户在设置交互样式标识后,确定与该交互样式标识关联的监听函数以及响应函数,从预设资源库中调取对应的监听函数对关联事件进行监听,在界面中渲染对应的图元素时,当监听函数监听到设置的关联事件后,对应的响应函数进行响应,以展示对应的交互样式。
通过为目标模板对象配置关联事件的监听函数,并且在界面上渲染时进行启动监听,实现了对界面上图元素的交互样式的渲染,丰富图元素的可视化效果,并且监听函数是从预设资源库中调取的,不需要用户自行进行设计,简化了用户的操作过程。
本实施例的方案,通过在候选模板对象中配置交互样式属性,使得用户在使用候选模板对象中可以对交互样式属性进行自定义,实现对不同关联事件的样式响应,提高对编辑图的可视化效果,且操作简单。并且,用户在绘制图时,可以通过预设候选模型对象实现对模型对象中节点的快速复用,提高对可视化图的编辑效率。
图2是根据本公开实施例的另一种图可视化方法的示意图,本实施例是对上述技术方案的进一步细化,属性还包括参数类属性;参数类属性的配置值包括参数取值范围或至少两个可选参数项。本实施例中的技术方案可以与上述一个或者多个实施例中的各个可选方案结合。
其中,参数类属性用于对待编辑图元素的内容进行配置,可以用参数对配置内容进行表征。示例性的,参数类属性可以包括图形形状、图形内容、图形颜色等静态样式。参数类属性的配置值根据具体属性内容进行设置,可以提供至少两种参数项供用户对图编辑时进行选择。例如,当参数类属性为形状时,则对应配置值为形状大小的范围,例如可绘制圆的半径范围;当参数类属性为填充颜色时,则对应配置值为至少两种颜色参数项。
通过对待编辑图元素的参数类属性进行设置,实现了对图的丰富配置,满足复杂业务需求。
如图2所示,图可视化方法包括如下:
S210、获取图编辑请求。
S220、根据图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与待编辑图元素对应的目标模板对象。
S230、从图编辑请求中获取待编辑图元素的至少一项属性的配置值,对目标模板对象的属性进行配置;其中,属性还包括节点静态参数类属性。
在待编辑图元素中包括节点,节点用于对图元素中的图形进行表征。节点静态参数类属性用于对节点的静态参数进行表征,通过对静态参数进行配置,以保证可视化图的完整性。
具体的,图元素的节点静态参数类属性包括下述至少一项:组成元素类型、容器类型、节点输入点参数以及节点输出点参数;其中:
组成元素类型用于对界面中图元素包括的节点中显示图形类型进行确定;
容器类型用于对包括节点输入点和节点输出点的图形类型进行确定;
节点输入点参数、节点输出点参数以及容器类型用于对界面中图元素包括的节点的输入点位置和输出点位置进行确定。
具体的,在图元素中的组成元素类型的配置值表示了在图中所展示的具体图形类型,例如圆形或矩形等。在图元素中可以包括至少一种组成元素类型的配置值。也就说是说,候选目标对象中可以包括多种图像的组合。容器类型的配置值表示了放置节点输入点和节点输出点的轮廓形状,例如对于流程图而言,对于中间流程的容器类型为矩形,该流程节点的输入点和输出点位于该矩形的轮廓上;对于开始或结束的容器类型为圆形,该节点的输入点或输出点位于圆形的轮廓上。
节点输入点参数表征了节点输入点在容器上的位置以及节点输入点的数量信息,节点输出点参数表征了节点输出点在容器上的位置以及节点输出点的数量信息。根据容器类型以及确定的输入点在容器上的位置确定最终输入点的坐标信息,同理,根据容器类型以及确定的输出点在容器上的位置确定最终输出点的坐标信息。
示例性的,确定节点输入点参数为在容器上的位置为底部,数量信息为两个,则根据预先确定的不同容器类型对应的位置计算方法确定根据输入点数量对容器底部轮廓进行等分,将输入点数量确定为等分点位置坐标。
示例性的,在图元素的节点对象中,配置多个组成元素,每个组成元素配置四个属性,包括静态参数属性以及交互样式属性,其中,静态参数属性包括name,交互样式属性包括normal、hover和selected。其中,name属性表示节点中图形的名称,支持贝塞尔曲线、圆、图像、直线、多边形、矩形、文字、三角形8种图形。normal属性配置该图形常规态下的样式和形状。hover配置该图形鼠标悬停事件关联的样式和形状。selected属性配置该图形选中关联事件下的样式和形状。其中,样式配置字体、字号、填充、对齐方式等样式;形状配置图形的大小,例如,矩形配置横坐标、纵坐标、长、高、圆角,圆配置半径。此外,节点中还包括容器类型box、节点输入点参数inputCircle以及节点输出点参数outputCircle。box是容器,它可以是任意图形,用来决定节点的输入输出点的放置图形。inputCircle参数配置输入点在容器的位置,它可以是一个枚举值,其值是top、bottom、left、right之一。同理,outputCircle是节点的输出点配置,用来配置输出点在容器的位置。
通过对图元素中节点静态参数类进行配置,进一步丰富了对可视化图的可配置项,提高了对图的可视化效果。
在本实施例的另一个可选实现方式中,节点输入点参数还用于对节点间连接指引进行确定;其中,连接指引包括节点输入点可被连接指引或节点输入点已完成连接指引。
其中,节点输入点可被连接指引是指当前节点可以与用户当前的输出点进行连线,具体连接判断根据节点间的数据流向进行确定,当可进行连线时,节点连接指引则进行相应的样式显示。当前节点输入点已完成连接指引表示当前节点的输入点已经和用户当前的输出点完成连接的样式显示。连接指引用于对用户连接节点时进行提示,以提高用户对图的编辑效率。
示例性的,在上述示例的基础上,inputCircle是节点的输入点参数,它有3个配置:guide和guideHovern。guide配置用于表征当用户从输出点开始连线时,如果当前节点输入点可连接所展示的样式,用于给用户一个可输入的样式提示。guideHover配置用于表征当用户连线点已经触及当前节点输入点的样式显示,告知用户已经连接成功。
通过对节点间的连接指引进行配置,实现了用户在绘制图时进一步可视化效果的提升,便于提高对图的编辑效率。
S240、基于配置后的目标模板对象,根据节点静态参数类属性和交互样式的配置值在界面中渲染显示对应的图元素。
具体的,根据节点静态参数类属性中组成元素类型、容器类型、节点输入点参数以及节点输出点参数的配置值在界面上显示对应的组成元素、容器、节点输入点以及节点输出点,在上述示例的基础上,根据容器类型以及组成元素类型进行渲染,并根据对应的配置项对容器和组成元素进行渲染配置,计算节点输入点和输出点的位置信息,并根据连接指引对节点输入点进行样式渲染。并根据交互样式的配置值为对应的组成元素添加对应的监听函数。
根据上述属性的配置值对节点进行配置后,当监听到对节点的关联事件时,执行对应的响应函数。具体可以是对节点中组成元素的关联事件也可以是对节点输入点和节点输出点的关联事件。
示例性的,在上述示例的基础上,静态图渲染后,画图引擎会内置交互关联事件处理,对节点添加mouseover监听,并在监听函数中读取模版的hover态配置,渲染节点hover态形状和样式,并在mouseout监听函数中将节点恢复到正常态normal。当节点选中时,会触发监听函数,在函数中会读取节点的选中态selected配置,渲染节点的选中态形状和样式。
本实施例的方案,通过对图元素的节点静态参数类属性进行设置配置值,实现了在使用模板对象节点进行快速复用的同时,保证了图应用中节点的组成和样式的丰富性,也提高对可视化图的编辑效率。
图3是根据本公开实施例的又一种图可视化方法的示意图,本实施例是对上述技术方案的进一步细化,本实施例中的技术方案可以与上述一个或者多个实施例中的各个可选方案结合。如图3所示,图可视化方法包括如下:
S310、获取图编辑请求。
S320、根据图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与待编辑图元素对应的目标模板对象。
S330、从图编辑请求中获取待编辑图元素的至少一项属性的配置值,对目标模板对象的属性进行配置;其中,属性还包括连线静态参数类属性。
在待编辑图元素中包括连线,连线用于对图元素中节点间的连接线进行表征。连线静态参数类属性用于对连线的静态参数进行表征,通过对静态参数进行配置,以保证可视化图的完整性。
具体的,图元素的连线静态参数类属性包括下述至少一项:连线类型、箭头类型以及背景线参数;其中:
连线类型用于对界面中图元素的节点间连线方式进行确定;
箭头类型用于对界面中图元素的节点间顺序走向以及箭头形状进行确定;
背景线参数用于对节点间连线的响应扩大范围进行确定。
其中,背景线参数是根据连线位置进行扩大的背景区域范围,由于连线过小,则用户对连线进行操作时存在一定的困难,因此为连线设置响应扩大范围,当用户对该响应扩大范围进行操作时,也定为对连线进行操作。节点间连线的响应扩大范围根据连线的长度进行设置,建议连线上各点与响应扩大范围之间的映射关系,当对响应扩大范围进行操作时,根据映射关系确定实际操作的连线上的区域。
示例性的,在图元素的连线对象中,有三个固定配置,line、backline、triangle。line配置连线的类型,一般是贝塞尔曲线或者直线,连线可以配置交互样式属性,例如包括normal、hover、selected三种响应样式,分别对应不同响应样式变化。backline配置连线的背景线参数,一般用来扩大响应热区,也可以配置交互样式属性,例如包括normal、hover、selected三种响应样式。triangle配置箭头的形状与样式,一般是三角形,也可以配置交互样式属性,例如包括normal、hover、selected三种响应样式。
通过对图元素中连线静态参数类进行配置,对节点间的数据流向进行明确,进一步丰富了对可视化图的可配置项,提高了对图的可视化效果。
S340、基于配置后的目标模板对象,根据连线静态参数类属性和交互样式的配置值在界面中渲染显示对应的图元素。
具体的,根据连线静态参数类属性中连线类型、箭头类型以及背景线参数的配置值在界面上显示对应的连线以及箭头,示例性的,在上述示例的基础上,根据节点输入点和节点输出点位置信息计算连线起点位置和终点位置,并根据连线类型、箭头类型以及背景线参数对连线进行渲染,并根据对应的交互样式配置项对连线、箭头以及背景线进行渲染配置。最后根据交互样式配置为对应的连线元素添加对应的监听函数。
根据上述属性的配置值对连线进行配置后,当监听到对连线的关联事件时,执行对应的响应函数。具体可以是对连线中背景线的关联事件也可以是对箭头的关联事件。
示例性的,在上述示例的基础上,静态图渲染后,画图引擎会内置交互关联事件处理,对连线添加mouseover监听,并在监听函数中读取模版的hover态配置,渲染连线hover态形状和样式,并在mouseout监听函数中将连线恢复到正常态normal。当连线选中时,会触发监听函数,在函数中会读取连线的选中态selected配置,渲染连线的选中态形状和样式。
本实施例的方案,通过对图元素的连线静态参数类属性进行设置配置值,实现了在使用模板对象进行快速复用的同时,保证了图应用中节点间的准确连线,也提高对可视化图的编辑效率。
图4是根据本公开实施例的一种预设候选模板对象的自定义过程示意图,本实施例是对上述技术方案的进一步细化,本实施例中的技术方案可以与上述一个或者多个实施例中的各个可选方案结合。如图4所示,通过以下方式获取预设候选模板对象集合中的预设候选模板对象:
S450、获取用户输入的针对候选模板对象的自定义请求。
用户可以根据需求对候选模块对象进行自定义,以满足绘图需求。
示例性的,自定义请求可以是多种图形和连线的组合,候选模板对象可以是复用性较高的图形组合,对复用性较高的图形组合进行自定义成候选模板对象,则在后续绘图时,可以直接对候选模板对象进行使用,提高对图的编辑效率。
S420、根据自定义请求,确定待定义的模板对象、属性和属性可配置项。
在自定义请求中包括用户需要定义的模板对象、属性和属性可配置项。其中,模板对象可以是模板唯一标识符,以根据唯一标识符对该候选模板对象进行标识。属性可以包括上述实施例中的任一属性,例如交互样式属性、节点静态参数类属性以及连线静态参数类属性,并为属性中固定值进行设置属性可配置项,为后续复用时用户可自行设置的项设置变量,以便后续根据用户传入值对变量进行替换。
在本实施例的另一个可选实现方式中,待定义的属性为交互样式,属性可配置项包括关联事件、监听函数和响应函数;
相应的,根据自定义请求,确定待定义的模板对象、属性和属性可配置项,包括:
从自定义请求中确定待定义的模板对象以及交互样式的可配置项标识;
根据可配置项标识,从预设资源库中,获取对应的关联事件、监听函数或响应函数,以组合形成待定义的模板对象的交互样式。
在对候选模板对象的自定义中,可以对交互样式进行自定义设计,在自定义设计中,需要确定待定义的模板对象,该模板对象可以为图形或连线,并为该模板对象设置交互样式的可配置项标识,其中,交互样式的可配置项标识表示了可以对该模板对象进行设置的交互样式,例如对该模板对象进行设置的关联事件、监听函数以及响应函数。用户后续在使用该候选模板对象时,可以根据可配置项标识对该模板对象的交互样式进行具体限定。
示例性的,待定义的模板对象为连线对象,交互样式的可配置项标识为normal、hover以及selected,normal表征待定义模板对象在常规态下的样式,hover表示待定义模板对象在鼠标悬停状态下的样式,selected表征待定义模板对象在选中状态下的样式。
根据可配置项表示,从预设资源库中选择对应的关联事件、监听函数或响应函数,其中,预设资源库中预先定义了关联函数、响应函数以及监听函数的执行代码段,并且与可配置项标识关联。
通过用户对候选模板对象中交互样式的自定义,便于简化后续图编辑时对交互样式的确定过程,通过模板的灵活配置提高了对图的编辑效率,满足复杂业务需求。
S430、根据待定义的模板对象、属性和属性可配置项,添加或更新预设候选模板对象。
若待定义的模板唯一标识符存在,则根据属性和属性可配置项对候选模板对象进行更新,得到更新后的预设候选模板对象;若待定义的模板唯一标识符不存在,则根据属性和属性可配置项重新进行渲染生成新的对象,作为新的预设候选模板对象,并将更新后的预设候选模板对象添加到候选模板对象集合中,以待后续绘图过程中进行使用。
本实施例的方案,当图编辑过程中出现复用性高的图形时,通过用户对新的预设候选模板对象的自定义,实现对复用性高的图形进行添加相应的候选模板对象,以便在后续图编辑时直接使用,通过模板的灵活配置提高了对图的编辑效率,满足复杂业务需求。
图5是根据本公开实施例的一种图可视化装置的结构示意图,该装置可以执行本公开任一实施例中涉及到的图可视化方法;参考图5,图可视化装置500,包括:图编辑请求获取模块510、目标模板对象确定模块520、属性配置模块530和图元素渲染模块540。
图编辑请求获取模块510,用于获取图编辑请求;
目标模板对象确定模块520,用于根据所述图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与所述待编辑图元素对应的目标模板对象;
属性配置模块530,用于从所述图编辑请求中获取所述待编辑图元素的至少一项属性的配置值,对所述目标模板对象的属性进行配置;其中,所述属性至少包括交互样式;
图元素渲染模块540,用于基于配置后的目标模板对象,根据所述交互样式的配置值在界面中渲染显示对应的图元素。
本实施例的方案,通过在候选模板对象中配置交互样式属性,使得用户在使用候选模板对象中可以对交互样式属性进行自定义,实现对不同关联事件的样式响应,提高对编辑图的可视化效果,且操作简单。并且,用户在绘制图时,可以通过预设候选模型对象实现对模型对象中节点的快速复用,提高对可视化图的编辑效率。
在本实施例的一个可选实现方式中,所述交互样式包括关联事件、监听函数和响应函数;
相应的,图元素渲染模块,具体用于:
在所述图元素的交互样式的监听函数,监听到对所述图元素的关联事件时,执行所述响应函数。
在本实施例的一个可选实现方式中,所述关联事件包括下述至少一项:后台触发事件和界面操作事件;
所述界面操作事件包括下述至少一项:拖动事件、选中事件、鼠标悬停事件。
在本实施例的一个可选实现方式中,所述属性还包括参数类属性;所述参数类属性的配置值包括参数取值范围或至少两个可选参数项。
在本实施例的一个可选实现方式中,所述图元素的节点静态参数类属性包括下述至少一项:组成元素类型、容器类型、节点输入点参数以及节点输出点参数;其中:
所述组成元素类型用于对界面中图元素包括的节点中显示图形类型进行确定;
所述容器类型用于对包括节点输入点和节点输出点的图形类型进行确定;
所述节点输入点参数、节点输出点参数以及容器类型用于对界面中图元素包括的节点的输入点位置和输出点位置进行确定。
在本实施例的一个可选实现方式中,所述图元素的连线静态参数类属性包括下述至少一项:连线类型、箭头类型以及背景线参数;其中:
所述连线类型用于对界面中图元素的节点间连线方式进行确定;
所述箭头类型用于对界面中图元素的节点间顺序走向以及箭头形状进行确定;
所述背景线参数用于对节点间连线的响应扩大范围进行确定。
在本实施例的一个可选实现方式中,所述节点输入点参数还用于对节点间连接指引进行确定;其中,所述连接指引包括节点输入点可被连接指引或节点输入点已完成连接指引。
在本实施例的一个可选实现方式中,所述图为机器学习训练流程图,所述机器学习训练流程图中图元素的节点为机器学习模型中的子模型,所述机器学习训练流程图中图元素的连线为子模型之间的数据流向,所述关联事件包括子模型执行当前计算的结束事件或异常事件。
在本实施例的一个可选实现方式中,所述装置还包括候选模板对象自定义模块,用于对预设候选模板对象集合中的预设候选模板对象进行自定义,包括:
自定义请求获取单元,用于获取用户输入的针对候选模板对象的自定义请求;
属性确定单元,用于根据所述自定义请求,确定待定义的模板对象、属性和属性可配置项;
模板对象确定单元,用于根据所述待定义的模板对象、属性和属性可配置项,添加或更新预设候选模板对象。
在本实施例的一个可选实现方式中,待定义的属性为交互样式,属性可配置项包括关联事件、监听函数和响应函数;
相应的,属性确定单元,包括:
从所述自定义请求中确定待定义的模板对象以及所述交互样式的可配置项标识;
根据所述可配置项标识,从预设资源库中,获取对应的关联事件、监听函数或响应函数,以组合形成所述待定义的模板对象的交互样式。
在本实施例的一个可选实现方式中,交互样式的配置值包括交互样式标识;
相应的,所述装置还包括监听函数启动模块,用于在所述在所述图元素的交互样式的监听函数,监听到对所述图元素的关联事件时,执行所述响应函数之前,基于配置后的目标模板对象中的交互样式标识,从预设资源库中调取对应的监听函数并启动运行,以对关联事件进行监听。
上述图可视化装置可执行本公开任意实施例所提供的图可视化方法,具备执行方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节,可参见本公开任意实施例提供的图可视化方法。
本公开的技术方案中,所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理,均符合相关法律法规的规定,且不违背公序良俗。
根据本公开的实施例,本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。
图6示出了可以用来实施本公开的实施例的示例电子设备500的示意性框图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本公开的实现。
如图6所示,设备500包括计算单元501,其可以根据存储在只读存储器(ROM)502中的计算机程序或者从存储单元508加载到随机访问存储器(RAM)503中的计算机程序,来执行各种适当的动作和处理。在RAM 503中,还可存储设备500操作所需的各种程序和数据。计算单元501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。
设备500中的多个部件连接至I/O接口505,包括:输入单元506,例如键盘、鼠标等;输出单元507,例如各种类型的显示器、扬声器等;存储单元508,例如磁盘、光盘等;以及通信单元509,例如网卡、调制解调器、无线通信收发机等。通信单元509允许设备500通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
计算单元501可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元501的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元501执行上文所描述的各个方法和处理,例如图可视化方法。例如,在一些实施例中,图可视化方法可被实现为计算机软件程序,其被有形地包含于机器可读介质,例如存储单元508。在一些实施例中,计算机程序的部分或者全部可以经由ROM 502和/或通信单元509而被载入和/或安装到设备500上。当计算机程序加载到RAM 503并由计算单元501执行时,可以执行上文描述的图可视化方法的一个或多个步骤。备选地,在其他实施例中,计算单元501可以通过其他任何适当的方式(例如,借助于固件)而被配置为执行方法图可视化。
本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器,使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行,作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本公开的上下文中,机器可读介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
为了提供与用户的交互,可以在计算机上实施此处描述的系统和技术,该计算机具有:用于向用户显示信息的显示装置(例如,CRT(阴极射线管)或者LCD(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网(LAN)、广域网(WAN)、区块链网络和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器,也可以为分布式系统的服务器,或者是结合了区块链的服务器。
应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本公开公开的技术方案所期望的结果,本文在此不进行限制。
上述具体实施方式,并不构成对本公开保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等,均应包含在本公开保护范围之内。
Claims (25)
1.一种图可视化方法,包括:
获取图编辑请求;
根据所述图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与所述待编辑图元素对应的目标模板对象;
从所述图编辑请求中获取所述待编辑图元素的至少一项属性的配置值,对所述目标模板对象的属性进行配置;其中,所述属性至少包括交互样式;
基于配置后的目标模板对象,根据所述交互样式的配置值在界面中渲染显示对应的图元素。
2.根据权利要求1所述的方法,其中,所述交互样式包括关联事件、监听函数和响应函数;
相应的,根据所述交互样式的配置值在界面中渲染显示对应的图元素,包括:
在所述图元素的交互样式的监听函数,监听到对所述图元素的关联事件时,执行所述响应函数,以对所述图元素进行样式渲染。
3.根据权利要求2所述的方法,其中,所述关联事件包括下述至少一项:后台触发事件和界面操作事件;
所述界面操作事件包括下述至少一项:拖动事件、选中事件、鼠标悬停事件。
4.根据权利要求1所述的方法,其中,所述属性还包括参数类属性;所述参数类属性的配置值包括参数取值范围或至少两个可选参数项。
5.根据权利要求4所述的方法,其中,所述图元素的节点静态参数类属性包括下述至少一项:组成元素类型、容器类型、节点输入点参数以及节点输出点参数;其中:
所述组成元素类型用于对界面中图元素包括的节点中显示图形类型进行确定;
所述容器类型用于对包括节点输入点和节点输出点的图形类型进行确定;
所述节点输入点参数、节点输出点参数以及容器类型用于对界面中图元素包括的节点的输入点位置和输出点位置进行确定。
6.根据权利要求4所述的方法,其中,所述图元素的连线静态参数类属性包括下述至少一项:连线类型、箭头类型以及背景线参数;其中:
所述连线类型用于对界面中图元素的节点间连线方式进行确定;
所述箭头类型用于对界面中图元素的节点间顺序走向以及箭头形状进行确定;
所述背景线参数用于对节点间连线的响应扩大范围进行确定。
7.根据权利要求5所述的方法,其中,所述节点输入点参数还用于对节点间连接指引进行确定;其中,所述连接指引包括节点输入点可被连接指引或节点输入点已完成连接指引。
8.根据权利要求2所述的方法,其中,图为机器学习训练流程图,所述机器学习训练流程图中图元素的节点为机器学习模型中的子模型,所述机器学习训练流程图中图元素的连线为子模型之间的数据流向,所述关联事件包括子模型执行当前计算的结束事件或异常事件。
9.根据权利要求1所述的方法,其中,通过以下方式获取所述预设候选模板对象集合中预设候选模板对象:
获取用户输入的针对候选模板对象的自定义请求;
根据所述自定义请求,确定待定义的模板对象、属性和属性可配置项;
根据所述待定义的模板对象、属性和属性可配置项,添加或更新预设候选模板对象。
10.根据权利要求9所述的方法,其中,待定义的属性为交互样式,属性可配置项包括关联事件、监听函数和响应函数;
相应的,根据所述自定义请求,确定待定义的模板对象、属性和属性可配置项,包括:
从所述自定义请求中确定待定义的模板对象以及所述交互样式的可配置项标识;
根据所述可配置项标识,从预设资源库中,获取对应的关联事件、监听函数或响应函数,以组合形成所述待定义的模板对象的交互样式。
11.根据权利要求2所述的方法,其中,交互样式的配置值包括交互样式标识;
相应的,在所述在所述图元素的交互样式的监听函数,监听到对所述图元素的关联事件时,执行所述响应函数之前,所述方法还包括:
基于配置后的目标模板对象中的交互样式标识,从预设资源库中调取对应的监听函数并启动运行,以对关联事件进行监听。
12.一种图可视化装置,包括:
图编辑请求获取模块,用于获取图编辑请求;
目标模板对象确定模块,用于根据所述图编辑请求中的待编辑图元素,从预设候选模板对象集合中,确定与所述待编辑图元素对应的目标模板对象;
属性配置模块,用于从所述图编辑请求中获取所述待编辑图元素的至少一项属性的配置值,对所述目标模板对象的属性进行配置;其中,所述属性至少包括交互样式;
图元素渲染模块,用于基于配置后的目标模板对象,根据所述交互样式的配置值在界面中渲染显示对应的图元素。
13.根据权利要求12所述的装置,其中,所述交互样式包括关联事件、监听函数和响应函数;
相应的,图元素渲染模块,具体用于:
在所述图元素的交互样式的监听函数,监听到对所述图元素的关联事件时,执行所述响应函数。
14.根据权利要求13所述的装置,其中,所述关联事件包括下述至少一项:后台触发事件和界面操作事件;
所述界面操作事件包括下述至少一项:拖动事件、选中事件、鼠标悬停事件。
15.根据权利要求12所述的装置,其中,所述属性还包括参数类属性;所述参数类属性的配置值包括参数取值范围或至少两个可选参数项。
16.根据权利要求15所述的装置,其中,所述图元素的节点静态参数类属性包括下述至少一项:组成元素类型、容器类型、节点输入点参数以及节点输出点参数;其中:
所述组成元素类型用于对界面中图元素包括的节点中显示图形类型进行确定;
所述容器类型用于对包括节点输入点和节点输出点的图形类型进行确定;
所述节点输入点参数、节点输出点参数以及容器类型用于对界面中图元素包括的节点的输入点位置和输出点位置进行确定。
17.根据权利要求15所述的装置,其中,所述图元素的连线静态参数类属性包括下述至少一项:连线类型、箭头类型以及背景线参数;其中:
所述连线类型用于对界面中图元素的节点间连线方式进行确定;
所述箭头类型用于对界面中图元素的节点间顺序走向以及箭头形状进行确定;
所述背景线参数用于对节点间连线的响应扩大范围进行确定。
18.根据权利要求16所述的装置,其中,所述节点输入点参数还用于对节点间连接指引进行确定;其中,所述连接指引包括节点输入点可被连接指引或节点输入点已完成连接指引。
19.根据权利要求13所述的装置,其中,图为机器学习训练流程图,所述机器学习训练流程图中图元素的节点为机器学习模型中的子模型,所述机器学习训练流程图中图元素的连线为子模型之间的数据流向,所述关联事件包括子模型执行当前计算的结束事件或异常事件。
20.根据权利要求12所述的装置,其中,所述装置还包括候选模板对象自定义模块,用于对预设候选模板对象集合中的预设候选模板对象进行自定义,包括:
自定义请求获取单元,用于获取用户输入的针对候选模板对象的自定义请求;
属性确定单元,用于根据所述自定义请求,确定待定义的模板对象、属性和属性可配置项;
模板对象确定单元,用于根据所述待定义的模板对象、属性和属性可配置项,添加或更新预设候选模板对象。
21.根据权利要求20所述的装置,其中,待定义的属性为交互样式,属性可配置项包括关联事件、监听函数和响应函数;
相应的,属性确定单元,包括:
从所述自定义请求中确定待定义的模板对象以及所述交互样式的可配置项标识;
根据所述可配置项标识,从预设资源库中,获取对应的关联事件、监听函数或响应函数,以组合形成所述待定义的模板对象的交互样式。
22.根据权利要求13所述的装置,其中,交互样式的配置值包括交互样式标识;
相应的,所述装置还包括监听函数启动模块,用于在所述在所述图元素的交互样式的监听函数,监听到对所述图元素的关联事件时,执行所述响应函数之前,
基于配置后的目标模板对象中的交互样式标识,从预设资源库中调取对应的监听函数并启动运行,以对关联事件进行监听。
23.一种电子设备,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行权利要求1-11中任一项所述的方法。
24.一种存储有计算机指令的非瞬时计算机可读存储介质,其中,所述计算机指令用于使所述计算机执行根据权利要求1-11中任一项所述的方法。
25.一种计算机程序产品,包括计算机程序/指令,其特征在于,所述计算机程序/指令被处理器执行时实现根据权利要求1-11中任一项所述方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210786656.5A CN115129553A (zh) | 2022-07-04 | 2022-07-04 | 图可视化方法、装置、设备、介质及产品 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210786656.5A CN115129553A (zh) | 2022-07-04 | 2022-07-04 | 图可视化方法、装置、设备、介质及产品 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115129553A true CN115129553A (zh) | 2022-09-30 |
Family
ID=83382256
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210786656.5A Pending CN115129553A (zh) | 2022-07-04 | 2022-07-04 | 图可视化方法、装置、设备、介质及产品 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115129553A (zh) |
Citations (19)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20100281367A1 (en) * | 2009-04-30 | 2010-11-04 | Tom Langmacher | Method and apparatus for modifying attributes of media items in a media editing application |
US20100281366A1 (en) * | 2009-04-30 | 2010-11-04 | Tom Langmacher | Editing key-indexed graphs in media editing applications |
US9128995B1 (en) * | 2014-10-09 | 2015-09-08 | Splunk, Inc. | Defining a graphical visualization along a time-based graph lane using key performance indicators derived from machine data |
CN106909610A (zh) * | 2017-01-10 | 2017-06-30 | 中电科华云信息技术有限公司 | 基于浏览器的可视化拖拽查询数据的方法及系统 |
US20190251145A1 (en) * | 2018-02-14 | 2019-08-15 | Pearson Education, Inc. | System for markup language conversion |
CN110851626A (zh) * | 2019-11-05 | 2020-02-28 | 武汉联图时空信息科技有限公司 | 一种基于图层布局的时空数据可视化分析方法与系统 |
CN111210525A (zh) * | 2018-11-20 | 2020-05-29 | 北京京东尚科信息技术有限公司 | 三维模型交互编辑的方法、平台、设备及可读存储介质 |
CN111538872A (zh) * | 2020-07-09 | 2020-08-14 | 太平金融科技服务(上海)有限公司 | 业务节点信息的可视化方法、装置、计算机设备和介质 |
CN111915705A (zh) * | 2019-05-07 | 2020-11-10 | 百度在线网络技术(北京)有限公司 | 图片可视化编辑方法、装置、设备和介质 |
US20210097065A1 (en) * | 2019-09-27 | 2021-04-01 | Tableau Software, Inc. | Interactive data visualization |
CN113094042A (zh) * | 2021-04-29 | 2021-07-09 | 国电南瑞科技股份有限公司 | 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法 |
CN113190314A (zh) * | 2021-04-29 | 2021-07-30 | 北京有竹居网络技术有限公司 | 互动内容生成方法、装置、存储介质及电子设备 |
CN113591197A (zh) * | 2021-09-26 | 2021-11-02 | 深圳须弥云图空间科技有限公司 | 在线编辑方法、装置、电子设备及存储介质 |
CN113792208A (zh) * | 2021-09-29 | 2021-12-14 | 腾讯科技(深圳)有限公司 | 基于网页的图片交互方法、装置、设备、介质及程序产品 |
CN113867875A (zh) * | 2021-09-30 | 2021-12-31 | 北京市商汤科技开发有限公司 | 标记对象的编辑及显示方法、装置、设备、存储介质 |
CN114022601A (zh) * | 2021-11-04 | 2022-02-08 | 北京字节跳动网络技术有限公司 | 一种体积元素渲染方法、装置及设备 |
CN114048329A (zh) * | 2021-11-25 | 2022-02-15 | 工银科技有限公司 | 知识图谱的构建与展示方法、装置、电子设备和介质 |
US20220083316A1 (en) * | 2020-09-16 | 2022-03-17 | Figma, Inc. | Interactive graphic design system to enable creation and use of variant component sets for interactive objects |
CN114675925A (zh) * | 2022-05-30 | 2022-06-28 | 苏州光格科技股份有限公司 | 组态图像处理方法、装置、计算机设备、存储介质 |
-
2022
- 2022-07-04 CN CN202210786656.5A patent/CN115129553A/zh active Pending
Patent Citations (19)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20100281366A1 (en) * | 2009-04-30 | 2010-11-04 | Tom Langmacher | Editing key-indexed graphs in media editing applications |
US20100281367A1 (en) * | 2009-04-30 | 2010-11-04 | Tom Langmacher | Method and apparatus for modifying attributes of media items in a media editing application |
US9128995B1 (en) * | 2014-10-09 | 2015-09-08 | Splunk, Inc. | Defining a graphical visualization along a time-based graph lane using key performance indicators derived from machine data |
CN106909610A (zh) * | 2017-01-10 | 2017-06-30 | 中电科华云信息技术有限公司 | 基于浏览器的可视化拖拽查询数据的方法及系统 |
US20190251145A1 (en) * | 2018-02-14 | 2019-08-15 | Pearson Education, Inc. | System for markup language conversion |
CN111210525A (zh) * | 2018-11-20 | 2020-05-29 | 北京京东尚科信息技术有限公司 | 三维模型交互编辑的方法、平台、设备及可读存储介质 |
CN111915705A (zh) * | 2019-05-07 | 2020-11-10 | 百度在线网络技术(北京)有限公司 | 图片可视化编辑方法、装置、设备和介质 |
US20210097065A1 (en) * | 2019-09-27 | 2021-04-01 | Tableau Software, Inc. | Interactive data visualization |
CN110851626A (zh) * | 2019-11-05 | 2020-02-28 | 武汉联图时空信息科技有限公司 | 一种基于图层布局的时空数据可视化分析方法与系统 |
CN111538872A (zh) * | 2020-07-09 | 2020-08-14 | 太平金融科技服务(上海)有限公司 | 业务节点信息的可视化方法、装置、计算机设备和介质 |
US20220083316A1 (en) * | 2020-09-16 | 2022-03-17 | Figma, Inc. | Interactive graphic design system to enable creation and use of variant component sets for interactive objects |
CN113094042A (zh) * | 2021-04-29 | 2021-07-09 | 国电南瑞科技股份有限公司 | 一种基于浏览器的电力自动化系统自定义组件的实现与解析方法 |
CN113190314A (zh) * | 2021-04-29 | 2021-07-30 | 北京有竹居网络技术有限公司 | 互动内容生成方法、装置、存储介质及电子设备 |
CN113591197A (zh) * | 2021-09-26 | 2021-11-02 | 深圳须弥云图空间科技有限公司 | 在线编辑方法、装置、电子设备及存储介质 |
CN113792208A (zh) * | 2021-09-29 | 2021-12-14 | 腾讯科技(深圳)有限公司 | 基于网页的图片交互方法、装置、设备、介质及程序产品 |
CN113867875A (zh) * | 2021-09-30 | 2021-12-31 | 北京市商汤科技开发有限公司 | 标记对象的编辑及显示方法、装置、设备、存储介质 |
CN114022601A (zh) * | 2021-11-04 | 2022-02-08 | 北京字节跳动网络技术有限公司 | 一种体积元素渲染方法、装置及设备 |
CN114048329A (zh) * | 2021-11-25 | 2022-02-15 | 工银科技有限公司 | 知识图谱的构建与展示方法、装置、电子设备和介质 |
CN114675925A (zh) * | 2022-05-30 | 2022-06-28 | 苏州光格科技股份有限公司 | 组态图像处理方法、装置、计算机设备、存储介质 |
Non-Patent Citations (1)
Title |
---|
王国栋;陈宏君;刘克金;冯亚东;张磊;曹冬明;: "嵌入式装置图形化编程工具软件设计与应用", 工业控制计算机, no. 05, 25 May 2015 (2015-05-25), pages 7 - 9 * |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106557457B (zh) | 一种基于qt的自动生成跨平台复杂流程图的系统 | |
CN106383704B (zh) | 进度条数据处理的方法和装置 | |
CN110727969B (zh) | 工作流自动调整方法、装置、设备及存储介质 | |
CN111240669A (zh) | 界面生成方法、装置、电子设备及计算机存储介质 | |
CN114742981A (zh) | 后处理特效的制作系统、方法、ar特效渲染方法及装置 | |
CN110704769A (zh) | 流程图生成方法、装置、设备及计算机存储介质 | |
CN112560422A (zh) | 一种图表的处理方法、装置、设备和介质 | |
CN112102441A (zh) | 色卡制作方法、装置、电子设备和存储介质 | |
CN114385816A (zh) | 对话流挖掘方法、装置、电子设备及计算机存储介质 | |
CN114090365A (zh) | 使用动态链接库进行功能测试的方法、装置和设备 | |
CN112947916B (zh) | 用于实现在线画布的方法、装置、设备以及存储介质 | |
CN117750050A (zh) | 基于大语言模型的信息处理方法、装置以及电子设备 | |
CN112328225A (zh) | 一种页面运行方法及其运行系统 | |
CN116450021A (zh) | 大屏搭建方法、系统、电子设备和存储介质 | |
CN111814438A (zh) | 一种网络图的绘制系统及方法 | |
CN115129553A (zh) | 图可视化方法、装置、设备、介质及产品 | |
CN116310040A (zh) | 三维模型的绘制处理方法、装置、电子设备及存储介质 | |
CN109766093B (zh) | 协同实时编辑的方法、装置、电子设备及存储介质 | |
CN111538878A (zh) | 一种基于qt的数据采集平台数据的展示方法及装置 | |
CN112486378A (zh) | 图形生成方法、装置、终端及存储介质 | |
CN112306462A (zh) | 一种积木式对象变量块构建方法、装置、存储介质和处理器 | |
CN113806596B (zh) | 运营数据管理方法及相关装置 | |
CN115080044B (zh) | 一种组合组件的处理方法、装置、前端设备及存储介质 | |
CN112507671B (zh) | 用于调整文本间距的方法、装置、以及可读介质 | |
CN117234391A (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 |