复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GoJS实例</title> <style> #myDiagramDiv { width: 400px; height: 500px; background-color: #DAE4E4; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="https://unpkg.com/gojs/release/go-debug.js"></script> </head> <body> <div id="myDiagramDiv"></div> <script> //为了简洁 var $ = go.GraphObject.make; var diagram = new go.Diagram("myDiagramDiv"); //节点模板描述如何构建每个节点 diagram.nodeTemplate = $(go.Node, "Auto", //形状自动填充适合 $(go.Shape, "RoundedRectangle", // 使用圆角长方形 // 将Shape.fill绑定到Node.data.color new go.Binding("fill", "color")), $(go.TextBlock, { margin: 3 //文字的间距 }, // 将TextBlock.text绑定到Node.data.key new go.Binding("text", "key")) ); // 模型仅包含描述图表的基本信息 diagram.model = new go.GraphLinksModel( //两个JavaScript对象数组 [ // 添加“颜色”属性 { key: "Alpha", color: "lightblue" }, { key: "Beta", color: "orange" }, { key: "Gamma", color: "lightgreen" }, { key: "Delta", color: "pink" } ], [ // 数组中的连接数据 { 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; // 启用Ctrl-Z撤消和Ctrl-Y重做 diagram.undoManager.isEnabled = true; </script> </body> </html>