CN116719463A - 一种在交互界面上生成树型流程图的方法、装置及产品 - Google Patents

Abstract

本申请实施例提供一种在交互界面上生成树型流程图的方法、装置及产品，所述方法包括：根据节点关系构建初始树型流程图，其中，所述初始树型流程图包括多个节点以及连接节点之间的边；响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点的样式或功能；响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式。基于本申请实施例的树型流程图组件，通过原生canvas、简单的json配置、内置的数据处理逻辑，即可生成树型流程图，且树型流程图中的各节点、节点之间的边可配置，可自适应展示相关树型流程图。

Description

一种在交互界面上生成树型流程图的方法、装置及产品

技术领域

本申请涉及前端领域，具体而言本申请实施例涉及一种在交互界面上生成树型流程图的方法、装置及产品。

背景技术

在现代化进程中，无纸化工作是越来越明显了。在追求无纸化工作的过程中，难以避免就要使用电脑来设计和制成图表，这样子，既可以省去一系列画图表的时间，还能够让制作周期减短，使得数据统计过程更加的准确。

前端发展到今天，对于图表的使用在形式、内容和功能上越来越丰富。在技术方面由最开始的原生Javascript到后来的svg，再到HTML5新增的canvas实现图表。Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制；基于这一技术，市面上出现了Apache ECharts、Antv|蚂蚁数据等图表库。以echarts为例，它是通过官方提供的api配置指定对象，echarts拿到数据后，通过一系列计算，算出canvas绘制图案时所需要的数据(坐标、高度、宽度等)；最终通过canvas，绘制出各色图表。

目前通过canvas实现树图的方法都是读取节点数据，将数据进行处理，通过canvas绘制于页面中。例如echarts中的tree图，通过设置类型为tree，将节点数据配置到data中将第一层作为父节点，在通过children判断是否存在子节点，会重复父节点操继续进行处理。然而本申请的发明人在研究中发现，采用这些技术绘制的树型流程图无法对单个节点进行样式设置，并且节点处只能显示单一的value值，节点与节点的连接线也无法自定义配置，对于绘制到页面的图表，不能进行自适应展示，在缩放页面时，无法做到同步的缩放及展示，交互性不友好。

发明内容

本申请实施例的目的在于提供一种在交互界面上生成树型流程图的方法、装置及产品，基于本申请实施例的树型流程图组件，通过原生canvas、简单的json配置、内置的数据处理逻辑，即可生成树型流程图，且树型流程图中的各节点、节点之间的边可配置，可自适应展示相关树型流程图。

第一方面，本申请实施例提供一种在交互界面上生成树型流程图的方法，所述方法包括：根据节点关系构建初始树型流程图，其中，所述初始树型流程图包括多个节点以及连接节点之间的边；响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点的样式或功能；响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式。

本申请的一些实施例的基于canvas设计的树型流程图中的各节点可配置且节点之间的边也可配置，提升树型流程图显示的技术效果并可通过树型流程图提供更多的信息。

在一些实施例中，在所述响应于对所述初始树型流程图上单个节点的操作之前，所述方法还包括：为所述单个节点设置ID字段，并提供节点属性配置参数；所述响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点的样式或功能，包括：响应于选中所述单个节点的操作，获取所述ID字段；响应于依据所述属性配置参数输入的样式配置信息或功能配置信息，完成对所述单个节点的样式设置或者功能设置。

本申请的一些实施例通过为各节点添加节点标识号可以独立操作各个节点，以完善相应节点的样式或者功能。

在一些实施例中，所述样式类型包括设置节点的颜色。

在一些实施例中，在所述响应于对所述初始树型流程图上一条边的操作之前，所述方法还包括：接收输入的两个节点的ID字段；依据所述两个节点的ID字段确认所述两个节点为父子节点；提供边属性设置参数；所述响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式，包括：根据所述父子节点得到对应的边并接收依据所述边属性设置参数输入的配置信息，完成对所述父子节点之间边的样式设置。

本申请的一些实施例通过判定两节点之间的逻辑关系来操作与该两节点对应的边的属性，提升边的显示效果。

在一些实施例中，所述方法还包括：依据所述容器属性自动修改当前树型流程图的显示属性，以使在显示页面缩放或刷新时对应树型流程图可自适应调整显示方式。

本申请的一些实施例通过容器属性来调整显示效果，提升数据展示的技术效果。

在一些实施例中，所述依据所述容器属性自动修改当前树型流程图的显示属性，包括：响应于浏览器可视窗口的变化，获取容器的宽和高属性，并依据所述容器的宽和高属性调整所述当前树型流程图的宽和高。

本申请的一些实施例通过监控浏览器可视窗口的变化情况来调整当前树型流程图的显示方式。

在一些实施例中，所述方法还包括：获取鼠标事件，其中，所述鼠标事件包括：鼠标按下事件、鼠标移动事件和鼠标抬起事件；响应于所述鼠标按下事件，记录鼠标点击的位置以及当前树型流程图的位置和大小；响应于所述鼠标移动事件，计算鼠标移动的距离并根据所述距离调整所述当前树型流程图的位置；响应于所述鼠标抬起事件，清空与所述鼠标按下事件对应记录的信息。

本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

在一些实施例中，所述方法还包括：获取鼠标事件，其中，所述鼠标事件包括鼠标滚轮事件；响应于所述鼠标滚轮事件，计算鼠标滚轮的方向并根据所述方向调整当前树型流程图的大小。

本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

在一些实施例中，所述方法还包括：识别鼠标拖拽事件；响应于所述鼠标拖拽事件，调整当前树型流程图与鼠标移动距离按比例的放大或缩小。

本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

在一些实施例中，所述方法包括：识别鼠标滚动事件；响应于所述鼠标滚动事件，调整当前树型流程图与鼠标滚轮按比例的放大或缩小。

本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

第二方面，本申请的一些实施例提供一种在交互界面上生成树型流程图的装置，所述装置包括：绘图模块，被配置为根据节点关系构建初始树型流程图，其中，所述初始树型流程图包括多个节点以及连接节点之间的线；第一处理模块，被配置为响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点样式及功能；第二处理模块，被配置为响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式。

第三方面，本申请的一些实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时可实现如第一方面任意实施例所述的方法。

第四方面，本申请的一些实施例提供一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时可实现如第一方面任意实施例所述的方法。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的在交互界面上生成树型流程图的系统架构图；

图2为本申请实施例提供的在交互界面上生成树型流程图的方法的流程图；

图3为本申请实施例提供的在交互界面上生成树型流程图的装置的组成框图；

图4为本申请实施例提供的电子设备组成示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本申请的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

为了解决背景技术部分存在的问题，本申请的一些实施例通过封装，对外提供了节点属性nodeStyle、边属性edgeStyle等属性，实现如下多种功能：(1)自定义树型流程图中单个节点样式(例如，节点样式包括节点的背景色、节点文本的字体大小、颜色、字体类型，节点上自定义图标等)及功能(例如，节点功能包括设置不同的点击事件，鼠标移入事件，业务人员可在事件中编写业务逻辑等)，自定义两个节点连接线的样式(例如，样式包括连接线的颜色、粗细、文本字体的颜色、大小、字体类型等)；(2)无需开发人员编写代码，做到在框架不同容器中自适应显示；(3)数据量过大时，可实现拖拽、缩放更好的交互性效果。

请参看图1，图1为本申请的一些实施例提供的在交互界面上生成树型流程图的系统，该系统包括：终端设备120以及服务器110，其中，终端设备120被配置为响应于用户的操作生成初始树型流程图，并可响应于用户的相关操作调整树型流程图的显示状态，服务器110被配置为根据从终端设备120接收的相关信息生成调整树型流程图显示效果的控制信息。

需要说明的是，图1仅用于示例性阐述一个架构，本领域技术人员也可以根据实际需要设计不同于图1的应用架构，例如，在终端设备120上集成本申请一些实施例提供的在交互界面上生成树型流程图的方法，此时并不需要独立设置一台服务器。

下面结合图2示例性阐述由图1的服务器或者终端设备执行的在交互界面上生成树型流程图的方法。

如图2所示，本申请实施例提供一种在交互界面上生成树型流程图的方法，该方法包括：

S101，根据节点关系构建初始树型流程图

需要说明的是，S101所述初始树型流程图包括多个节点以及连接节点之间的边。

S102，响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点的样式或功能。

S103，响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式。

也就是说，本申请的一些实施例的基于canvas设计的树型流程图中的各节点可配置且节点之间的边也可配置，提升树型流程图显示的技术效果并可通过树型流程图提供更多的信息。

需要说明的是，在本申请的一些实施例中给树型流程图中的各节点增加ID字段，遍历时对节点进行单独处理，可以给任意节点以及连接线单独设置样式，也便于后续对某个特殊节点进行处理。相比市面上的树图组件，用户可以根据需求对某一个节点样式及业务的处理。

下面示例性阐述对节点进行特殊处理的示例。

在本申请的一些实施例中，在S102之前所述方法还包括：为所述单个节点设置ID字段，并提供节点属性配置参数，相应的S102所述响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点的样式或功能的过程示例性包括：响应于选中所述单个节点的操作，获取所述ID字段；响应于依据所述属性配置参数输入的样式配置信息或功能配置信息，完成对所述单个节点的样式设置或者功能设置。例如，在本申请的一些实施例中，所述样式类型包括设置节点的颜色。本申请的一些实施例通过为各节点添加节点标识号可以独立操作各个节点，以完善相应节点的样式或者功能。

下面示例性阐述对节点之间的边进行操作的过程。

在本申请的一些实施例中，在S103所述响应于对所述初始树型流程图上一条边的操作之前，所述方法还包括：接收输入的两个节点的ID字段；依据所述两个节点的ID字段确认所述两个节点为父子节点；提供边属性设置参数，则S103所述响应于对所述初始树型流程图上一条边的操作自定义两个节点连接线的样式的过程示例性包括：根据所述父子节点得到对应的边并接收依据所述边属性设置参数输入的配置信息，完成对所述父子节点之间边的样式设置。本申请的一些实施例通过判定两节点之间的逻辑关系来操作与该两节点对应的边的属性，提升边的显示效果。

需要说明的是，在本申请的一些实施例中，针对图表(例如，树型流程图)可在不同的容器中做到自适应显示，本申请的树型流程图绘制组件放弃了顶部top、左侧left、底部bottom、右侧right等配置属性，将自适应逻辑内置到绘制树型流程图的组件中，无需使用者根据不同容器进行配置，从而做到在不同容器中完美展示。

例如，在本申请的一些实施例中，所述方法还包括：依据所述容器属性自动修改当前树型流程图的显示属性，以使在显示页面缩放或刷新时对应树型流程图可自适应调整显示方式。也就是说，本申请的一些实施例通过容器属性来调整显示效果，提升数据展示的技术效果。

例如，在本申请的一些实施例中，所述依据所述容器属性自动修改当前树型流程图的显示属性，包括：响应于浏览器可视窗口的变化，获取容器的宽和高属性，并依据所述容器的宽和高属性调整所述当前树型流程图的宽和高。也就是说，本申请的一些实施例通过监控浏览器可视窗口的变化情况来调整当前树型流程图的显示方式。

需要说明的是，相关技术的树型流程图在数据过多的情况下，只能通过滚动条来查看剩余节点；而本申请一些实施例的绘制树型流程图的组件加入了拖拽及鼠标滚轮缩放功能，无论是在视觉上还是交互上都进行了优化。

例如，在本申请的一些实施例中，所述方法还包括：获取鼠标事件，其中，所述鼠标事件包括：鼠标按下事件、鼠标移动事件和鼠标抬起事件；响应于所述鼠标按下事件，记录鼠标点击的位置以及当前树型流程图的位置和大小；响应于所述鼠标移动事件，计算鼠标移动的距离并根据所述距离调整所述当前树型流程图的位置；响应于所述鼠标抬起事件，清空与所述鼠标按下事件对应记录的信息。本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

例如，在本申请的一些实施例中，所述方法还包括：获取鼠标事件，其中，所述鼠标事件包括鼠标滚轮事件；响应于所述鼠标滚轮事件，计算鼠标滚轮的方向并根据所述方向调整当前树型流程图的大小。本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

例如，在本申请的一些实施例中，所述方法还包括：识别鼠标拖拽事件；响应于所述鼠标拖拽事件，调整当前树型流程图与鼠标移动距离按比例的放大或缩小。本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

例如，在本申请的一些实施例中，所述方法包括：识别鼠标滚动事件；响应于所述鼠标滚动事件，调整当前树型流程图与鼠标滚轮按比例的放大或缩小。本申请的一些实施例通过鼠标来调整当前树型流程图的显示效果，提升人机交互能力。

下面结合一个示例阐述本申请一些实施例的创建树型流程图的方法，该在交互界面上生成树型流程图的方法通过封装对外提供了节点属性nodeStyle、边属性edgeStyle等属性，通过该方法可以实现如下3种功能：

(1)自定义单个节点样式及功能，自定义两个节点连接线的样式。

该功能(1)的实现过程示例性包括：在树型流程图对应的数据对象的每个节点提供id字段，使每个节点都有唯一标识，并对外提供节点属性nodeStyle属性，开发人员通过此节点属性传入如[{id:’id1’,color:’red’}]的值即可对此id的节点进行单独处理。同时对外提供边属性edgeStyle属性，用户需要传入例如[{id:’id1:id2’}]的值，组件内部进行处理查找到id1节点与id2节点是否为父子节点，如果为父子节点，将对连接线样式进行渲染。

(2)可以使得生成的树型流程图可以在框架不同容器中自适应显示

该功能(2)为适应框架不同容器，组件内部添加了对于容器类型的判断；判断出容器的类型(例如，父容器类型)后，组件会自动修改宽、高等属性，组件内置resize方法，在页面缩放、刷新时能够做到自适应。

(3)可实现拖拽、缩放等更好的交互性效果。

该功能(3)组件内置鼠标拖拽事件，通过获取鼠标移动距离来实现，即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。同时组件绑定鼠标滚轮事件，让组件画布与鼠标滚轮按比例放大缩小。

下面结合具体示例阐述本申请一些实施例的在交互界面上生成树型流程图的方法。

本申请的一些实施例的目的是在精简配置的前提下，让用户可实现对单独节点的配置，并无需考虑在各容器中的显示问题，同时具有更好的交互效果。

实例1：生成基础树图，即得到初始树型流程图

本组件都是基于配置信息【json格式】来形成一个基础的模板，此模板

{

“id”:”treeChart”,

“type”:”NGTreeChart”，

“data”:[]

}

在此模板的基础上，进行扩展，添加一些字段来标识实现的功能，比如添加direction：LR,可配置树图的展示方向,只需要改变此字段的值，树型流程图就可做到向上、向右、向左展示数据等等。

例如，在本申请的一些实施例可自定义指定节点颜色及连接线配置，只需要修改direction的属性值即可实现数据的展示方向。本申请的一些实施例通过nodeStyle字段可对节点字体颜色、背景色进行修改；通过edgeStyle字段对两个节点的连接线进行配置，组件通过获取nodeStyle字段的值与节点进行一一比对，通过edgeStyle字段的值计算出两个节点的关系；最后通过JavaScript脚本创建一个Canvas元素，然后使用Canvas API绘制一系列图形和文字。数据量大时，可对整体图表进行缩放及拖拽展示。

请参考图3，图3示出了本申请实施例提供的在交互界面上生成树型流程图的装置，应理解，该装置与上述图2方法实施例对应，能够执行上述方法实施例涉及的各个步骤，该装置的具体功能可以参见上文中的描述，为避免重复，此处适当省略详细描述。装置包括至少一个能以软件或固件的形式存储于存储器中或固化在装置的操作系统中的软件功能模块，该在交互界面上生成树型流程图的装置，包括：绘图模块101、第一处理模块102以及第二处理模块103。

绘图模块，被配置为根据节点关系构建初始树型流程图，其中，所述初始树型流程图包括多个节点以及连接节点之间的线。

第一处理模块，被配置为响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点样式及功能。

第二处理模块，被配置为响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法中的对应过程，在此不再过多赘述。

本申请的一些实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时可实现如上述在交互界面上生成树型流程图的方法包括的任意实施例所述的方法。

如图4所示，本申请的一些实施例提供一种电子设备500，包括存储器510、处理器520以及存储在所述存储器510上并可在所述处理器520上运行的计算机程序，其中，所述处理器520通过总线530读取程序并执行所述程序时可实现如在交互界面上生成树型流程图的方法包括的任意实施例所述的方法。

处理器520可以处理数字信号，可以包括各种计算结构。例如复杂指令集计算机结构、结构精简指令集计算机结构或者一种实行多种指令集组合的结构。在一些示例中，处理器520可以是微处理器。

存储器510可以用于存储由处理器520执行的指令或指令执行过程中相关的数据。这些指令和/或数据可以包括代码，用于实现本申请实施例描述的一个或多个模块的一些功能或者全部功能。本公开实施例的处理器520可以用于执行存储器510中的指令以实现图2中所示的方法。存储器510包括动态随机存取存储器、静态随机存取存储器、闪存、光存储器或其它本领域技术人员所熟知的存储器。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims (13)

1.一种在交互界面上生成树型流程图的方法，其特征在于，所述方法包括：

根据节点关系构建初始树型流程图，其中，所述初始树型流程图包括多个节点以及连接节点之间的边；

响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点的样式或功能；

响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式。

2.如权利要求1所述的方法，其特征在于，

在所述响应于对所述初始树型流程图上单个节点的操作之前，所述方法还包括：

为所述单个节点设置ID字段，并提供节点属性配置参数；

所述响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点的样式或功能，包括：

响应于选中所述单个节点的操作，获取所述ID字段；

响应于依据所述属性配置参数输入的样式配置信息或功能配置信息，完成对所述单个节点的样式设置或者功能设置。

3.如权利要求2所述的方法，其特征在于，所述样式包括节点的颜色。

4.如权利要求1所述的方法，其特征在于，

在所述响应于对所述初始树型流程图上一条边的操作之前，所述方法还包括：

接收输入的两个节点的ID字段；

依据所述两个节点的ID字段确认所述两个节点为父子节点；

提供边属性设置参数；

所述响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式，包括：

根据所述父子节点得到对应的边并接收依据所述边属性设置参数输入的配置信息，完成对所述父子节点之间边的样式设置。

5.如权利要求1所述的方法，其特征在于，所述方法还包括：

获取所述初始树型流程图所属的容器属性；

依据所述容器属性自动修改当前树型流程图的显示属性，以使在显示页面缩放或刷新时对应树型流程图可自适应调整显示方式。

6.如权利要求5所述的方法，其特征在于，所述依据所述容器属性自动修改当前树型流程图的显示属性，包括：

响应于浏览器可视窗口的变化，获取容器的宽和高属性，并依据所述容器的宽和高属性调整所述当前树型流程图的宽和高。

7.如权利要求6所述的方法，其特征在于，所述方法还包括：

获取鼠标事件，其中，所述鼠标事件包括：鼠标按下事件、鼠标移动事件和鼠标抬起事件；

响应于所述鼠标按下事件，记录鼠标点击的位置以及当前树型流程图的位置和大小；

响应于所述鼠标移动事件，计算鼠标移动的距离并根据所述距离调整所述当前树型流程图的位置；

响应于所述鼠标抬起事件，清空与所述鼠标按下事件对应记录的信息。

8.如权利要求6所述的方法，其特征在于，所述方法还包括：

获取鼠标事件，其中，所述鼠标事件包括鼠标滚轮事件；

响应于所述鼠标滚轮事件，计算鼠标滚轮的方向并根据所述方向调整当前树型流程图的大小。

9.如权利要求1所述的方法，其特征在于，所述方法还包括：

识别鼠标拖拽事件；

响应于所述鼠标拖拽事件，调整当前树型流程图与鼠标移动距离按比例的放大或缩小。

10.如权利要求1所述的方法，其特征在于，所述方法包括：

识别鼠标滚动事件；

响应于所述鼠标滚动事件，调整组件画布与鼠标滚轮按比例的放大或缩小。

11.一种在交互界面上生成树型流程图的装置，其特征在于，所述装置包括：

绘图模块，被配置为根据节点关系构建初始树型流程图，其中，所述初始树型流程图包括多个节点以及连接节点之间的线；

第一处理模块，被配置为响应于对所述初始树型流程图上单个节点的操作，自定义所述单个节点样式及功能；

第二处理模块，被配置为响应于对所述初始树型流程图上一条边的操作，自定义两个节点连接线的样式。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时可实现如权利要求1-10中任意一项权利要求所述的方法。

13.一种电子设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其中，所述处理器执行所述程序时可实现如权利要求1-10中任意一项权利要求所述的方法。