JS前端图形化插件之利器Gojs组件（php中文网）
一、总结
一句话总结：php中文网我可以好好走一波
二、JS前端图形化插件之利器Gojs组件
参考：
JS前端图形化插件之利器Gojs组件-js教程-PHP中文网
http://www.php.cn/js-tutorial-382417.html
之前分享过两篇关于流程画图的前端组件，使用的jsPlumb。这个组件本身还不错，使用方便、入门简单、轻量级，但是使用一段时间下来，发现一些弊病，比如组件不太稳定，初始进入页面的时候连线的样式有时会乱掉，刷新页面之后才能恢复正常，而且连线样式比较单一，容易让人产生视觉疲劳，加之最近公司在大力推行所谓的“工业4.0”，除了对自动化控制要求的提高之外，对这种图形化界面的要求也随之提高，所以单纯的jsPlumb组件效果已经不能满足日益发展的公司业务。基于以上种种，最终找到了Gojs组件，它效果强大、api丰富，唯一的不足就是这个组件是一个收费组件。
一、组件效果预览
先来两个炫酷点的效果
就最下面两个效果而言，就是jsPlumb无法实现的，可是这种效果在MES系统里面是很吸引人的，尤其是一些流程性的业务，用这种效果实现让可以一眼就感觉高大上了。并且咋一眼看上去，你根本都不相信这是一个web页面的效果。
其他效果示例
可折叠的树
这是图片吗？
竟然还可以生成图表！
想抢visio的饭碗吗？
更多示例可查看官网
二、初次接触
1、Gojs简介
GoJS是一个功能丰富的JS库，在Web浏览器和平台上可实现自定义交互图和复杂的可视化效果，它用自定义模板和布局组件简化了节点、链接和分组等复杂的JS图表，给用户交互提供了许多先进的功能，如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。无需切换服务器和插件，GoJS就能实现用户互动并在浏览器中完全运行，呈现HTML5 Canvas元素或SVG，也不用服务器端请求。 GoJS不依赖于任何JS库或框架（例如bootstrap、jquery等），可与任何HTML或JS框架配合工作，甚至可以不用框架。
2、使用入门
（1）文件引用
复制代码 代码如下:
<script src="gojs/go-debug_ok.js"></script>
可以用cdn上面的最新版本，也可以引用本地down下来的文件。如果是开发，可以引用debug版本的js，正式运行的时候引用正式的js，这个无需多讲。
（2）创建画布
随便定义一个html元素，作为我们的画布
复制代码 代码如下:
<p id="myDiagramp" style="margin:auto;width:300px; height:300px; background-color:#ddd;"></p>
然后使用gojs的api初始化画布
1//创建画布 2 var objGo = go.GraphObject.make; 3 var myDiagram = objGo(go.Diagram, "myDiagramp", 4 { 5 //模型图的中心位置所在坐标 6 initialContentAlignment: go.Spot.Center, 7 8 //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键 9 "undoManager.isEnabled": true, 10 11 //不运行用户改变图表的规模 12 allowZoom: false, 13 14 //画布上面是否出现网格 15 "grid.visible": true, 16 17 //允许在画布上面双击的时候创建节点 18 "clickCreatingTool.archetypeNodeData": { text: "Node" }, 19 20 //允许使用ctrl+c、ctrl+v复制粘贴 21 "commandHandler.copiesTree": true, 22 23 //允许使用delete键删除节点 24 "commandHandler.deletesTree": true, 25 26 // dragging for both move and copy 27 "draggingTool.dragsTree": true, 28 });
官方示例用的$符号作为变量，博主觉得$符号太敏感，还是换个名字吧~以上几个参数都是博主摘选的，更多初始化画布的参数请参考官方api下图：
（3）创建模型数据（Model）
接着上面的代码，我们增加如下几行
1var myModel = objGo(go.Model);//创建Model对象 2 // model中的数据每一个js对象都代表着一个相应的模型图中的元素 3 myModel.nodeDataArray = [ 4 { key: "工厂" }, 5 { key: "车间" }, 6 { key: "工人" }, 7 { key: "岗位" }, 8 ]; 9 myDiagram.model = myModel; //将模型数据绑定到画布图上
效果预览
（4）创建节点（Node）
上面有了画布和节点数据，只是有了一个雏形，但是还没有任何的图形化效果。我们加入一些效果试试
在gojs里面给我们提供了几种模型节点的可选项：
**Shape:**形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等
**TextBlock:**文本域（可编辑）
**Picture:**图片
**Panel:**容器来保存其他Node的集合
默认的节点模型代码只是由一个TextBlock组件构建成
我们增加如下一段代码
1// 定义一个简单的节点模板 2 myDiagram.nodeTemplate = 3 objGo(go.Node, "Horizontal",//横向布局的面板 4 // 节点淡蓝色背景 5 { background: "#44CCFF" }, 6 objGo(go.Shape, 7 "RoundedRectangle", //定义形状，这是圆角矩形 8 { /* Shape的参数。宽高颜色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' }, 9 // 绑定 Shape.figure属性为Node.data.fig的值，Model对象可以通过Node.data.fig 获取和设置Shape.figure（修改形状） 10 new go.Binding("figure", "fig"), new go.Binding('fill', 'fill2')), 11 objGo(go.TextBlock, 12 "Default Text", // 默认文本 13 // 设置字体大小颜色以及边距 14 { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, 15 //绑定TextBlock.text 属性为Node.data.name的值，Model对象可以通过Node.data.name获取和设置TextBlock.text 16 new go.Binding("text", "name")) 17 ); 18 19 var myModel = objGo(go.Model);//创建Model对象 20 // model中的数据每一个js对象都代表着一个相应的模型图中的元素 21 myModel.nodeDataArray = [ 22 { name: "工厂", fig: 'YinYang', fill2: 'blue' }, 23 { name: "车间", fig: 'Peace', fill2: 'red' }, 24 { name: "工人", fig: 'NotAllowed', fill2: 'green' }, 25 { name: "岗位", fig: 'Fragile', fill2: 'yellow' }, 26 ]; 27 myDiagram.model = myModel; //将模型数据绑定到画布图上
代码释疑：以上我们给画布对象定义了两种节点模板，一种是文本节点，另一种是形状节点（Node）。在形状节点中，我们定义了数据模型的通用节点样式，就是这一段代码{ /* Shape的参数。宽高颜色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' },然后通过new go.Binding("figure", "fig")方法将模板里面的属性映射到数据实例中，比如这里模板里面的figure属性定义的是Club，如果在我们的数据里面定义fig属性，那么它就会覆盖模板里面的figure的默认值。同样，fill和fill2也是通过同样的原理去区别模板中的样式和实例中的实际样式的！
注：更多figure属性的取值详见这里
效果如下
由此可见我们数据里面的属性会覆盖模板的原始属性，如果是新增的节点，由于没有自定义数据属性，所以呈现到界面上面的时候就是模板里面的原生样式！
（5）节点连线
有了上面的基础，我们可以在画布上面画出我们想要的图形效果了，可是还没有连线。我们知道连线是建立在节点模型的上面的，于是乎我们的Model又分为了以下三种类型：
Model：最基本的（不带连线，如上面的例子）
GraphLinksModel ：高级点的动态连线图
TreeModel：树形图的模型（从例子看好像用的不多）
GraphLinksModel中为model.nodeDataArray提供model.linkDataArray为node节点连线保存数据模型信息，其实也是的一个JSON数组对象，每个线条都有两个属性 “to” 和 “from” 即Node节点的“key”值，两个属性代表两个key表示两个节点间的连线。
我们上面已经写过最基本的Model的例子了，我们再来个带连线的Model的示例
1var myModel = objGo(go.GraphLinksModel); 2 myModel.nodeDataArray = 3 [ 4 { key: "aaa" ,name: "工厂" }, 5 { key: "bbb" ,name: "车间"}, 6 { key: "ccc" ,name: "车间" } 7 ]; 8 myModel.linkDataArray = 9 [ 10 { from: "aaa", to: "bbb" }, 11 { from: "bbb", to: "ccc" } 12 ]; 13 myDiagram.model = myModel;
效果如下
学习了Model、GraphLinksModel，还剩下一种TreeModel树节点的模型，这个博主不打算做详细介绍，有兴趣可以直接查看官网。
三、综合效果
关于综合效果，博主不打算将gojs的api逐个翻个遍了，这样太耗时间，伤不起，只是将官方示例中的部分源码截取出来供大家参考。有需要的再细究！
1、自定义流程的使用
1<!DOCTYPE html> 2<html> 3<head> 4<meta name="viewport" content="width=device-width, initial-scale=1"> 5<title>Draggable Link</title> 6<meta name="description" content="Drag a link to reconnect it. Nodes have custom Adornments for selection, resizing, and reshaping." /> 7<!-- Copyright 1998-2017 by Northwoods Software Corporation. --> 8<meta charset="UTF-8"> 9<script src="../../gojs/go-debug.js"></script> 10<script id="code"> 11 function init() { 12 if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this 13 var objGo = go.GraphObject.make; // for conciseness in defining templates 14 15 myDiagram = 16 objGo(go.Diagram, "myDiagramp", // must name or refer to the p HTML element 17 { 18 grid: objGo(go.Panel, "Grid", 19 objGo(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }), 20 objGo(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }), 21 objGo(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }), 22 objGo(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 }) 23 ), 24 allowDrop: true, // must be true to accept drops from the Palette 25 "draggingTool.dragsLink": true, 26 "draggingTool.isGridSnapEnabled": true, 27 "linkingTool.isUnconnectedLinkValid": true, 28 "linkingTool.portGravity": 20, 29 "relinkingTool.isUnconnectedLinkValid": true, 30 "relinkingTool.portGravity": 20, 31 "relinkingTool.fromHandleArchetype": 32 objGo(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }), 33 "relinkingTool.toHandleArchetype": 34 objGo(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }), 35 "linkReshapingTool.handleArchetype": 36 objGo(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }), 37 rotatingTool: objGo(TopRotatingTool), // defined below 38 "rotatingTool.snapAngleMultiple": 15, 39 "rotatingTool.snapAngleEpsilon": 15, 40 "undoManager.isEnabled": true 41 }); 42 43 // when the document is modified, add a "*" to the title and enable the "Save" button 44 myDiagram.addDiagramListener("Modified", function(e) { 45 var button = document.getElementById("SaveButton"); 46 if (button) button.disabled = !myDiagram.isModified; 47 var idx = document.title.indexOf("*"); 48 if (myDiagram.isModified) { 49 if (idx < 0) document.title += "*"; 50 } else { 51 if (idx >= 0) document.title = document.title.substr(0, idx); 52 } 53 }); 54 55 // Define a function for creating a "port" that is normally transparent. 56 // The "name" is used as the GraphObject.portId, the "spot" is used to control how links connect 57 // and where the port is positioned on the node, and the boolean "output" and "input" arguments 58 // control whether the user can draw links from or to the port. 59 function makePort(name, spot, output, input) { 60 // the port is basically just a small transparent square 61 return objGo(go.Shape, "Circle", 62 { 63 fill: null, // not seen, by default; set to a translucent gray by showSmallPorts, defined below 64 stroke: null, 65 desiredSize: new go.Size(7, 7), 66 alignment: spot, // align the port on the main Shape 67 alignmentFocus: spot, // just inside the Shape 68 portId: name, // declare this object to be a "port" 69 fromSpot: spot, toSpot: spot, // declare where links may connect at this port 70 fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here 71 cursor: "pointer" // show a different cursor to indicate potential link point 72 }); 73 } 74 75 var nodeSelectionAdornmentTemplate = 76 objGo(go.Adornment, "Auto", 77 objGo(go.Shape, { fill: null, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }), 78 objGo(go.Placeholder) 79 ); 80 81 var nodeResizeAdornmentTemplate = 82 objGo(go.Adornment, "Spot", 83 { locationSpot: go.Spot.Right }, 84 objGo(go.Placeholder), 85 objGo(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), 86 objGo(go.Shape, { alignment: go.Spot.Top, cursor: "n-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), 87 objGo(go.Shape, { alignment: go.Spot.TopRight, cursor: "ne-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), 88 89 objGo(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), 90 objGo(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), 91 92 objGo(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), 93 objGo(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), 94 objGo(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue" }) 95 ); 96 97 var nodeRotateAdornmentTemplate = 98 objGo(go.Adornment, 99 { locationSpot: go.Spot.Center, locationObjectName: "CIRCLE" }, 100 objGo(go.Shape, "Circle", { name: "CIRCLE", cursor: "pointer", desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }), 101 objGo(go.Shape, { geometryString: "M3.5 7 L3.5 30", isGeometryPositioned: true, stroke: "deepskyblue", strokeWidth: 1.5, strokeDashArray: [4, 2] }) 102 ); 103 104 myDiagram.nodeTemplate = 105 objGo(go.Node, "Spot", 106 { locationSpot: go.Spot.Center }, 107 new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 108 { selectable: true, selectionAdornmentTemplate: nodeSelectionAdornmentTemplate }, 109 { resizable: true, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate }, 110 { rotatable: true, rotateAdornmentTemplate: nodeRotateAdornmentTemplate }, 111 new go.Binding("angle").makeTwoWay(), 112 // the main object is a Panel that surrounds a TextBlock with a Shape 113 objGo(go.Panel, "Auto", 114 { name: "PANEL" }, 115 new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), 116 objGo(go.Shape, "Rectangle", // default figure 117 { 118 portId: "", // the default port: if no spot on link data, use closest side 119 fromLinkable: true, toLinkable: true, cursor: "pointer", 120 fill: "white", // default color 121 strokeWidth: 2 122 }, 123 new go.Binding("figure"), 124 new go.Binding("fill")), 125 objGo(go.TextBlock, 126 { 127 font: "bold 11pt Helvetica, Arial, sans-serif", 128 margin: 8, 129 maxSize: new go.Size(160, NaN), 130 wrap: go.TextBlock.WrapFit, 131 editable: true 132 }, 133 new go.Binding("text").makeTwoWay()) 134 ), 135 // four small named ports, one on each side: 136 makePort("T", go.Spot.Top, false, true), 137 makePort("L", go.Spot.Left, true, true), 138 makePort("R", go.Spot.Right, true, true), 139 makePort("B", go.Spot.Bottom, true, false), 140 { // handle mouse enter/leave events to show/hide the ports 141 mouseEnter: function(e, node) { showSmallPorts(node, true); }, 142 mouseLeave: function(e, node) { showSmallPorts(node, false); } 143 } 144 ); 145 146 function showSmallPorts(node, show) { 147 node.ports.each(function(port) { 148 if (port.portId !== "") { // don't change the default port, which is the big shape 149 port.fill = show ? "rgba(0,0,0,.3)" : null; 150 } 151 }); 152 } 153 154 var linkSelectionAdornmentTemplate = 155 objGo(go.Adornment, "Link", 156 objGo(go.Shape, 157 // isPanelMain declares that this Shape shares the Link.geometry 158 { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }) // use selection object's strokeWidth 159 ); 160 161 myDiagram.linkTemplate = 162 objGo(go.Link, // the whole link panel 163 { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate }, 164 { relinkableFrom: true, relinkableTo: true, reshapable: true }, 165 { 166 routing: go.Link.AvoidsNodes, 167 curve: go.Link.JumpOver, 168 corner: 5, 169 toShortLength: 4 170 }, 171 new go.Binding("points").makeTwoWay(), 172 objGo(go.Shape, // the link path shape 173 { isPanelMain: true, strokeWidth: 2 }), 174 objGo(go.Shape, // the arrowhead 175 { toArrow: "Standard", stroke: null }), 176 objGo(go.Panel, "Auto", 177 new go.Binding("visible", "isSelected").ofObject(), 178 objGo(go.Shape, "RoundedRectangle", // the link shape 179 { fill: "#F8F8F8", stroke: null }), 180 objGo(go.TextBlock, 181 { 182 textAlign: "center", 183 font: "10pt helvetica, arial, sans-serif", 184 stroke: "#919191", 185 margin: 2, 186 minSize: new go.Size(10, NaN), 187 editable: true 188 }, 189 new go.Binding("text").makeTwoWay()) 190 ) 191 ); 192 193 load(); // load an initial diagram from some JSON text 194 195 // initialize the Palette that is on the left side of the page 196 myPalette = 197 objGo(go.Palette, "myPalettep", // must name or refer to the p HTML element 198 { 199 maxSelectionCount: 1, 200 nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram 201 linkTemplate: // simplify the link template, just in this Palette 202 objGo(go.Link, 203 { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center, 204 // to line up the Link in the same manner we have to pretend the Link has the same location spot 205 locationSpot: go.Spot.Center, 206 selectionAdornmentTemplate: 207 objGo(go.Adornment, "Link", 208 { locationSpot: go.Spot.Center }, 209 objGo(go.Shape, 210 { isPanelMain: true, fill: null, stroke: "deepskyblue", strokeWidth: 0 }), 211 objGo(go.Shape, // the arrowhead 212 { toArrow: "Standard", stroke: null }) 213 ) 214 }, 215 { 216 routing: go.Link.AvoidsNodes, 217 curve: go.Link.JumpOver, 218 corner: 5, 219 toShortLength: 4 220 }, 221 new go.Binding("points"), 222 objGo(go.Shape, // the link path shape 223 { isPanelMain: true, strokeWidth: 2 }), 224 objGo(go.Shape, // the arrowhead 225 { toArrow: "Standard", stroke: null }) 226 ), 227 model: new go.GraphLinksModel([ // specify the contents of the Palette 228 { text: "Start", figure: "Circle", fill: "#00AD5F" }, 229 { text: "Step" }, 230 { text: "DB", figure: "Database", fill: "lightgray" }, 231 { text: "???", figure: "Diamond", fill: "lightskyblue" }, 232 { text: "End", figure: "Circle", fill: "#CE0620" }, 233 { text: "Comment", figure: "RoundedRectangle", fill: "lightyellow" } 234 ], [ 235 // the Palette also has a disconnected Link, which the user can drag-and-drop 236 { points: new go.List(go.Point).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]) } 237 ]) 238 }); 239 } 240 241 242 function TopRotatingTool() { 243 go.RotatingTool.call(this); 244 } 245 go.Diagram.inherit(TopRotatingTool, go.RotatingTool); 246 247 /** @override */ 248 TopRotatingTool.prototype.updateAdornments = function(part) { 249 go.RotatingTool.prototype.updateAdornments.call(this, part); 250 var adornment = part.findAdornment("Rotating"); 251 if (adornment !== null) { 252 adornment.location = part.rotateObject.getDocumentPoint(new go.Spot(0.5, 0, 0, -30)); // above middle top 253 } 254 }; 255 256 /** @override */ 257 TopRotatingTool.prototype.rotate = function(newangle) { 258 go.RotatingTool.prototype.rotate.call(this, newangle + 90); 259 }; 260 // end of TopRotatingTool class 261 262 263 // Show the diagram's model in JSON format that the user may edit 264 function save() { 265 saveDiagramProperties(); // do this first, before writing to JSON 266 document.getElementById("mySavedModel").value = myDiagram.model.toJson(); 267 myDiagram.isModified = false; 268 } 269 function load() { 270 myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); 271 loadDiagramProperties(); // do this after the Model.modelData has been brought into memory 272 } 273 274 function saveDiagramProperties() { 275 myDiagram.model.modelData.position = go.Point.stringify(myDiagram.position); 276 } 277 function loadDiagramProperties(e) { 278 // set Diagram.initialPosition, not Diagram.position, to handle initialization side-effects 279 var pos = myDiagram.model.modelData.position; 280 if (pos) myDiagram.initialPosition = go.Point.parse(pos); 281 } 282</script> 283</head> 284<body onload="init()"> 285<p id="sample"> 286 <p style="width:100%; white-space:nowrap;"> 287 <span style="display: inline-block; vertical-align: top; width:105px"> 288 <p id="myPalettep" style="border: solid 1px black; height: 620px"></p> 289 </span> 290 291 <span style="display: inline-block; vertical-align: top; width:80%"> 292 <p id="myDiagramp" style="border: solid 1px black; height: 620px"></p> 293 </span> 294 </p> 295 <p> 296 This sample demonstrates the ability for the user to drag around a Link as if it were a Node. 297 When either end of the link passes over a valid port, the port is highlighted. 298 </p> 299 <p> 300 The link-dragging functionality is enabled by setting some or all of the following properties: 301 <a>DraggingTool.dragsLink</a>, <a>LinkingTool.isUnconnectedLinkValid</a>, and 302 <a>RelinkingTool.isUnconnectedLinkValid</a>. 303 </p> 304 <p> 305 Note that a Link is present in the <a>Palette</a> so that it too can be dragged out and onto 306 the main Diagram. Because links are not automatically routed when either end is not connected 307 with a Node, the route is provided explicitly when that Palette item is defined. 308 </p> 309 <p> 310 This also demonstrates several custom Adornments: 311 <a>Part.selectionAdornmentTemplate</a>, <a>Part.resizeAdornmentTemplate</a>, and 312 <a>Part.rotateAdornmentTemplate</a>. 313 </p> 314 <p> 315 Finally this sample demonstrates saving and restoring the <a>Diagram.position</a> as a property 316 on the <a>Model.modelData</a> object that is automatically saved and restored when calling <a>Model.toJson</a> 317 and <a>Model.fromJson</a>. 318 </p> 319 <p> 320 <p> 321 <button id="SaveButton" onclick="save()">Save</button> 322 <button onclick="load()">Load</button> 323 Diagram Model saved in JSON format: 324 </p> 325 <textarea id="mySavedModel" style="width:100%;height:300px"> 326{ "class": "go.GraphLinksModel", 327 "linkFromPortIdProperty": "fromPort", 328 "linkToPortIdProperty": "toPort", 329 "nodeDataArray": [ 330 ], 331 "linkDataArray": [ 332 ]} 333 </textarea> 334 </p> 335</p> 336</body> 337</html>
效果如下：
建议各位copy代码，在本地看到效果，然后再根据实际需求去研究它的api，这样才不会太盲目而花费太多时间。
2、工业流程图
1<!DOCTYPE html> 2<html> 3<head> 4<meta name="viewport" content="width=device-width, initial-scale=1"> 5<title>Process Flow</title> 6<meta name="description" content="A simple process flow or SCADA diagram editor, simulating equipment monitoring and control." /> 7<!-- Copyright 1998-2017 by Northwoods Software Corporation. --> 8<meta charset="UTF-8"> 9<script src="../../gojs/go-debug.js"></script> 10<script id="code"> 11 function init() { 12 if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this 13 var $ = go.GraphObject.make; // for more concise visual tree definitions 14 15 myDiagram = 16 $(go.Diagram, "myDiagramp", 17 { 18 "grid.visible": true, 19 "grid.gridCellSize": new go.Size(30, 20), 20 "draggingTool.isGridSnapEnabled": true, 21 "resizingTool.isGridSnapEnabled": true, 22 "rotatingTool.snapAngleMultiple": 90, 23 "rotatingTool.snapAngleEpsilon": 45, 24 "undoManager.isEnabled": true 25 }); 26 27 // when the document is modified, add a "*" to the title and enable the "Save" button 28 myDiagram.addDiagramListener("Modified", function(e) { 29 var button = document.getElementById("SaveButton"); 30 if (button) button.disabled = !myDiagram.isModified; 31 var idx = document.title.indexOf("*"); 32 if (myDiagram.isModified) { 33 if (idx < 0) document.title += "*"; 34 } else { 35 if (idx >= 0) document.title = document.title.substr(0, idx); 36 } 37 }); 38 39 myDiagram.nodeTemplateMap.add("Process", 40 $(go.Node, "Auto", 41 { locationSpot: new go.Spot(0.5, 0.5), locationObjectName: "SHAPE", 42 resizable: true, resizeObjectName: "SHAPE" }, 43 new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify), 44 $(go.Shape, "Cylinder1", 45 { name: "SHAPE", 46 strokeWidth: 2, 47 fill: $(go.Brush, "Linear", 48 { start: go.Spot.Left, end: go.Spot.Right, 49 0: "gray", 0.5: "white", 1: "gray" }), 50 minSize: new go.Size(50, 50), 51 portId: "", fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides 52 }, 53 new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)), 54 $(go.TextBlock, 55 { alignment: go.Spot.Center, textAlign: "center", margin: 5, 56 editable: true }, 57 new go.Binding("text").makeTwoWay()) 58 )); 59 60 myDiagram.nodeTemplateMap.add("Valve", 61 $(go.Node, "Vertical", 62 { locationSpot: new go.Spot(0.5, 1, 0, -21), locationObjectName: "SHAPE", 63 selectionObjectName: "SHAPE", rotatable: true }, 64 new go.Binding("angle").makeTwoWay(), 65 new go.Binding("location", "pos", go.Point.parse).makeTwoWay(go.Point.stringify), 66 $(go.TextBlock, 67 { alignment: go.Spot.Center, textAlign: "center", margin: 5, editable: true }, 68 new go.Binding("text").makeTwoWay(), 69 // keep the text upright, even when the whole node has been rotated upside down 70 new go.Binding("angle", "angle", function(a) { return a === 180 ? 180 : 0; }).ofObject()), 71 $(go.Shape, 72 { name: "SHAPE", 73 geometryString: "F1 M0 0 L40 20 40 0 0 20z M20 10 L20 30 M12 30 L28 30", 74 strokeWidth: 2, 75 fill: $(go.Brush, "Linear", { 0: "gray", 0.35: "white", 0.7: "gray" }), 76 portId: "", fromSpot: new go.Spot(1, 0.35), toSpot: new go.Spot(0, 0.35) }) 77 )); 78 79 myDiagram.linkTemplate = 80 $(go.Link, 81 { routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10, reshapable: true, toShortLength: 7 }, 82 new go.Binding("points").makeTwoWay(), 83 // mark each Shape to get the link geometry with isPanelMain: true 84 $(go.Shape, { isPanelMain: true, stroke: "black", strokeWidth: 5 }), 85 $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 3 }), 86 $(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 1, name: "PIPE", strokeDashArray: [10, 10] }), 87 $(go.Shape, { toArrow: "Triangle", fill: "black", stroke: null }) 88 ); 89 90 load(); 91 92 loop(); // animate some flow through the pipes 93 } 94 95 function loop() { 96 var diagram = myDiagram; 97 setTimeout(function() { 98 var oldskips = diagram.skipsUndoManager; 99 diagram.skipsUndoManager = true; 100 diagram.links.each(function(link) { 101 var shape = link.findObject("PIPE"); 102 var off = shape.strokeDashOffset - 2; 103 shape.strokeDashOffset = (off <= 0) ? 20 : off; 104 }); 105 diagram.skipsUndoManager = oldskips; 106 loop(); 107 }, 100); 108 } 109 110 function save() { 111 document.getElementById("mySavedModel").value = myDiagram.model.toJson(); 112 myDiagram.isModified = false; 113 } 114 function load() { 115 myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value); 116 } 117</script> 118 119</head> 120<body onload="init()"> 121<p id="sample"> 122 <p id="myDiagramp" style="border: solid 1px black; width:100%; height:500px"></p> 123 <p> 124 A <em>process flow diagram</em> is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment. 125 A simple SCADA diagram, with animation of the flow along the pipes, is implemented here. 126 </p> 127 <p> 128 The diagram displays the background grid layer by setting <b>grid.visible</b> to true, 129 and also allows snapping to the grid using <a>DraggingTool.isGridSnapEnabled</a>, 130 <a>ResizingTool.isGridSnapEnabled</a>, and <a>RotatingTool.snapAngleMultiple</a> alongside <a>RotatingTool.snapAngleEpsilon</a>. 131 </p> 132 <p> 133 The diagram also uses the <b>loop</b> function to animate the links by adjusting the <a>Shape.strokeDashOffset</a> every 100 ms. 134 </p> 135 <p> 136 <p> 137 <button id="SaveButton" onclick="save()">Save</button> 138 <button onclick="load()">Load</button> 139 Diagram Model saved in JSON format: 140 </p> 141 <textarea id="mySavedModel" style="width:100%;height:300px"> 142{ "class": "go.GraphLinksModel", 143 "nodeDataArray": [ 144{"key":"P1", "category":"Process", "pos":"150 120", "text":"Process"}, 145{"key":"P2", "category":"Process", "pos":"330 320", "text":"Tank"}, 146{"key":"V1", "category":"Valve", "pos":"270 120", "text":"V1"}, 147{"key":"P3", "category":"Process", "pos":"150 420", "text":"Pump"}, 148{"key":"V2", "category":"Valve", "pos":"150 280", "text":"VM", "angle":270}, 149{"key":"V3", "category":"Valve", "pos":"270 420", "text":"V2", "angle":180}, 150{"key":"P4", "category":"Process", "pos":"450 140", "text":"Reserve Tank"}, 151{"key":"V4", "category":"Valve", "pos":"390 60", "text":"VA"}, 152{"key":"V5", "category":"Valve", "pos":"450 260", "text":"VB", "angle":90} 153 ], 154 "linkDataArray": [ 155{"from":"P1", "to":"V1"}, 156{"from":"P3", "to":"V2"}, 157{"from":"V2", "to":"P1"}, 158{"from":"P2", "to":"V3"}, 159{"from":"V3", "to":"P3"}, 160{"from":"V1", "to":"V4"}, 161{"from":"V4", "to":"P4"}, 162{"from":"V1", "to":"P2"}, 163{"from":"P4", "to":"V5"}, 164{"from":"V5", "to":"P2"} 165 ]} 166 </textarea> 167 </p> 168</p> 169</body> 170</html>
工业流程图
四、总结
本文根据js的一些基础用法做了简单介绍，今天就先到这里，以后有问题了再来跟大家分享。如果你的项目里面也有这种业务需求，可以用起来试试！需要说明一点，如果您的公司不缺钱，建议使用正版授权的组件，毕竟尊重作者的劳动成果很重要！
相关推荐：
解决JS组件bootstrap table分页实现过程中遇到的问题
以上就是JS前端图形化插件之利器Gojs组件的详细内容，更多请关注php中文网其它相关文章！