JavaScript圖表圖形框架 -- GOJS簡介
gojs是一個能夠讓我們很容易的實現基于html5瀏覽器繪制具有交互性的圖形圖表的JavaScript框架。 gojs采用了面向對象的編程模式。以圖形對象表示繪圖模板。以用普通js對象存儲數據作為數據模型，然后賦值給圖形對象的屬性作為數據綁定的模式。 gojs同樣提供了大量工具類來代表我們的交互行為。我們需要做的就是創建圖形對象、構建數據模型、設置屬性、綁定數據模型、使用工具類添加行為即可創建 出具有豐富交互性能的各種圖表。
一個簡單的gojs圖表
下面的代碼定義了一個node模板和數據模型，并它們構建了一個簡單的圖表：
// For conciseness. See the "Building Parts" intro page for more
var $ = go.GraphObject.make;
// the node template describes how each Node should be constructed
diagram.nodeTemplate =
$(go.Node, "Auto", // the Shape automatically fits around the TextBlock
$(go.Shape, "RoundedRectangle",
// bind Shape.fill to Node.data.color
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 3 }, // some room around the text
// bind TextBlock.text to Node.data.key
new go.Binding("text", "key"))
);
// the Model holds only the essential information describing the diagram
diagram.model = new go.GraphLinksModel(
[ // a JavaScript Array of JavaScript objects, one per node
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[ // a JavaScript Array of JavaScript objects, one per link
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
diagram.initialContentAlignment = go.Spot.Center;
// enable Ctrl-Z to undo and Ctrl-Y to redo
diagram.undoManager.isEnabled = true;</pre><br />
結果：
雖然上面展示的是圖片，但是實際上我們可以在這個圖表上用鼠標中鍵滾動、選中、刪除、重做、撤銷等等交互。
gojs的基本概念
上面的示例是讓我們先在感官上認知一下gojs的產出物，下面我們來闡述一下gojs的基本概念。
gojs繪制的圖表（Diagram）具有兩個最基本的元素，就是點和線（Node和Link），并且他們可以自由組合組成一個組（Group）。所有的元素都處在圖層（Layer）上，并且可以對它們進行布局（Layout）。
每個Diagram都是通過數據模型（Model）來填充和確定Node的信息和Link的所屬關系的。并且我們只需要創建好Node和Link的模板以及數據模型，其他的是事情都交給gojs去處理。它會通過Model.nodeDataArray方法和GraphLinksModel.linkDataArray方法自動加載模型并構建元素。
每一個Node和Link都是通過模板來描述他們的文本、形狀、顏色等信息以及交互行為。每個模板其實就是一個面板（Panel）（你可以將各種元素自由組合在它里面，也可以在它里面添加各種交互行為），比如說將TextBlock、Shape、Picture等元素添加到這個Panel中，鼠標進入離開的交互行為也可以添加到Panel中，那么這個Panel就是一個模板。
每個Node的位置可以使用Diagram.layout或Group.layout進行初始化設置，也可以基于交互行為進行拖拽。
gojs里的工具類可以為Diagram添加鼠標、鍵盤事件。一般情況下Diagram都默認設置了幾種交互行為，比如說拖拽、連線。我們也可以通過ToolManager對象來管理工具類，或者說來管理交互行為，比如說可以停止某些交互，或開啟某些交互等。
每個Diagram同時也包含CommandHandler對象，它的作用是添加一些鍵盤命令，比如點Delete鍵刪除元素，Ctrl+C復制、Ctrl+V粘貼、Ctrl+Z撤銷等。但是CommandHandler也是被ToolManager管理的。
Diagram也提供通過鼠標中鍵滾動視圖、放大縮小視圖。
gojs還提供了圖表的預覽視圖（Overview），用于了解大規模圖表的概況，同時還提供了組件管理面板（Palette），用于管理創建的組件，并且支持將組件拖拽到Diagram中。
在Diagram中，你可以選中Node或者Link，你會發現他們有少許的變化，比如在Node周圍會增加選中框，選中Link會變色等。這些都是由Adornment對象控制的，你還可以用它來增加提示框、右鍵菜單等。
Diagram默認的交互行為
- 選中Node或者Link，會出現藍色選中框，Link也會變為藍色。
- 使用Ctrl+鼠標左鍵可以選中多個元素。
- 在Panel中點擊鼠標左鍵移動鼠標可以移動所有元素。
- 使用Ctrl+A可以選中所有元素。
- 選中元素，用鼠標可以拖動元素。
- 使用Ctrl+C/Ctrl+V可以復制粘貼元素。
- 使用Delete鍵可以刪除元素。
- 選中多個元素，然后使用Ctrl+G可以將這些選中的元素組合成一個組。
- 使用Ctrl+Shift+G可以拆散組。
- 當元素超出Diagram時，可自動出現滾動條。
- 用鼠標拖拽Node邊緣可以與其他Node進行連線。
- 選中Link，可以重新選擇目標Node，即可以重新連線。 </ul>
創建一個Diagram
每個Diagram都需要依托與一個HTML的DIV元素，雖然由gojs接管了這個DIV，但是DIV本身的屬性依然可以由我們通過CSS設置，比如位置、高寬等。gojs實際上是在DIV中創建了一個Canvas元素，Canvas的高寬自動適配DIV的高寬。
<!-- The DIV for a Diagram needs an explicit size or else we won't see anything.
In this case we also add a border to help see the edges. -->
<div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>當然，當你準備開始創建Diagram前，首先要導入gojs的文件。gojs的文件分為Develop（gojs-debug.js）和Product（gojs.js）兩種，前者是供開發人員使用的，因為它包含了一些用于調試的代碼，后者用于正式發布，速度較快。gojs不依賴與任何JavaScript框架，所以它可以與任何JavaScript框架一起使用，而不會產生沖突。
<!-- Include the GoJS library. -->
<script src="gojs.js"></script>下面就可以使用gojs將上述的DIV構建為一個Diagram了，這里需要注意的是，使用gojs的api時，都要使用前綴go.。
<!-- Create the Diagram in the DIV element using JavaScript. -->
<!-- The "go" object is the "namespace" that holds all of the GoJS types. -->
<script>
var diagram = new go.Diagram("myDiagramDiv");
diagram.model = new go.GraphLinksModel(
[{ key: "Hello" }, // two node data, in an Array
{ key: "World!" }],
[{ from: "Hello", to: "World!"}] // one link, in an Array
);
</script>
來自：http://www.devtalking.com/articles/gojs-simple-diagram/