一、简单使用:
1、引入方法:
(1)下载GoJs,本地引入:
<script src="go-debug.js"></script>
(2)通过CDNJS提供的方式引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.15/go-debug.js"></script>
2、创建盒子,创建一个明确尺寸的div
<div id="myDiagramDiv" style="width:700px; height:600px; background-color: #f40;"></div>
3、在javaScript代码中,制定在div下创建图标
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv");
这样就创建好一个空的图标。
以上三个步骤是使用GO.JS创建开始必须要做的三个步骤。
注意,go是命名空间,所有的GoJs的类型都依赖于它,所有使用GoJs的类例如Diagram 、Node 、 Panel 、Shape 、 TextBlock都需要加前缀go.。
4、完整例子代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv" style="width:700px; height:600px; background-color: #DAE4E4;"></div>
<script>
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv");
</script>
</body>
</html>
5、一个完整的案例,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv" style="width:700px; height:600px; background-color: #DAE4E4;"></div>
<script>
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv", {
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{
angle: 90,
layerSpacing: 35
})
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal", {
background: "#44CCFF"
},
$(go.Picture, {
margin: 10,
width: 50,
height: 50,
background: "red"
},
new go.Binding("source")),
$(go.TextBlock, "Default Text", {
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
new go.Binding("text", "name"))
);
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link, {
routing: go.Link.Orthogonal,
corner: 5
},
$(go.Shape, {
strokeWidth: 3,
stroke: "#555"
})); // the link shape
var model = $(go.TreeModel);
model.nodeDataArray = [{
key: "1",
name: "Don Meow",
source: "/images/learn/cat1.png"
},
{
key: "2",
parent: "1",
name: "Demeter",
source: "/images/learn/cat2.png"
},
{
key: "3",
parent: "1",
name: "Copricat",
source: "/images/learn/cat3.png"
},
{
key: "4",
parent: "3",
name: "Jellylorum",
source: "/images/learn/cat4.png"
},
{
key: "5",
parent: "3",
name: "Alonzo",
source: "/images/learn/cat5.png"
},
{
key: "6",
parent: "2",
name: "Munkustrap",
source: "/images/learn/cat6.png"
}
];
myDiagram.model = model;
</script>
</body>
</html>
如想深度学习请在(gojs.net.cn/intro/index…) 上进行学习。