gojs繪流程圖

引用：http://www.tuicool.com/articles/eEruaqu

　　　http://www.open-open.com/lib/view/open1435023502544.html

gojs是一個能夠讓我們很容易的實現基於html5瀏覽器繪制具有交互性的圖形圖表的JavaScript框架。 gojs采用了面向對象的編程模式。以圖形對象表示繪圖模板。以用普通js對象存儲數據作為數據模型，然后賦值給圖形對象的屬性作為數據綁定的模式。 gojs同樣提供了大量工具類來代表我們的交互行為。我們需要做的就是創建圖形對象、構建數據模型、設置屬性、綁定數據模型、使用工具類添加行為即可創建 出具有豐富交互性能的各種圖表

一個簡單的流程圖

1.HTML

<div id="myDiagram" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

2.$是一個全局變量，全局變量相當於一個畫筆，我們先定義一個畫筆工具。之后我們就可以通過 $ 符號來調用它自身的一些方法、屬性、枚舉對象等

var $ = go.GraphObject.make;//

3.有了畫筆，還需要畫布，於是我們需要定義一個畫布用來裝載一些具體內容

var myDiagram =$(go.Diagram, //定義的畫布
"myDiagram",//要渲染的DIV 的Id 名稱,1中html中的id
{
    initialAutoScale: go.Diagram.Uniform,
    contentAlignment: go.Spot.Center,//對齊方式
    layout://畫布里的元素布局方式　　　　
　　$(go.ForceDirectedLayout,{ 
     　　defaultSpringLength: 30, 
     　　defaultElectricalCharge: 100 
     　　})
 });

這個畫筆可以繪制節點、鏈接、區域、圖案、形狀、文本等

4.畫筆繪制了一個文本對象 go.TextBlock ，並為它填充了屬性 text、stroke、font、margin

$(go.TextBlock,{
 text:"www.peng8.net",  stroke: "red",  font: "bold 10pt helvetica, bold arial, sans-serif",  margin: 4 })

5.gojs繪制的圖表（Diagram）具有兩個最基本的元素，就是點和線（Node和Link），並且他們可以自由組合組成一個組（Group）。所有的元素都處在圖層（Layer）上，並且可以對它們進行布局（Layout）。

5.1Node

myDiagram.nodeTemplate = $(go.Node, "Auto",
       $(go.Shape, "RoundedRectangle",//形狀:一個 圓角矩形 ，默認填充色為 白色，邊框顏色為 紅色
               {
                   fill: "white",
                   stroke: "red"
               },
               new go.Binding("fill", "color")
       ),
       $(go.TextBlock,//文本
             {
                  font: "bold 10pt helvetica, bold arial, sans-serif",
                  margin: 4
              },
           new go.Binding("text", "text"))//申明動態綁定text屬性，將數據源中提供text字段的值賦值給當前的text屬性
);

5.2Link
myDiagram.linkTemplate =
 $(go.Link, 
 { adjusting: go.Link.Stretch, reshapable: true },
 new go.Binding("points").makeTwoWay(),
 $(go.Shape, //用來畫線
 {
 isPanelMain: true,
 stroke: "black"
 }),
 $(go.Shape, //用來畫箭頭
 {
 toArrow: "standard",
 stroke: null
 }),
 $(go.TextBlock, //用來顯示線上的label
 {
 textAlign: "center",
 segmentOffset: new go.Point(0, -10),
 font: "10pt helvetica, arial, sans-serif",
 stroke: "#555555",
 margin: 4
 },
 new go.Binding("text", "text")
 )
 );

6.每個Diagram都是通過數據模型（Model）來填充和確定Node的信息和Link的所屬關系的。並且我們只需要創建好Node和Link的 模板以及數據模型，其他的是事情都交給gojs去處理。它會通過Model.nodeDataArray方法和 GraphLinksModel.linkDataArray方法自動加載模型並構建元素。

　　jsonList 是我前端定義用來接收ajax返回數據的一個對象

var jsonList = {
       nodeKeyProperty: "key", //關聯的主鍵
       nodeDataArray: [{key:1,text:"節點1"},
　　　　　　　　　　　　　{key:2,text:"節點2"},
　　　　　　　　　　　　　{key:3,text:"節點3"},
　　　　　　　　　　　　　{key:4,text:"節點4"},
　　　　　　　　　　　　　{key:5,text:"節點5"},
　　　　　　　　　　　　 {key:6,text:"節點6"}],//節點數據
       linkDataArray: [{from:1,to:2},
　　　　　　　　　　　　　 {from:2,to:3},
　　　　　　　　　　　　　 {from:2,to:5},
　　　　　　　　　　　　　 {from:3,to:6},
　　　　　　　　　　　　　 {from:5,to:4}]//點對應關系數據 ，上面from 和to 即 開始節點的主鍵指向結束節點的主鍵
};

7.最后就是如何給流程圖填充動態數據了，這里我采用了json的方式，流程圖賦值就是一句話就夠了
myDiagram.model = go.Model.fromJson(jsonList);

8.效果圖：很粗糙的一張圖

 

 

 

 

 

 

GoJS是一個JavaScript庫，讓你輕松創建現代Web瀏覽器的交互圖。 GoJS支持圖形化的模板和圖形對象屬性數據模型的數據綁定。你只需要保存和恢復模型，包括持有任何性質的應用需求，簡單的JavaScript對象。許 多預定義的工具和命令執行，大部分的圖表所需要的標准的行為。外觀和行為的定制是大多設置屬性的問題