gojs入门

gojs是一个用来生成数据流程图,关系图等常用软件工程图表的javascrit库, 下面我们将利用gojs来制作一个简单的离散数学中的关系图。首先我们要生成一个空白的html模板。 

1 doctype html>
2 <html>
3 <head>
4 head>
5 
6 <body>
7  <div id="myDiagramDiv"  style="width:700px; height:150px">div>
8  body>
9 html>

 

在上面代码的第8行中我们生成了一个div容器,之后我们所有的流程图绘制结果都会在div容器里面显示。

1 <head>
2 <script src="https://unpkg.com/gojs/release/go.js">script>
3 head>

为了使用gojs库,我们需要在里面加入对gojs的引用,这行代码类似于C++里通过include来引入头文件。接下来我们就要加入gojs代码,第一步是建立一个空的初始化函数叫作init()。

 1 doctype html>
 2 <html>
 3 <head>
 4   
 5 
 6   <script src="https://unpkg.com/gojs/release/go-debug.js">script>
 7 
 8   <script>
 9     function init() {
10      
11     }
12     
13     script>
14 head>
15 
16 <body onload="init()">
17     <div id="myDiagramDiv" class="diagramStyling" style="width:700px; height:150px">div>
18     
19 body>
20 html>

上面的8-13行我们生成了一个init函数,以后所有的gojs代码都写在init函数里面,在第16行body标签里面我们把这个函数赋值给onload属性,即在网页加载的时候立刻就调用这个init函数。

1 function init() {
2       var $ = go.GraphObject.make; 
6     }

在init函数的第一行我们将go.GraphObject.make这个名称赋值给$变量,在gojs中分为视图(diagram)和模型(model)两个对象,这两个对象都需要通过go.GraphObject.make这个构造函数来创建,由于构造函数名字比较长所以我们以后用$来代替它,节省打字时间。

1 function init() {
2       var $ = go.GraphObject.make;
3        myDiagram = $(go.Diagram, "myDiagramDiv");
7     }

接下来我们通过$构造方法创建视图对象myDiagram, 该构造方法接受两个参数,第一个参数是对象类型,这里是视图,用go.Diagram表示。(ps: gojs中的内建变量都要加上go.这个前缀。)。第二个参数是div容器的id。 

 

1 function init() {
2       var $ = go.GraphObject.make;
3        myDiagram = $(go.Diagram, "myDiagramDiv");
4        var myModel = $(go.Model);
5 }

创建完视图对象后,我们用$构造器创建了一个模型叫作myModel,构造方法在创建模型时只需要指出模型的类型即可,在这里我们的类型是go.Model, 即只包含点不包含边的最简单模型。

 1 function init() {
 2       var $ = go.GraphObject.make;
 3         myDiagram = $(go.Diagram, "myDiagramDiv");
 4        var myModel = $(go.Model);
 5 myModel.nodeDataArray = [
 6   { key: "Alpha" },
 7   { key: "Beta" },
 8   { key: "Gamma" }
 9 ];
10 }

 如上面代码所示,go.Model类型有一个叫作nodeDataArray的属性,该属性是一个数组,每个数组元素是一个节点,格式是{key:  “节点的名字” } 。最后,我们把模型myModel赋值给myDiagram后即可以显示我们的图表。

 1 function init() {
 2       var $ = go.GraphObject.make;
 3         myDiagram = $(go.Diagram, "myDiagramDiv");
 4        var myModel = $(go.Model);
 5 // in the model data, each node is represented by a JavaScript object:
 6 myModel.nodeDataArray = [
 7   { key: "Alpha" },
 8   { key: "Beta" },
 9   { key: "Gamma" }
10 ];
11 myDiagram.model = myModel;
12 
13   }

下面是效果图:

gojs入门_第1张图片

 上面的效果图只有三个人的名字,他们之间没有连线,如果想在节点之间连线,我们需要把go.model模型替换成go.GraphLinksModel模型,通过GraphLinksModel的linkDataArray数组属性来加入节点之间的边的信息。linkDataArray 每个数组元素代表一条边,格式如下{ to:"边的终点名字", from:"边的起点名字"}, 代码如下:

 1  function init() {
 2       var $ = go.GraphObject.make;
 3         myDiagram = $(go.Diagram, "myDiagramDiv");
 4        var myModel = $(go.GraphLinksModel);
 5 // in the model data, each node is represented by a JavaScript object:
 6 myModel.nodeDataArray = [
 7   { key: "Alpha" },
 8   { key: "Beta" },
 9   { key: "Gamma" }
10 ];
11 myModel.linkDataArray = [
12 { to:"Alpha",from:"Beta"},
13 {to:"Beta",from:"Gamma"}
14 ]
15 myDiagram.model = myModel;
16 
17  }

效果如下所示:

gojs入门_第2张图片

 

 完整代码如下:

 1 doctype html>
 2 <html>
 3 <head>
 4   
 5   <script src="https://unpkg.com/gojs/release/go.js">script>
 6 
 7   <script>
 8     function init() {
 9       var $ = go.GraphObject.make;
10         myDiagram = $(go.Diagram, "myDiagramDiv");
11         var myModel = $(go.GraphLinksModel);
12 // in the model data, each node is represented by a JavaScript object:
13 myModel.nodeDataArray = [
14   { key: "Alpha" },
15   { key: "Beta" },
16   { key: "Gamma" }
17 ];
18 myModel.linkDataArray = [
19 { to:"Alpha",from:"Beta"},
20 {to:"Beta",from:"Gamma"}
21 ]  
22    myDiagram.model=myModel; 
23 
24     }
25     script>
26 head>
27 
28 <body onload="init()">
29     <div id="myDiagramDiv" style="width:700px; height:150px;border:1px solid black;">div>
30     
31 body>
32 html>

 

你可能感兴趣的:(gojs入门)