JointJS动态流程图

最新推荐文章于 2024-03-23 08:30:00 发布
置顶 最新推荐文章于 2024-03-23 08:30:00 发布
阅读量1.8w 收藏 25
点赞数 4
分类专栏： 技术 文章标签： jointJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41916005/article/details/80482609
版权

    最近公司有个导航项目需要做个流程图比较复杂的那种，作为一个前端小菜也是很蒙的，要求就两条一：动态加载流程图；二：动态连线；这两点要求也是难住了一阵呢，最后选择了jointJS，选着原因官网API很详细，代码量比较少封装起来使用也很便捷，进阶文档基础略过，没接触过得可以去在官网先学习一下，废话不多少直接上硬菜。

    我这块写了两个一个是节点型流程图和关系行流程图。（源码在下一篇文章可以下载查看示例）

节点型流程图

  一 准备文件

1.jquery

2.Lodash.js

3.Backbone.js

4.joint.js

5.joint.css

<script src="jquery.min.js"></script>
<script src="lodash.min.js"></script>
<script src="backbone-min.js"></script>
<script src="joint.js"></script>
<link rel="stylesheet" type="text/css" href="joint.css" />

这些官网都可以下载。

前四个顺序一定不能乱！！！（也是坑了一次）

二 进阶

 1.创建数据模块要出现的画板

<div class="ProcessDiv"></div>

     因为是动态加载的数据，但是导航图需要的是坐标，数据加载出来的位置是不固定的所以需要建立一个隐藏的区域把joint画板覆盖上边。

2.创建joint画板

<div id="paper"></div>

html代码：

<div class="ProcessDiv"></div>
<div id="paper"></div>

Js代码：

 var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#paper'),
        width: 20000,
        height: 20000,
        gridSize: 1,
        model: graph
    });

定义Joint的画布和画板，然后我封装了两个函数用来定义线和模块，方便使用减少代码量，在写代码方面也很很懒的，哈哈继续继续。

 //定义模块形状
var stat = function(x, y, shape, background, text) {
				var cell;
				if(shape === "rect") {
					cell = new joint.shapes.basic.Rect({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							rect: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: background
										}
									], //渐变结束
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				} else if(shape === "ellipse") {
					cell = new joint.shapes.basic.Ellipse({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							ellipse: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: '#FFFFFF'
										} //渐变结束
									],
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				}
				graph.addCell(cell);
				return cell;
			};

 rect为方形,circle为圆形，还有stroke：边框颜色，具体其他样式官网很详细。

//定义连线
			function link(source, target, label) {
				var cell = new joint.dia.Link({
					source: {
						id: source.id
					},
					target: {
						id: target.id
					},
					labels: [{
						position: 0.5,
						attrs: {
							text: {
								text: label || '',
								'font-weight': 'bold'
							}
						}
					}],

					attrs: {
						'.connection': {
							stroke: '#333333', //连线颜色
							'stroke-width': 4 //连线粗细
						},
						'.marker-target': {
							fill: '#000', //箭头颜色
							d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
						}
					}
				});
				graph.addCell(cell);
				return cell;
			}

导航流程图需要的根据节点进行连接，数据结构如下

var data = [
				[{
					title: '订单',
					tolink: "",
					state: "1",
					id: "1",
					name: '订单'
				}],
				[{
					title: '预售',
					tolink: "1",
					state: "1",
					id: "2",
					name: '预售'
				}, {
					title: '预售2',
					tolink: "1",
					state: "0",
					id: "3",
					name: '预售2'
				}],
				[{
					title: '采购清单',
					tolink: "2",
					state: "-1",
					id: "4",
					name: '采购清单'
				}, {
					title: '待加工',
					tolink: "2",
					state: "-1",
					id: "5",
					name: '待加工'
				}]
			]

      state代表状态，这里可以随意定义，比较懒就直接-1，0，1定义了，id是必须需要的因为要根据id找坐标，tolink是当前上一个连接节点的id。这里结构一定要根据节点划分，每一级的节点要在一个数组里也是方便下一步遍历操作，当然大家也可以用其他方法都是可以的这方面刚接触前端还在摸索中。

三 动态连接

  var arraylist = [];
    $.each(data, function (index, item1) {
        $(".ProcessDiv").append("<div class='process'></div>")
        $.each(item1, function (index2, item2) {
            $(".process").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")
            debugger
            var id1 = item1[index2].id
            var arrValue1 = arraylist[id1];
            var y = $("#" + id1).offset().top;
            var x = $("#" + id1).offset().left;
            var name = item1[index2].name
            var n = item1[index2].state
            if (arrValue1 == undefined) {
                switch (n) {
                    case "1":
                        arraylist[id1] = stat(x, y, "rect", "green", name);
                        break;
                    case "0":
                        arraylist[id1] = stat(x, y, "rect", "yellow", name);
                        break;
                    default:
                        arraylist[id1] = stat(x, y, "rect", "red", name);
                }
            }
            if (item1[index2].tolink != "") {
                var id2 = item1[index2].tolink
                var arrValue2 = arraylist[id2];
                var y2 = $("#" + id2).offset().top;
                var x2 = $("#" + id2).offset().left;
                var state = item1[index2].state
                if (arrValue2 == undefined) {
                    arraylist[id2] = stat(x2, y2, "rect", "#000");
                }
                link(arraylist[id2], arraylist[id1]);
            }

        });

    });

   这里需要用到字典数组，放置重复生成模块这坑也是摔的妥妥的，定义一个数组arraylist，然后进行第一次遍历data，根据数组个数也就是节点创建节点区域process，然后进行二次遍历，拿到遍历到的节点添加到对应的节点区域，遍历时候根据id存入字典数组，再次遍历是如果存在就直接使用，没有在创建，这一步是防止一个父节点连接多个子节点时候重复创建，创建var根据offset().top;和offset().left，存入y,x坐标，，如果tolink==""就保存父节点，根据state决定当前接节点状态及颜色，这下坐标有了，id有了就可以连接了。

link(arraylist[id2], arraylist[id1]);

完整代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/joint.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lodash.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/backbone.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/joint.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.left {
				float: left;
				height: 100%;
				width: 20%;
			}
			
			html,
			body,
			#paper {
				height: 100%;
				width: 100%;
			}
			
			#paper {
				position: absolute;
				top: 0;
			}
			
			p {
				margin: 50px 0;
			}
		</style>
	</head>

	<body>
		<div id="paper" class="paper"></div>
		<div class="box"></div>
		<script type="text/javascript">
			var graph = new joint.dia.Graph();
			//定义画布
			var paper = new joint.dia.Paper({
				el: $('#paper'),
				width: 1200,
				height: 600,
				gridSize: 1,
				model: graph
			});
			paper.$el.css('pointer-events', 'none')
			//定义形状
			var stat = function(x, y, shape, background, text) {
				var cell;
				if(shape === "rect") {
					cell = new joint.shapes.basic.Rect({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							rect: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: background
										}
									], //渐变结束
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				} else if(shape === "ellipse") {
					cell = new joint.shapes.basic.Ellipse({
						position: {
							x: x,
							y: y
						}, //坐标
						size: {
							width: 140,
							height: 40
						}, //宽高
						attrs: {
							ellipse: {
								fill: {
									type: 'linearGradient',
									stops: [{
											offset: '0%',
											color: background
										}, //渐变开始
										{
											offset: '100%',
											color: '#FFFFFF'
										} //渐变结束
									],
									attrs: {
										x1: '0%',
										y1: '0%',
										x2: '0%',
										y2: '100%'
									}
								},
								stroke: background, //边框颜色
								'stroke-width': 1 //边框大小
							},
							text: {
								text: text,
								'ref-x': .5,
								'ref-y': .5,
								fill: '#000'
							}, //显示文字
						}
					});
				}
				graph.addCell(cell);
				return cell;
			};

			//定义连线
			function link(source, target, label) {
				var cell = new joint.dia.Link({
					source: {
						id: source.id
					},
					target: {
						id: target.id
					},
					labels: [{
						position: 0.5,
						attrs: {
							text: {
								text: label || '',
								'font-weight': 'bold'
							}
						}
					}],

					attrs: {
						'.connection': {
							stroke: '#333333', //连线颜色
							'stroke-width': 4 //连线粗细
						},
						'.marker-target': {
							fill: '#000', //箭头颜色
							d: 'M 10 0 L 0 5 L 10 10 z' //箭头样式
						}
					}
				});
				graph.addCell(cell);
				return cell;
			}

			var data = [
				[{
					title: '订单',
					tolink: "",
					state: "1",
					id: "1",
					name: '订单'
				}],
				[{
					title: '预售',
					tolink: "1",
					state: "1",
					id: "2",
					name: '预售'
				}, {
					title: '预售2',
					tolink: "1",
					state: "0",
					id: "3",
					name: '预售2'
				}],
				[{
					title: '采购清单',
					tolink: "2",
					state: "-1",
					id: "4",
					name: '采购清单'
				}, {
					title: '待加工',
					tolink: "2",
					state: "-1",
					id: "5",
					name: '待加工'
				}]
			]

			console.log(data)
			var arraylist = [];
			$.each(data, function(index, item1) {
				$(".box").append("<div class='left'></div>")

				$.each(item1, function(index2, item2) {

					$(".left").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")
					debugger
					var id1 = item1[index2].id
					var arrValue1 = arraylist[id1];
					var y = $("#" + id1).offset().top;
					var x = $("#" + id1).offset().left;
					var name = item1[index2].name
					var n = item1[index2].state
					if(arrValue1 == undefined) {

						switch(n) {
							case "1":
								arraylist[id1] = stat(x, y, "rect", "#99ff00", name);
								break;
							case "0":
								arraylist[id1] = stat(x, y, "rect", "#FFFF00", name);
								break;
							default:
								arraylist[id1] = stat(x, y, "rect", "red", name);

						}

					}
					if(item1[index2].tolink != "") {
						var id2 = item1[index2].tolink
						var arrValue2 = arraylist[id2];
						var y2 = $("#" + id2).offset().top;
						var x2 = $("#" + id2).offset().left;
						var state = item1[index2].state
						if(arrValue2 == undefined) {
							arraylist[id2] = stat(x2, y2, "rect", "#000");
						}
						link(arraylist[id2], arraylist[id1]);
					}

				});

			});
		</script>
	</body>

</html>

效果图

 

 

 

 

 

 

基本节点流程图就这样了只需要后台传入数据就可以了

关系型流程图

 关系型流程图就有点复杂，主要复杂在数据结构这方面，结构如下图

字典数组和遍历和节点流程图一样，但是关系这块要在一个数组里面包含所有关联的信息，在创建隐藏模版这块推荐使用模版引擎（template.js）搭配joint堪称完美！！

效果图如下：

 

 

写得有点仓促样式可能不太 咳咳，基本的方法效果还是实现了，先这样吧有不足的地方欢迎大家一起学习讨论！

 

 

 

前端恶霸
关注
  • 4
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
动态绘制流程图_【干货】控制系统动态流程图设计组态
weixin_42552315的博客
01-08 2531
随着DCS、PLC等控制系统应用越来越广泛，控制系统组态工作也越来越多，其中监控操作界面“动态流程图”的组态是一项重要工作。控制系统动态流程图是非常重要的人机对话界面，操作人员通过它可以非常直观和方便地监控生产工艺过程。因此，动态流程图需要满足：正确反应工艺流程图、显示信息量足够大、操作直观和方便、颜色协调和美观等条件。下面是我的一些关于控制系统动态流程图设计组态的经验分享。一、动态流程画面设计1...
JointJS JavaScript流程图绘制框架解析
10-16
主要介绍了JointJS JavaScript流程图绘制框架解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
纯JS实现画工作流的流程图
01-17
使用纯JS实现画工作流的流程图，不使用任何插件，是你可以实现自己的WEB工作流设计工具
动态流程图-joint.js
qq_33208533的博客
12-29 2216
动态流程图-joint.js 前几天有个需求，继续JSON数据动态构造流程图，网上找了很久，最后决定用Joint.js来完成这一功能。 参考博文：https://www.cnblogs.com/qiuyagogo/p/9999701.html。 Joint 官网:https://www.jointjs.com/ 1、预期目标 2、需要文件。 1、jquery.min.js 2、Joint.css...
前端流程图框架11个：开发组态图、思维导图、拓扑图必备
最新发布
2401_82881178的博客
03-23 1604
具体实现流程图的方式和工具可以根据具体需求选择，可以使用原生的 HTML、CSS 和 JavaScript 进行开发，也可以使用流程图框架来简化开发过程。流程图框架通常会提供一些封装好的组件和 API，使开发者可以更方便地创建和操作流程图。总之，前端流程图框架为组态图、拓扑图和结构图的开发提供了方便、高效和灵活的工具和功能，可以帮助开发者快速构建和定制各种类型的图形，提升用户体验和开发效率。这里面最核心的还是JavaScript，网上有很多开源的js框架，我们拿来即用就可以，无需从头开始。
原生js+div+css，动态画结构图/流程图
快乐分享
12-24 1万+
前面用highchart尝试画了一次，但是因为种种因素，还是用js+div+css实现起来比较方便。 代码如下，可直接复制粘贴。 html部分： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport
画好流程图怎么部署后_论文必备丨一个流程图，瞬间论文高大上！get起来！
weixin_39539002的博客
12-05 520
今天想给大家介绍一些制作流程图。用在论文当中会让论文瞬间上一个档次哦，速速get起来！专业型工具：Visio+首先打开软件，我们找到流程图的标志。点击流程图，我们可能发现画图的界面比较小，这时候我们可以在图中指示的位置调整界面的大小。在左边选择我们常用的开始，选择结束等图标，双击图标可以添加文字，也可以右击添加文字。两个流程直接的连接线，如果是上下差不多对齐的话，我们可以直接选择直线，如果位置比较...
echarts迁徙图 vue_如何快速在Vue中实现流向图或迁徙图？
weixin_36098968的博客
12-24 644
原标题：如何快速在Vue中实现流向图或迁徙图？我们经常在一些新闻报道和商业杂志上看到运用地图来展示商业现象的做法。这样利用地图来反映和分析数据的形式，叫数据地图，它可以直观的表达出数据之间的空间关系。在数据地图中，流向地图属于高频应用场景，但实现起来并不容易，本文来将以Vue这个热门的Web技术为例，探讨如何在项目中快速开发出炫酷的流向地图。什么是流向地图？流向地图也称迁徙图，可以在地图上显示信息...
使用flowable生成动态流程图
enhengguodong的博客
10-19 3882
使用flowable生成动态流程图
JointJS动态流程图升级
前端恶霸
12-20 2192
      之前写了一片JointJS的简单使用，最近解答评论的同时又重新查看了下发现有些不足，大半年不接触进行温习都要思考一下才想起来，感觉可能对初入学习理解起来帮助不大，现在更新升级版本，帮助大家同时以便以后使用起来更好的回忆。废话不多说进入正题  这次会分成三个部分进行讲解 一简单使用 先上效果图 这种模式的流程图较为简单 准备还是 1.jquery 2.Lodash.js...
activiti动态生成流程图
qq279071978的专栏
07-04 7420
转自：http://www.tuicool.com/articles/FJzMzmJ最近又开始忙活工作流的相关工作了，第一次接触工作流也就是我在埃森哲的第一个项目，也是最后一个项目。那时候用的是日本的一整套解决方案好像叫-iMart。而进入金山工作后第二个项目也是和工作流密切相关的项目，那时候才接触到了这个开源工作流引擎-Activiti。那时候也是第一次真正了解这些东西。只是从金山离职后回到现在的
activiti动态创建流程图
m0_37539286的博客
11-03 2372
activiti动态创建流程
Joint.js动态生成流程图
12-29
动态生成流程图，基于Joint.js的改造。去掉了可以操作属性。直接根据Json数据规则生成。
jointjs绘制流程图.zip
03-27
文件包含了jointjs插件的基本js文件，支持绘制图形基本需要。并且简单有案例绘制了图形，方便你的参考。
树形结构 - layui.tree
热门推荐
前端恶霸
07-20 1万+
  最近公司项目有点多一段时间没有更新，刚完成的一个项目用到了tree树形结构有一些使用心得分享一下.   开始是想使用zTree -- jQuery 控件，后来还是选用了基于layui的树形控件，因为项目后台管理界面都是用到layui，风格上统一一下感觉会好点（有点强迫症- -!）,废话不多说上菜。。 需要引用四个文件jquery，layui.css，layui.js，layui-xtree...
jquery Gantt甘特图简单应用
前端恶霸
06-29 1万+
  最近公司排产需要做个甘特图，做了一个智能排产；js和css的引用&lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt; &lt;script src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.min.js
split,splice,slice 三者的用法
前端恶霸
12-11 1万+
一.split split主要用于字符串的分割，可以根据某个字符把字符串拆分成多个数组    var str = “Front-end-bully”      Arr = str.slite(“-”);    //[‘Front’,’end’,’bully’] 二.splice splice可根据坐标位置进行删除数组并返回长度 splice(index,num,item1) 3个...
Js数组对比
前端恶霸
10-22 1万+
      最近做了一个功能，结算对比表，要求的是历史版本与现在的版本进行对比，如果在新版本数据变更要标红，新版本新加的数据老数据要空出来，同理老数据原本存在新数据删除的也要空出来      思路：既然是双向对象肯定不能拿两个数据进行来回比较，容易出差错也比较麻烦不灵活，这时候应该定义一个新的数组，把两个数组拼成一个并进行排重，用这俩数组和新的这个进行比对； var dataArr =...
用jointjs绘制流程图，且节点可以拖拽
05-27
好的，以下是一个使用 JointJS 绘制流程图并实现节点拖拽的示例代码： ```html <!DOCTYPE html> <title>JointJS 流程图示例 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jointjs@3.4.1/dist/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值