[TOC] > [example](https://gojs.net/latest/samples/index.html) > [官網](https://gojs.net/latest/learn/index.html) > [Api](https://gojs.net/latest/api/index.html) ## 概述 Gojs是一個用于實現交互式圖表的JavaScript庫。 ## 提示 ### 取消水印 找到 "7eba17a4ca3b1a8346" 把 "=" 右邊替換掉 注意 a.ax 可能會不同 ``` a.ax = d[u.Da("7eba17a4ca3b1a8346")][u.Da("78a118b7")](d, u.wl, 4, 4); //替換成 a.ax = function(){return true;} ``` ## 實例 ### hello-world ``` <script src="https://unpkg.com/gojs/release/go-debug.js"></script> <div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div> <script> const myDiagram = new go.Diagram("myDiagramDiv", { // enable Ctrl-Z to undo and Ctrl-Y to redo "undoManager.isEnabled": true }); myDiagram.model = new go.Model( [ // for each object in this Array, the Diagram creates a Node to represent it { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" } ]); </script> ```  * 單擊并拖動上圖中的背景以平移視圖。 * 單擊一個節點以選擇它，或按下并拖動一個節點以移動它。 * 要創建選擇框，請單擊并按住背景，然后開始拖動。 * 使用 Ctrl-C 和 Ctrl-V 或控制拖放來制作所選內容的副本。（在 MacOS 上使用 Command 鍵而不是 Control 鍵作為修飾符。） * 按 Delete 鍵刪除選定的節點。（閱讀更多[鍵盤命令](https://gojs.net/latest/intro/commands.html)。） * 在觸摸設備上，按住以調出上下文菜單。（閱讀[上下文菜單](https://gojs.net/latest/intro/contextMenus.html)。） * 由于啟用了撤消管理器，Ctrl-Z 和 Ctrl-Y 將撤消和重做移動以及復制和刪除。 ### 鏈接模板 ``` const myDiagram = new go.Diagram("myDiagramDiv", { "undoManager.isEnabled": true, layout: new go.TreeLayout({ angle: 90, layerSpacing: 35 }) }); myDiagram.nodeTemplate = new go.Node("Horizontal", { background: "#44CCFF" }) .add(new go.Picture( { margin: 10, width: 50, height: 50, background: "red" }) .bind("source")) .add(new go.TextBlock("Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" }) .bind("text", "name")); // define a Link template that routes orthogonally, with no arrowhead myDiagram.linkTemplate = new go.Link( // default routing is go.Link.Normal // default corner is 0 { routing: go.Link.Orthogonal, corner: 5 }) // the link path, a Shape .add(new go.Shape({ strokeWidth: 3, stroke: "#555" })) // if we wanted an arrowhead we would also add another Shape with toArrow defined: //.add(new go.Shape({ toArrow: "Standard", stroke: null })) // it's best to declare all templates before assigning the model myDiagram.model = new go.TreeModel( [ { key: "1", name: "Don Meow", source: "cat1.png" }, { key: "2", parent: "1", name: "Demeter", source: "cat2.png" }, { key: "3", parent: "1", name: "Copricat", source: "cat3.png" }, { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" }, { key: "5", parent: "3", name: "Alonzo", source: "cat5.png" }, { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" } ]); ```