五分鍾搞定Go.js
1、基於html5~因為Go.js是一個依賴於HTML5特性的JavaScript庫，所以需要確保您的頁面聲明它是一個HTML5文檔，當然需要加載庫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="An organization chart editor -- edit details and change relationships." /> <title>數據圖形化</title> <script src="js/go.js"></script> </head>
2、每個Go.js圖都包含在HHTML元素中，我們需要給出一個顯示的大小
<div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>
3、在JavaScript代碼中，繪制圖表時需要傳遞ID
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv");
注意：go是所有Gojs類型的“名稱空間”。所有使用GoJs類的代碼，如圖表、節點、面板、形狀或文本塊，都以go做為前綴。
make來構建Gojs對象，使用$作為go.GraphObject的縮寫。圖中的加點和鏈接是由模型管理數據的可視化表示。GoJs有一個模型視圖系統結構，其中模型包含描述節點和鏈接的數據（JavaScript對象數組）
基礎圖例代碼
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo }); var myModel = $(go.Model); // in the model data, each node is represented by a JavaScript object: myModel.nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" } ]; myDiagram.model = myModel;
簡單介紹下以下幾個小功能：
（1）在上圖中單擊並拖動背景以平移視圖 （2）單擊一個節點來選擇它，或者按下並拖動一個節點來移動它 （3）要創建一個選擇框，單擊並按住背景，然后開始拖動 （4）使用CTRL-C和CTRL-V，或control-drag- drop，創建選擇的副本 （5）按Delete鍵刪除選中的節點。(閱讀更多鍵盤命令。) （6）由於啟用了撤消管理器，CTRL-Z和CTRL-Y將撤消和重做移動、復制和刪除操作。
4、一些屬性的使用：
“shape”:用顏色顯示預先定義或自定義的幾何圖形
“TextBlock”以各種字體顯示（可編輯文本）
“Picture”用來顯示圖片
“Panel(面板)”,用來存放其他對象集合的容器，這些對象可以根據面板的類型以不同的方式驚醒定位和大小調整（如垂直堆棧和拉伸容器）
所有這些構建塊都來自於GraphObject抽象類，因此我們隨意地將它們稱為GraphObject、對象或元素。注意，GraphObject不是HTML DOM元素，因此在創建或修改方面沒有太多開銷 我們希望模型數據屬性影響我們的節點，這是通過數據綁定實現的。數據綁定允許我們通過自動設置這些GraphObjects的屬性值來更改節點中的GraphObjects的外觀和行為
使用介紹： 默認的節點模板很簡單:一個包含一個文本塊的節點。文本塊的文本屬性和模型數據的鍵屬性之間有數據綁定。在代碼中，模板看起來是這樣的: myDiagram.nodeTemplate = $(go.Node, $(go.TextBlock, // TextBlock.text is bound to Node.data.key new go.Binding("text", "key")) ); 注意：文本塊、形狀和圖片是GoJS的原始構建塊。文本塊不能包含圖像;形狀不能包含文本。如果想讓節點顯示一些文本，必須使用文本塊。
5、
創建簡單的圖形面板 一種“水平”面板類型的節點，意味着其元素將被水平並排地放置。它有兩個要素： （1）一個圖片為肖像，與圖像源數據綁定 （2）帶有文本數據綁定的名稱文本塊
6、
可以設置默認顯示的內容 我們可能希望在不是所有信息都存在的情況下顯示一些“默認”狀態，例如當圖像不加載或不知道名稱時。本例中的“空”節點數據用於顯示節點模板在沒有值的情況下可以很好地工作
7、
使用自定義節點模板， 我們的關系圖變得非常漂亮，但是我們可能想要展示更多。也許我們需要一張組織結構圖來證明唐·喵真的是一個貓卡特爾的老板。所以我們將創建一個完整的組織結構圖 為了讓鏈接進入我們的圖表，基本模型不會削減它。我們將不得不在GoJS中選擇另外兩個模型中的一個，這兩個模型都支持鏈接。這些是GraphLinksModel和TreeModel。(請閱讀更多關於模型的內容。)
8、
樹模板的使用 樹模有點不同。樹模型中的鏈接不是維護單獨的鏈接數據數組，而是通過為節點數據指定“父”來創建的。然后從這個關聯創建鏈接。這里有一個和Tr相同的例子
9、
圖的布局 圖有一個默認布局，它接受所有沒有位置的節點，並給它們位置，將它們安排在網格中。我們可以顯式地為每個節點提供一個位置，以解決組織混亂的問題 我們想要顯示一個層次結構，並且已經在使用TreeModel，所以最自然的布局選擇是TreeLayout。TreeLayout默認從左到右流動，所以為了讓它從上到下流動(這在組織圖中很常見)
大家自己可以嘗試啦!!!!!!!!!!!