[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" } ]); ```