之前分享过两篇关于流程画图的前端组件，使用的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初始化画布
//创建画布 var objgo = go.graphobject.make; var mydiagram = objgo(go.diagram, "mydiagramp", { //模型图的中心位置所在坐标 initialcontentalignment: go.spot.center, //允许用户操作图表的时候使用ctrl-z撤销和ctrl-y重做快捷键 "undomanager.isenabled": true, //不运行用户改变图表的规模 allowzoom: false, //画布上面是否出现网格 "grid.visible": true, //允许在画布上面双击的时候创建节点 "clickcreatingtool.archetypenodedata": { text: "node" }, //允许使用ctrl+c、ctrl+v复制粘贴 "commandhandler.copiestree": true, //允许使用delete键删除节点 "commandhandler.deletestree": true, // dragging for both move and copy "draggingtool.dragstree": true, });
官方示例用的$符号作为变量，博主觉得$符号太敏感，还是换个名字吧~以上几个参数都是博主摘选的，更多初始化画布的参数请参考官方api下图：
（3）创建模型数据（model）
接着上面的代码，我们增加如下几行
var mymodel = objgo(go.model);//创建model对象 // model中的数据每一个js对象都代表着一个相应的模型图中的元素 mymodel.nodedataarray = [ { key: "工厂" }, { key: "车间" }, { key: "工人" }, { key: "岗位" }, ]; mydiagram.model = mymodel; //将模型数据绑定到画布图上
效果预览
（4）创建节点（node）
上面有了画布和节点数据，只是有了一个雏形，但是还没有任何的图形化效果。我们加入一些效果试试
在gojs里面给我们提供了几种模型节点的可选项：
shape:形状——rectangle（矩形）、roundedrectangle（圆角矩形），ellipse（椭圆形），triangle（三角形），diamond（菱形），circle（圆形）等
textblock:文本域（可编辑）
picture:图片
panel:容器来保存其他node的集合
默认的节点模型代码只是由一个textblock组件构建成
我们增加如下一段代码
// 定义一个简单的节点模板 mydiagram.nodetemplate = objgo(go.node, "horizontal",//横向布局的面板 // 节点淡蓝色背景 { background: "#44ccff" }, objgo(go.shape, "roundedrectangle", //定义形状，这是圆角矩形 { /* shape的参数。宽高颜色等等*/figure: "club", width: 40, height: 60, margin: 4, fill: 'red' }, // 绑定 shape.figure属性为node.data.fig的值，model对象可以通过node.data.fig 获取和设置shape.figure（修改形状） new go.binding("figure", "fig"), new go.binding('fill', 'fill2')), objgo(go.textblock, "default text", // 默认文本 // 设置字体大小颜色以及边距 { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, //绑定textblock.text 属性为node.data.name的值，model对象可以通过node.data.name获取和设置textblock.text new go.binding("text", "name")) ); var mymodel = objgo(go.model);//创建model对象 // model中的数据每一个js对象都代表着一个相应的模型图中的元素 mymodel.nodedataarray = [ { name: "工厂", fig: 'yinyang', fill2: 'blue' }, { name: "车间", fig: 'peace', fill2: 'red' }, { name: "工人", fig: 'notallowed', fill2: 'green' }, { name: "岗位", fig: 'fragile', fill2: 'yellow' }, ]; 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的示例
var mymodel = objgo(go.graphlinksmodel); mymodel.nodedataarray = [ { key: "aaa" ,name: "工厂" }, { key: "bbb" ,name: "车间"}, { key: "ccc" ,name: "车间" } ]; mymodel.linkdataarray = [ { from: "aaa", to: "bbb" }, { from: "bbb", to: "ccc" } ]; mydiagram.model = mymodel;
效果如下
学习了model、graphlinksmodel，还剩下一种treemodel树节点的模型，这个博主不打算做详细介绍，有兴趣可以直接查看官网。
三、综合效果
关于综合效果，博主不打算将gojs的api逐个翻个遍了，这样太耗时间，伤不起，只是将官方示例中的部分源码截取出来供大家参考。有需要的再细究！
1、自定义流程的使用
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>draggable link</title> <meta name="description" content="drag a link to reconnect it. nodes have custom adornments for selection, resizing, and reshaping." /> <!-- copyright 1998-2017 by northwoods software corporation. --> <meta charset="utf-8"> <script src="../../gojs/go-debug.js"></script> <script id="code"> function init() { if (window.gosamples) gosamples(); // init for these samples -- you don't need to call this var objgo = go.graphobject.make; // for conciseness in defining templates mydiagram = objgo(go.diagram, "mydiagramp", // must name or refer to the p html element { grid: objgo(go.panel, "grid", objgo(go.shape, "lineh", { stroke: "lightgray", strokewidth: 0.5 }), objgo(go.shape, "lineh", { stroke: "gray", strokewidth: 0.5, interval: 10 }), objgo(go.shape, "linev", { stroke: "lightgray", strokewidth: 0.5 }), objgo(go.shape, "linev", { stroke: "gray", strokewidth: 0.5, interval: 10 }) ), allowdrop: true, // must be true to accept drops from the palette "draggingtool.dragslink": true, "draggingtool.isgridsnapenabled": true, "linkingtool.isunconnectedlinkvalid": true, "linkingtool.portgravity": 20, "relinkingtool.isunconnectedlinkvalid": true, "relinkingtool.portgravity": 20, "relinkingtool.fromhandlearchetype": objgo(go.shape, "diamond", { segmentindex: 0, cursor: "pointer", desiredsize: new go.size(8, 8), fill: "tomato", stroke: "darkred" }), "relinkingtool.tohandlearchetype": objgo(go.shape, "diamond", { segmentindex: -1, cursor: "pointer", desiredsize: new go.size(8, 8), fill: "darkred", stroke: "tomato" }), "linkreshapingtool.handlearchetype": objgo(go.shape, "diamond", { desiredsize: new go.size(7, 7), fill: "lightblue", stroke: "deepskyblue" }), rotatingtool: objgo(toprotatingtool), // defined below "rotatingtool.snapanglemultiple": 15, "rotatingtool.snapangleepsilon": 15, "undomanager.isenabled": true }); // when the document is modified, add a "*" to the title and enable the "save" button mydiagram.adddiagramlistener("modified", function(e) { var button = document.getelementbyid("savebutton"); if (button) button.disabled = !mydiagram.ismodified; var idx = document.title.indexof("*"); if (mydiagram.ismodified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.substr(0, idx); } }); // define a function for creating a "port" that is normally transparent. // the "name" is used as the graphobject.portid, the "spot" is used to control how links connect // and where the port is positioned on the node, and the boolean "output" and "input" arguments // control whether the user can draw links from or to the port. function makeport(name, spot, output, input) { // the port is basically just a small transparent square return objgo(go.shape, "circle", { fill: null, // not seen, by default; set to a translucent gray by showsmallports, defined below stroke: null, desiredsize: new go.size(7, 7), alignment: spot, // align the port on the main shape alignmentfocus: spot, // just inside the shape portid: name, // declare this object to be a "port" fromspot: spot, tospot: spot, // declare where links may connect at this port fromlinkable: output, tolinkable: input, // declare whether the user may draw links to/from here cursor: "pointer" // show a different cursor to indicate potential link point }); } var nodeselectionadornmenttemplate = objgo(go.adornment, "auto", objgo(go.shape, { fill: null, stroke: "deepskyblue", strokewidth: 1.5, strokedasharray: [4, 2] }), objgo(go.placeholder) ); var noderesizeadornmenttemplate = objgo(go.adornment, "spot", { locationspot: go.spot.right }, objgo(go.placeholder), objgo(go.shape, { alignment: go.spot.topleft, cursor: "nw-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { alignment: go.spot.top, cursor: "n-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { alignment: go.spot.topright, cursor: "ne-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { alignment: go.spot.left, cursor: "w-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { alignment: go.spot.right, cursor: "e-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { alignment: go.spot.bottomleft, cursor: "se-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { alignment: go.spot.bottom, cursor: "s-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { alignment: go.spot.bottomright, cursor: "sw-resize", desiredsize: new go.size(6, 6), fill: "lightblue", stroke: "deepskyblue" }) ); var noderotateadornmenttemplate = objgo(go.adornment, { locationspot: go.spot.center, locationobjectname: "circle" }, objgo(go.shape, "circle", { name: "circle", cursor: "pointer", desiredsize: new go.size(7, 7), fill: "lightblue", stroke: "deepskyblue" }), objgo(go.shape, { geometrystring: "m3.5 7 l3.5 30", isgeometrypositioned: true, stroke: "deepskyblue", strokewidth: 1.5, strokedasharray: [4, 2] }) ); mydiagram.nodetemplate = objgo(go.node, "spot", { locationspot: go.spot.center }, new go.binding("location", "loc", go.point.parse).maketwoway(go.point.stringify), { selectable: true, selectionadornmenttemplate: nodeselectionadornmenttemplate }, { resizable: true, resizeobjectname: "panel", resizeadornmenttemplate: noderesizeadornmenttemplate }, { rotatable: true, rotateadornmenttemplate: noderotateadornmenttemplate }, new go.binding("angle").maketwoway(), // the main object is a panel that surrounds a textblock with a shape objgo(go.panel, "auto", { name: "panel" }, new go.binding("desiredsize", "size", go.size.parse).maketwoway(go.size.stringify), objgo(go.shape, "rectangle", // default figure { portid: "", // the default port: if no spot on link data, use closest side fromlinkable: true, tolinkable: true, cursor: "pointer", fill: "white", // default color strokewidth: 2 }, new go.binding("figure"), new go.binding("fill")), objgo(go.textblock, { font: "bold 11pt helvetica, arial, sans-serif", margin: 8, maxsize: new go.size(160, nan), wrap: go.textblock.wrapfit, editable: true }, new go.binding("text").maketwoway()) ), // four small named ports, one on each side: makeport("t", go.spot.top, false, true), makeport("l", go.spot.left, true, true), makeport("r", go.spot.right, true, true), makeport("b", go.spot.bottom, true, false), { // handle mouse enter/leave events to show/hide the ports mouseenter: function(e, node) { showsmallports(node, true); }, mouseleave: function(e, node) { showsmallports(node, false); } } ); function showsmallports(node, show) { node.ports.each(function(port) { if (port.portid !== "") { // don't change the default port, which is the big shape port.fill = show ? "rgba(0,0,0,.3)" : null; } }); } var linkselectionadornmenttemplate = objgo(go.adornment, "link", objgo(go.shape, // ispanelmain declares that this shape shares the link.geometry { ispanelmain: true, fill: null, stroke: "deepskyblue", strokewidth: 0 }) // use selection object's strokewidth ); mydiagram.linktemplate = objgo(go.link, // the whole link panel { selectable: true, selectionadornmenttemplate: linkselectionadornmenttemplate }, { relinkablefrom: true, relinkableto: true, reshapable: true }, { routing: go.link.avoidsnodes, curve: go.link.jumpover, corner: 5, toshortlength: 4 }, new go.binding("points").maketwoway(), objgo(go.shape, // the link path shape { ispanelmain: true, strokewidth: 2 }), objgo(go.shape, // the arrowhead { toarrow: "standard", stroke: null }), objgo(go.panel, "auto", new go.binding("visible", "isselected").ofobject(), objgo(go.shape, "roundedrectangle", // the link shape { fill: "#f8f8f8", stroke: null }), objgo(go.textblock, { textalign: "center", font: "10pt helvetica, arial, sans-serif", stroke: "#919191", margin: 2, minsize: new go.size(10, nan), editable: true }, new go.binding("text").maketwoway()) ) ); load(); // load an initial diagram from some json text // initialize the palette that is on the left side of the page mypalette = objgo(go.palette, "mypalettep", // must name or refer to the p html element { maxselectioncount: 1, nodetemplatemap: mydiagram.nodetemplatemap, // share the templates used by mydiagram linktemplate: // simplify the link template, just in this palette objgo(go.link, { // because the gridlayout.alignment is location and the nodes have locationspot == spot.center, // to line up the link in the same manner we have to pretend the link has the same location spot locationspot: go.spot.center, selectionadornmenttemplate: objgo(go.adornment, "link", { locationspot: go.spot.center }, objgo(go.shape, { ispanelmain: true, fill: null, stroke: "deepskyblue", strokewidth: 0 }), objgo(go.shape, // the arrowhead { toarrow: "standard", stroke: null }) ) }, { routing: go.link.avoidsnodes, curve: go.link.jumpover, corner: 5, toshortlength: 4 }, new go.binding("points"), objgo(go.shape, // the link path shape { ispanelmain: true, strokewidth: 2 }), objgo(go.shape, // the arrowhead { toarrow: "standard", stroke: null }) ), model: new go.graphlinksmodel([ // specify the contents of the palette { text: "start", figure: "circle", fill: "#00ad5f" }, { text: "step" }, { text: "db", figure: "database", fill: "lightgray" }, { text: "?", figure: "diamond", fill: "lightskyblue" }, { text: "end", figure: "circle", fill: "#ce0620" }, { text: "comment", figure: "roundedrectangle", fill: "lightyellow" } ], [ // the palette also has a disconnected link, which the user can drag-and-drop { 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)]) } ]) }); } function toprotatingtool() { go.rotatingtool.call(this); } go.diagram.inherit(toprotatingtool, go.rotatingtool); /** @override */ toprotatingtool.prototype.updateadornments = function(part) { go.rotatingtool.prototype.updateadornments.call(this, part); var adornment = part.findadornment("rotating"); if (adornment !== null) { adornment.location = part.rotateobject.getdocumentpoint(new go.spot(0.5, 0, 0, -30)); // above middle top } }; /** @override */ toprotatingtool.prototype.rotate = function(newangle) { go.rotatingtool.prototype.rotate.call(this, newangle + 90); }; // end of toprotatingtool class // show the diagram's model in json format that the user may edit function save() { savediagramproperties(); // do this first, before writing to json document.getelementbyid("mysavedmodel").value = mydiagram.model.tojson(); mydiagram.ismodified = false; } function load() { mydiagram.model = go.model.fromjson(document.getelementbyid("mysavedmodel").value); loaddiagramproperties(); // do this after the model.modeldata has been brought into memory } function savediagramproperties() { mydiagram.model.modeldata.position = go.point.stringify(mydiagram.position); } function loaddiagramproperties(e) { // set diagram.initialposition, not diagram.position, to handle initialization side-effects var pos = mydiagram.model.modeldata.position; if (pos) mydiagram.initialposition = go.point.parse(pos); } </script> </head> <body onload="init()"> <p id="sample"> <p style="width:100%; white-space:nowrap;"> <span style="display: inline-block; vertical-align: top; width:105px"> <p id="mypalettep" style="border: solid 1px black; height: 620px"></p> </span> <span style="display: inline-block; vertical-align: top; width:80%"> <p id="mydiagramp" style="border: solid 1px black; height: 620px"></p> </span> </p> <p> this sample demonstrates the ability for the user to drag around a link as if it were a node. when either end of the link passes over a valid port, the port is highlighted. </p> <p> the link-dragging functionality is enabled by setting some or all of the following properties: <a>draggingtool.dragslink</a>, <a>linkingtool.isunconnectedlinkvalid</a>, and <a>relinkingtool.isunconnectedlinkvalid</a>. </p> <p> note that a link is present in the <a>palette</a> so that it too can be dragged out and onto the main diagram. because links are not automatically routed when either end is not connected with a node, the route is provided explicitly when that palette item is defined. </p> <p> this also demonstrates several custom adornments: <a>part.selectionadornmenttemplate</a>, <a>part.resizeadornmenttemplate</a>, and <a>part.rotateadornmenttemplate</a>. </p> <p> finally this sample demonstrates saving and restoring the <a>diagram.position</a> as a property on the <a>model.modeldata</a> object that is automatically saved and restored when calling <a>model.tojson</a> and <a>model.fromjson</a>. </p> <p> <p> <button id="savebutton" onclick="save()">save</button> <button onclick="load()">load</button> diagram model saved in json format: </p> <textarea id="mysavedmodel" style="width:100%;height:300px"> { "class": "go.graphlinksmodel", "linkfromportidproperty": "fromport", "linktoportidproperty": "toport", "nodedataarray": [ ], "linkdataarray": [ ]} </textarea> </p> </p> </body> </html>
效果如下：
建议各位copy代码，在本地看到效果，然后再根据实际需求去研究它的api，这样才不会太盲目而花费太多时间。
2、工业流程图
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>process flow</title> <meta name="description" content="a simple process flow or scada diagram editor, simulating equipment monitoring and control." /> <!-- copyright 1998-2017 by northwoods software corporation. --> <meta charset="utf-8"> <script src="../../gojs/go-debug.js"></script> <script id="code"> function init() { if (window.gosamples) gosamples(); // init for these samples -- you don't need to call this var $ = go.graphobject.make; // for more concise visual tree definitions mydiagram = $(go.diagram, "mydiagramp", { "grid.visible": true, "grid.gridcellsize": new go.size(30, 20), "draggingtool.isgridsnapenabled": true, "resizingtool.isgridsnapenabled": true, "rotatingtool.snapanglemultiple": 90, "rotatingtool.snapangleepsilon": 45, "undomanager.isenabled": true }); // when the document is modified, add a "*" to the title and enable the "save" button mydiagram.adddiagramlistener("modified", function(e) { var button = document.getelementbyid("savebutton"); if (button) button.disabled = !mydiagram.ismodified; var idx = document.title.indexof("*"); if (mydiagram.ismodified) { if (idx < 0) document.title += "*"; } else { if (idx >= 0) document.title = document.title.substr(0, idx); } }); mydiagram.nodetemplatemap.add("process", $(go.node, "auto", { locationspot: new go.spot(0.5, 0.5), locationobjectname: "shape", resizable: true, resizeobjectname: "shape" }, new go.binding("location", "pos", go.point.parse).maketwoway(go.point.stringify), $(go.shape, "cylinder1", { name: "shape", strokewidth: 2, fill: $(go.brush, "linear", { start: go.spot.left, end: go.spot.right, 0: "gray", 0.5: "white", 1: "gray" }), minsize: new go.size(50, 50), portid: "", fromspot: go.spot.allsides, tospot: go.spot.allsides }, new go.binding("desiredsize", "size", go.size.parse).maketwoway(go.size.stringify)), $(go.textblock, { alignment: go.spot.center, textalign: "center", margin: 5, editable: true }, new go.binding("text").maketwoway()) )); mydiagram.nodetemplatemap.add("valve", $(go.node, "vertical", { locationspot: new go.spot(0.5, 1, 0, -21), locationobjectname: "shape", selectionobjectname: "shape", rotatable: true }, new go.binding("angle").maketwoway(), new go.binding("location", "pos", go.point.parse).maketwoway(go.point.stringify), $(go.textblock, { alignment: go.spot.center, textalign: "center", margin: 5, editable: true }, new go.binding("text").maketwoway(), // keep the text upright, even when the whole node has been rotated upside down new go.binding("angle", "angle", function(a) { return a === 180 ? 180 : 0; }).ofobject()), $(go.shape, { name: "shape", geometrystring: "f1 m0 0 l40 20 40 0 0 20z m20 10 l20 30 m12 30 l28 30", strokewidth: 2, fill: $(go.brush, "linear", { 0: "gray", 0.35: "white", 0.7: "gray" }), portid: "", fromspot: new go.spot(1, 0.35), tospot: new go.spot(0, 0.35) }) )); mydiagram.linktemplate = $(go.link, { routing: go.link.avoidsnodes, curve: go.link.jumpgap, corner: 10, reshapable: true, toshortlength: 7 }, new go.binding("points").maketwoway(), // mark each shape to get the link geometry with ispanelmain: true $(go.shape, { ispanelmain: true, stroke: "black", strokewidth: 5 }), $(go.shape, { ispanelmain: true, stroke: "gray", strokewidth: 3 }), $(go.shape, { ispanelmain: true, stroke: "white", strokewidth: 1, name: "pipe", strokedasharray: [10, 10] }), $(go.shape, { toarrow: "triangle", fill: "black", stroke: null }) ); load(); loop(); // animate some flow through the pipes } function loop() { var diagram = mydiagram; settimeout(function() { var oldskips = diagram.skipsundomanager; diagram.skipsundomanager = true; diagram.links.each(function(link) { var shape = link.findobject("pipe"); var off = shape.strokedashoffset - 2; shape.strokedashoffset = (off <= 0) ? 20 : off; }); diagram.skipsundomanager = oldskips; loop(); }, 100); } function save() { document.getelementbyid("mysavedmodel").value = mydiagram.model.tojson(); mydiagram.ismodified = false; } function load() { mydiagram.model = go.model.fromjson(document.getelementbyid("mysavedmodel").value); } </script> </head> <body onload="init()"> <p id="sample"> <p id="mydiagramp" style="border: solid 1px black; width:100%; height:500px"></p> <p> a <em>process flow diagram</em> is commonly used in chemical and process engineering to indicate the general flow of plant processes and equipment. a simple scada diagram, with animation of the flow along the pipes, is implemented here. </p> <p> the diagram displays the background grid layer by setting <b>grid.visible</b> to true, and also allows snapping to the grid using <a>draggingtool.isgridsnapenabled</a>, <a>resizingtool.isgridsnapenabled</a>, and <a>rotatingtool.snapanglemultiple</a> alongside <a>rotatingtool.snapangleepsilon</a>. </p> <p> the diagram also uses the <b>loop</b> function to animate the links by adjusting the <a>shape.strokedashoffset</a> every 100 ms. </p> <p> <p> <button id="savebutton" onclick="save()">save</button> <button onclick="load()">load</button> diagram model saved in json format: </p> <textarea id="mysavedmodel" style="width:100%;height:300px"> { "class": "go.graphlinksmodel", "nodedataarray": [ {"key":"p1", "category":"process", "pos":"150 120", "text":"process"}, {"key":"p2", "category":"process", "pos":"330 320", "text":"tank"}, {"key":"v1", "category":"valve", "pos":"270 120", "text":"v1"}, {"key":"p3", "category":"process", "pos":"150 420", "text":"pump"}, {"key":"v2", "category":"valve", "pos":"150 280", "text":"vm", "angle":270}, {"key":"v3", "category":"valve", "pos":"270 420", "text":"v2", "angle":180}, {"key":"p4", "category":"process", "pos":"450 140", "text":"reserve tank"}, {"key":"v4", "category":"valve", "pos":"390 60", "text":"va"}, {"key":"v5", "category":"valve", "pos":"450 260", "text":"vb", "angle":90} ], "linkdataarray": [ {"from":"p1", "to":"v1"}, {"from":"p3", "to":"v2"}, {"from":"v2", "to":"p1"}, {"from":"p2", "to":"v3"}, {"from":"v3", "to":"p3"}, {"from":"v1", "to":"v4"}, {"from":"v4", "to":"p4"}, {"from":"v1", "to":"p2"}, {"from":"p4", "to":"v5"}, {"from":"v5", "to":"p2"} ]} </textarea> </p> </p> </body> </html>
工业流程图
四、总结
本文根据js的一些基础用法做了简单介绍，今天就先到这里，以后有问题了再来跟大家分享。如果你的项目里面也有这种业务需求，可以用起来试试！需要说明一点，如果您的公司不缺钱，建议使用正版授权的组件，毕竟尊重作者的劳动成果很重要！
相关推荐：
javascript-extjs组件开发完整代码
解决js组件bootstrap table分页实现过程中遇到的问题
基于js组件实现拖动滑块验证功能
以上就是js前端图形化插件之利器gojs组件的详细内容。