Gojs 快速入门

JavaScript016

Gojs 快速入门,第1张

一、前言

Gojs提供了很多API给我们使用,下面只是提供完成关系图表(如下图)的某种方法,用其他方法也可以实现同样的效果。

二、准备图表数据

1、节点数据:

2、关系数据:

三、开始画图

由上图可以分析得到,图表由节点、文字、线、箭头组成。

1、创建图表

2、新建节点

3、设置线条和箭头

4、其他设置

5、新建关系图

这里只是简单介绍如何快速完成一个关系图,当然如果你想改成树形图或者改箭头为闭合,改形状为圆形,插入图片等等,强大的gojs都能帮你实现,而且有完善的api和例子可以参考。

参考链接:

https://gojs.net/latest/index.html

https://gojs.net/latest/intro/viewport.html

var Go = go.GraphObject.make

var myDiagram = Go(go.Diagram,"myDiagram", //引号内是自己的div的id

    {

    scale:1.0,    //初始视图大小比例

    minScale:0.5,//最小视图的缩小比例

    maxScale:1.5,//最大视图的放大比例

}

)