Joint.js动态生成流程图_js自动生成流程图资源-CSDN文库

共6个文件

js：4个

css：1个

html：1个

Joint

动态生成

流程图

javascript

需积分: 50 40 浏览量 2019-05-31 01:44:13 上传评论收藏 397KB ZIP 举报

**标题详解：** "Joint.js动态生成流程图" 指的是使用Joint.js库来创建一个可以根据Json数据自动生成的流程图。Joint.js是一个强大的JavaScript库，专门用于绘制图形，尤其是图表和流程图。它提供了丰富的图形元素和连接器，使得用户能够方便地通过编程方式构建复杂的图形界面。 **描述详解：** 描述中提到的“动态生成流程图，基于Joint.js的改造”，意味着开发人员可能已经对原版的Joint.js进行了定制或优化，去除了可以手动编辑图形属性的功能，转而设计成完全依赖Json数据来生成流程图。这种方式使得流程图的生成更加自动化，减少了用户的交互步骤，适用于需要快速根据数据变化更新流程图的场景。 “直接根据Json数据规则生成”意味着流程图的结构和样式信息被编码为Json格式的数据，这种数据结构易于读写，也便于与其他应用程序集成。Json数据包含图形的位置、大小、形状、颜色等信息，以及图形之间的连接关系等。 **标签详解：** - "Joint"：这是主要使用的JavaScript库，提供图形绘制和布局功能。 - "动态生成"：表示流程图是实时根据数据变化而更新的，而非静态不变。 - "流程图"：这是目标产出物，一种用图形方式表示的逻辑或工作流程。 - "javascript"：这是实现上述功能的编程语言，Joint.js是用JavaScript编写的，因此需要JavaScript知识来操作。 **压缩包子文件的文件名称列表详解：** 虽然没有提供具体的文件内容，但我们可以推测这些文件可能包括以下内容： - "JOint"：这可能是包含Joint.js库或改造后的版本。 - "新建文件夹"：可能包含示例代码、Json数据文件或其他辅助资源。 **这个项目的核心知识点包括：** 1. **Joint.js库的使用**：理解和应用Joint.js库的API来创建图形，包括定义图形元素、连接线、布局算法等。 2. **Json数据解析**：需要熟悉Json格式，能够编写代码解析Json数据并将其转化为流程图元素。 3. **动态生成**：理解如何在JavaScript中根据数据变化动态更新图形，这可能涉及到监听数据变化事件并相应地更新流程图。 4. **图形设计与布局**：了解如何定义流程图中的节点（如矩形、菱形等）和连接线，以及它们之间的关系。 5. **JavaScript编程**：整个过程将在JavaScript环境中进行，需要掌握基本的JavaScript语法和面向对象编程概念。 6. **数据驱动编程**：通过Json数据驱动图形生成，理解如何将业务数据映射到图形表示。学习这些知识点，可以帮助你构建出一个高效且灵活的动态流程图生成系统，满足各种自动化展示需求。

资源推荐

资源详情

资源评论

收起资源包目录

Joint.zip （6个子文件）

JOint

jquery.min.js 94KB

Joint.js 968KB

Backone.js 81KB

Joint.css 49KB

demo.html 10KB

Loadsh.js 604KB

新建文件夹

<html> <head id="Head1" runat="server"> <title></title> <script src="jquery.min.js" type="text/javascript"></script> <link href="Joint.css" rel="stylesheet" type="text/css" /> <script src="Loadsh.js" type="text/javascript"></script> <script src="Backone.js" type="text/javascript"></script> <script src="Joint.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { Joint(); }); function Joint(rows) { //json格式 //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":"第二步","type":"Rect","id":"91bf7248-8c86-443c-a40d-7ff9e9b0fabb","parent":"744104ee-b3fc-4d81-8e82-32ae699d1d39","pointX":"800","pointY":"300"},{"name":"第三步","type":"Rect","id":"32c4123a-a378-4534-8afe-141d8b71e99a","parent":"91bf7248-8c86-443c-a40d-7ff9e9b0fabb","pointX":"800","pointY":"400"},{"pointX":"800","pointY":"500","name":"结束","type":"ellipse","id":"cd7fcafa-1f6b-47c9-94cf-626a55147a94","parent":"32c4123a-a378-4534-8afe-141d8b71e99a"}]'; 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"},{"name":"第三步","type":"Rect","id":"32c4123a-a378-4534-8afe-141d8b71e99a","parent":"91bf7248-8c86-443c-a40d-7ff9e9b0fabb,91bf7248-8c86-443c-a40d-7ff9e9b0faba","pointX":"800","pointY":"400"},{"pointX":"800","pointY":"500","name":"结束","type":"ellipse","id":"cd7fcafa-1f6b-47c9-94cf-626a55147a94","parent":"32c4123a-a378-4534-8afe-141d8b71e99a"}]'; //画布 var graph = new joint.dia.Graph(); //去掉属性 var ElementView = joint.dia.ElementView.extend({ pointerdown: function () { this._click = false; }, pointermove: function(evt, x, y) { this._click = false; }, pointerup: function (evt, x, y) { this._click = false; }, pointerclick : function (evt, x, y) { this._click = false; },mouseover: function (evt) { this._click = false; }, mouseout: function(evt) { this._click = false; } }); var LinkView = joint.dia.LinkView.extend({ pointerdown: function () { this._click = false; }, pointermove: function(evt, x, y) { this._click = false; }, pointerup: function (evt, x, y) { this._click = false; }, pointerclick : function (evt, x, y) { this._click = false; },mouseover: function (evt) { this._click = false; }, mouseout: function(evt) { this._click = false; } }); //容器 var paper = new joint.dia.Paper({ el: $('#myholder'), width: $(window).width(), height: $(window).height()-100, gridSize: 1, model: graph, elementView: ElementView, linkView:LinkView, perpendicularLinks: true, restrictTranslate: true }); //构造图形 var member = function (x, y, text, shape) { var cell; if (shape == "Rect") { cell = new joint.shapes.basic.Rect({ position: { x: x, y: y }, size: { width: 100, height: 40 }, attrs: { //边框，填充，边框宽度，样式 rect: { 'stroke': 'black', 'stroke-dasharray': 0 }, text: { //字体内容，颜色，粗细，大小 text: text, fill: 'black', 'font-weight': 'normal', 'font-size': 20 } } }); } else if (shape == "ellipse") { cell = new joint.shapes.basic.Rect({ position: { x: x, y: y }, size: { width: 100, height: 40 }, type: 'linearGradient', attrs: { //边框，填充，边框宽度，样式 rect: { 'stroke': 'black', 'stroke-dasharray': 0, rx:'20px',//边框椭圆 ry:'20px' }, text: { //字体内容，颜色，粗细，大小 text: text, fill: 'black', 'font-weight': 'normal', 'font-size': 20 } } }) } graph.addCell(cell); return cell; } //构造连线 function link(source, target) { var cell = new joint.shapes.org.Arrow({ source: { id: source.id }, target: { id: target.id }, labels: [{ position: 0.5}], router:{ name: 'orthogonal' },//折线类型 //vertices: share, attrs: { '.connection': { 'fill': 'none', 'stroke-linejoin': 'round', 'stroke-width': '2', 'stroke': '#4b4a67' }, '.marker-target': { fill: '#333333', //箭头颜色 d: 'M 10 0 L 0 5 L 10 10 z'//箭头样式 } }, })

评论收藏

内容反馈