动态流程图-joint.js

最新推荐文章于 2024-08-08 07:43:10 发布

qq_33208533

最新推荐文章于 2024-08-08 07:43:10 发布

阅读量2.3k

点赞数

分类专栏：流程图 jointjs 文章标签：动态流程图-joint.js

本文链接：https://blog.csdn.net/qq_33208533/article/details/85335847

版权

动态流程图-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
3、Loadsh.js
4、Backone.js"
5、Joint.js
注：JS文件顺序一定不要乱发，否则会报错。 提供下载链接
3、代码。

	rows='[{ "pointX":"800","pointY":"100","name":"开始","type":"ellipse","id":"a1fd53fc-7286-4dd6-a99b-aa3aaf8a2c5d","parent":"1"},{"name":"第一步","type":"Rect","id":"744104ee-b3fc-4d81-8e82-32ae699d1d39","parent":"a1fd53fc-7286-4dd6-a99b-aa3aaf8a2c5d","pointX":"800","pointY":"200"},{"name":"第二步（1）","type":"Rect","id":"91bf7248-8c86-443c-a40d-7ff9e9b0fabb","parent":"744104ee-b3fc-4d81-8e82-32ae699d1d39","pointX":"700","pointY":"300"},{"name":"第二步（2）","type":"Rect","id":"91bf7248-8c86-443c-a40d-7ff9e9b0faba","parent":"744104ee-b3fc-4d81-8e82-32ae699d1d39","pointX":"900","pointY":"300"},{"