正文
前言：之前分享過兩篇關於流程畫圖的前端組件，使用的jsPlumb。這個組件本身還不錯，使用方便、入門簡單、輕量級，但是使用一段時間下來，發現一些弊病，比如組件不太穩定，初始進入頁面的時候連線的樣式有時會亂掉，刷新頁面之后才能恢復正常，而且連線樣式比較單一，容易讓人產生視覺疲勞，加之最近公司在大力推行所謂的“工業4.0”，除了對自動化控制要求的提高之外，對這種圖形化界面的要求也隨之提高，所以單純的jsPlumb組件效果已經不能滿足日益發展的公司業務。基於以上種種，最終找到了Gojs組件，它效果強大、api豐富，唯一的不足就是這個組件是一個收費組件，可是在天朝，噓...這是個不能說的秘密！
本文原創地址：http://www.cnblogs.com/landeanfen/p/7910530.html
一、組件效果預覽
先來兩個炫酷點的效果
就最下面兩個效果而言，就是jsPlumb無法實現的，可是這種效果在MES系統里面是很吸引人的，尤其是一些流程性的業務，用這種效果實現讓可以一眼就感覺高大上了。並且咋一眼看上去，你根本都不相信這是一個web頁面的效果。
其他效果示例
可折疊的樹
這是圖片嗎？
竟然還可以生成圖表！
想搶visio的飯碗嗎？
更多示例可查看 官網
本文原創地址：http://www.cnblogs.com/landeanfen/p/7910530.html
二、初次接觸
老規矩，還是先來個入門教程。
源碼下載：https://github.com/NorthwoodsSoftware/GoJS
api詳情：https://gojs.net/latest/api/index.html
示例地址：https://gojs.net/latest/samples/index.html
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元素，作為我們的畫布
<div id="myDiagramDiv" style="margin:auto;width:300px; height:300px; "></div>
然后使用gojs的api初始化畫布
//創建畫布
var objGo = go.GraphObject.make;
var myDiagram = objGo(go.Diagram, "myDiagramDiv",
{
//模型圖的中心位置所在坐標
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里面給我們提供了幾種模型節點的可選項：
我們增加如下一段代碼
// 定義一個簡單的節點模板
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、自定義流程的使用
自定義流程全部代碼
效果如下：
建議各位copy代碼，在本地看到效果，然后再根據實際需求去研究它的api，這樣才不會太盲目而花費太多時間。
2、工業流程圖
工業流程圖
