轉載自：http://www.cnblogs.com/landeanfen/

閱讀目錄

• 一、元件效果預覽
• 二、初次接觸
  • 1、Gojs簡介
  • 2、使用入門
• 三、綜合效果
  • 1、自定義流程的使用
  • 2、工業流程圖
• 四、總結

正文

前言：之前分享過兩篇關於流程畫圖的前端元件，使用的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裡面給我們提供了幾種模型節點的可選項：

• 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' },然後通過newgo.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、工業流程圖