GoJS是一個用於實現交互式圖表的JavaScript庫。本頁將向您展示使用GoJS的必要條件。
由於GoJS是一個依賴於HTML5功能的JavaScript庫，因此您需要確保您的頁面聲明它是一個HTML5文檔。當然，您需要加載庫：
<!DOCTYPE html> <!-- HTML5 document type --> <html> <head> <!-- use go-debug.js when developing and go.js when deploying --> <script src="go-debug.js"></script> . . .
您可以在這里下載GoJS（和所有樣本）。或者你可以直接鏈接到GoJS提供圖書館CDNJS：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.8/go-debug.js"></script>
每個GoJS圖都包含在<div>HTML頁面中的HTML 元素中，您可以給出明確的大小：
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything. In this case we also add a background color so we can see that area. --> <div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>
在JavaScript代碼您傳遞<div>的id制作圖表時：(一起創建一個空圖：)
var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv");
注意go是所有GoJS類型所在的“命名空間” 。GoJS類的所有代碼使用，如Diagram或Node或Panel或Shape或TextBlock都將以“ go.” 作為前綴。
本文將向您展示如何使用go.GraphObject.make構建GoJS對象。有關更多詳細信息，請參閱GoJS中的構建對象。使用$作為縮寫go.GraphObject.make 是非常方便，我們將從現在開始使用它。如果你使用$的其他代碼中的東西，你總是可以選擇一個不同的短變量名稱，如$$或MAKE或GO。
圖表和模型
圖的節點和鏈接是由模型管理的數據的可視化。 GoJS有一個模型視圖體系結構，其中，Model擁有描述節點和鏈接的數據（JavaScript對象的數組），而Diagrams作為視圖來使用實際的Node和Link對象可視化這些數據。模型，而不是圖表，是您加載的，然后編輯后保存。您可以在模型中的數據對象上添加應用程序所需的任何屬性; 您不添加屬性或修改Diagram和GraphObject類的原型。
下面是一個Model和Diagram的例子，其后面是它生成的實際圖表：
ar $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv", { initialContentAlignment: go.Spot.Center, // center Diagram contents "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;
該圖顯示了模型中的三個節點。一些互動已經成為可能：
- 單擊並拖動上圖中的背景以平移視圖。
- 單擊一個節點進行選擇，或者按下並拖動一個節點來移動它。
- 要創建選擇框，請單擊並按住背景，然后開始拖動。
- 使用CTRL-C和CTRL-V，或者控制拖放來制作選擇的副本。
- 按Delete鍵刪除所選節點。（閱讀更多鍵盤命令。）
- 由於啟用了撤銷管理器，因此CTRL-Z和CTRL-Y將會撤消並重做移動和復制和刪除。
樣式節點
節點通過創建由GraphObjects組成的模板和在這些對象上設置屬性來設計風格。為了創建一個Node，我們有幾個構建塊類可供我們使用：
所有這些構建塊都是從 GraphObject抽象類派生的，所以我們隨便將它們引用為GraphObjects或對象或元素。請注意，GraphObject 不是 HTML DOM元素，因此在創建或修改此類對象時沒有太多的開銷。
我們希望模型數據屬性影響我們的節點，這是通過數據綁定的方式完成的。數據綁定允許我們通過自動將這些GraphObjects上的屬性設置為從模型數據中獲取的值來更改節點中GraphObjects的外觀和行為。模型數據對象是純JavaScript對象。您可以選擇在模型中的節點數據上使用您喜歡的任何屬性名稱。
默認的Node模板很簡單：包含一個TextBlock的Node。TextBlock的text屬性和模型數據的key屬性之間存在數據綁定。在代碼中，模板看起來像這樣：