可视化图表库--goJS详细学习线路

1.GoJS简介

GoJS是Northwoods Software的产品。Northwoods Software创立于1995年，专注于交互图控件和类库。旗下四款产品：

GoJS	用于在HTML上创建交互图的纯javaSCript库
GoDiagram	用于WinForms的.NET图控件。
GoXam	用于WPF/Silverlight的图控件。( Silverlight是一个跨浏览器的、跨平台的插件, 与flash竞争的富客户端技术)
JGo	用于Swing/SWT中创建交互图的java库

 

1.1 GoJS可以做什么? 

GoJS是一个实现交互类可视化图表（比如流程图，柱状图 ，线形图 ，树图，关系图， 蜡烛图 ，力导图，决策树 ，思维导图，管道图，进度图等等）的JS库。GoJS为用户交互提供了许多高级功能，如拖放，删除，复制和粘贴，撤销与重做，文本编辑，工具提示，上下文菜单，自动布局，数据绑定和模型，事务状态和撤销管理，事件处理程序，命令以及用于自定义操作的可扩展工具系统等等。

1.2 为什么使用GoJS

用对象数据表达数据之间的逻辑关系,远不如用图像展示形象直观 ，一图胜千言，为了更直观地表达信息，我们常常需要用图形来展示数据以及逻辑关系。goJS图表种类，交互行为丰富，自定义模板灵活，已经有非常多的图表例子，支持复杂的模板定义和数据绑定，足够解决实际业务中的常见图表需求。
 

2. GoJS概念

 

图表（Diagram）

所有GoJS的属性和方法都在go这个命名空间下。所有GoJS的类名，例如Diagram、Node、Panel、 Shape、TextBlock也都使用go作为前缀，go.GraphObject.make来创建一个GoJS对象

GoJS图表即最后看到的可视化视图，它是由这些部分构成的：一个或多个可能有连接关系的、可能成组的节点。所有这些节点和链路聚集在相同或不同的层中，并呈现出一定的布局（开发者预定好的或GoJS自动布局）。

 

 Diagram（图表属性）

画布图表基本配置

画布初始位置(定义之后就不能拖动了)	initialContentAlignment: go.Spot.Center
初始坐标	initialPosition: new go.Point(0, 0)
禁止移动节点	allowMove:false
禁止复制	allowCopy: false
禁止删除	allowDelete:false
禁止选中	allowSelect:false
禁止缩放	allowZoom: false
禁止撤销和重做	"undoManager.isEnabled": false
禁止水平拖动画布 禁止水平滚动条	allowHorizontalScroll: false
禁止垂直拖动画布 禁止垂直滚动条	allowVerticalScroll: false
只读	isReadOnly: true
画布初始化动画时间	"animationManager.duration": 600
禁止画布初始化动画	"animationManager.isEnabled": false
画布比例	scale:1.5
画布最小比例	minScale:1.2,
画布最大比例	maxScale:2.0,
显示网格	"grid.visible":true,
禁止鼠标拖动区域选中	"dragSelectingTool.isEnabled" : false,
画布边距padding Margin	padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)

 

 
 

更多设置参见 https://gojs.net/latest/api/symbols/Diagram.html

2.1 MV架构

GoJs使用model-view（MV架构）的模式,Models作为数据层来管理那些描述性的数据（JS数组对象），Diagrams则负责视图层，将Nodes和Links的数据以可视化的方式渲染出来。Diagrams中的Nodes（节点）和Links（连线）呈现是由Model进行管理的。model和Diagrams实现了数据绑定，通过监听Model数据，自动改变Nodes上的GraphObjects外观和行为。Model数据对象是一个普通的JavaScript对象。我们编程操作只针对Model的数据层，而不是Diagrams的视图层。可以按照业务需求在Models数据对象上面添加任意属性，一般不需要修改Diagram的prototype（原型）和GraphObject（绘图单元）的classes（类）.

 

数据绑定是指从源对象中提取值并在目标对象上设置属性。目标对象就是图形对象（GraphObject），源对象是模型中保存的js数据对象。

使用模板和数据绑定简化了存储在模型数据中的信息，灵活性非常强。当然并不是所有的数据属性都需要绑定使用

go.Binding VS 双向数据绑定（Two-way data binding）

go.Binding绑定只将属性的值从源数据转移到目标对象。但有时我们希望能够将GraphObject中的值传输回模型数据，使得模型数据与ui界面的图标中的数据保持一致。这可以通过使用TwoWay 绑定，它可以完成从源数据到目标对象，以及从目标对象到源数据的值传递。

2.2 图表（Diagram）

所有GoJS的属性和方法都在go这个命名空间下。所有GoJS的类名，例如Diagram、Node、Panel、 Shape、TextBlock也都使用go作为前缀，go.GraphObject.make来创建一个GoJS对象

GoJS图表即最后看到的可视化视图，它是由这些部分构成的：一个或多个可能有连接关系的、可能成组的节点。所有这些节点和链路聚集在相同或不同的层中，并呈现出一定的布局（开发者预定好的或GoJS自动布局）。

 Diagram（图表属性）

画布初始位置(定义之后就不能拖动了)	initialContentAlignment: go.Spot.Center
初始坐标	initialPosition: new go.Point(0, 0)
禁止移动节点	allowMove:false
禁止复制	allowCopy: false
禁止删除	allowDelete:false
禁止选中	allowSelect:false
禁止缩放	allowZoom: false
禁止撤销和重做	"undoManager.isEnabled": false
禁止水平拖动画布 禁止水平滚动条	allowHorizontalScroll: false
禁止垂直拖动画布 禁止垂直滚动条	allowVerticalScroll: false
只读	isReadOnly: true
画布初始化动画时间	"animationManager.duration": 600
禁止画布初始化动画	"animationManager.isEnabled": false
画布比例	scale:1.5
画布最小比例	minScale:1.2,
画布最大比例	maxScale:2.0,
显示网格	"grid.visible":true,
禁止鼠标拖动区域选中	"dragSelectingTool.isEnabled" : false,
画布边距padding Margin	padding:80或者new go.Margin(2, 0)或new go.Margin(1, 0, 0, 1)

 

更多设置参见 https://gojs.net/latest/api/symbols/Diagram.html

2.3 模型（Model）

每个图表都有一个数据模型，用于保存开发者程序的数据。模型描述了节点之间的连接关系和组成员关系。用模型 Model.nodeDataArray 为每个数据项创建一个节点或组， 用模型 GraphLinksModel.linkDataArray 为每个数据项创建一个链接。而且，我们可以为每个数据对象添加所需的任何属性。

Models的种类

自定义的node模板让我们的图表看起来更美观，如果要创建一个完整的关系图，通过添加一些连线来表示这些独立的节点之间的对应关系，同时这些节点能够进行自动定位和排版。在我们的图表里为了得到这些连线，基本的Model已经满足不了需求。我们必须从GOJS中的支持连线的另外两个Models里选择，GraphLinksModel和TreeModel

GraphLinksModel中，除了model.nodeDataArray还有model.linkDataArray。它包含一个数组对象，通过”to”和”from”来描述没一个连线。

GraphLinksModel允许两个节点之间存在任何数量和任意方向的连线。比如A到B可以连10条线，B到A可以连3条以上反方向的线

TreeModel比GraphLinksModel更简单，但是不能随意的建利连接关系，就像2个节点之间有多条线，又或者有多个父级节点。

2.4 模板（Template）

模板声明了每个节点或链路的外观、位置和行为。

2.4.1 Nodes模板

* Shape 预定义的或者自定义的几何图形 

 "Rectangle"--矩形, "RoundedRectangle"--圆角矩形, "Square"--正方形 "Ellipse"--椭圆  "Diamond"--菱形,  "Circle"--圆形   各种三角形 "TriangleRight", "TriangleDown", "TriangleLeft", "TriangleUp", "Triangle",

 "LineH", "LineV", "BarH", "BarV", "MinusLine", "PlusLine", "XLine"

* TextBlock 拥有各种各样字体的文本（可编辑）
* Picture 图片
* Panel 根据不同面板的类型，它可以包含其他位置或是尺寸不同的对象。(列如表格、 竖形列表和拉伸容器等)

TextBlocks不能包含图片;Shapes不能包含文字。如果你想让你的Node显示文字，你必须使用TextBlocks。如果你想绘制一些几何图形，你就必须使用Shape。

myDiagram.nodeTemplate = $(
        go.Node,
        "Horizontal",
        { background: "#44CCFF" },
        $(
          go.Shape,
          "Rectangle",
          {
            portId: "",
            fromLinkable: true,
            toLinkable: true,
            cursor: "pointer",
            fill: "white",
            strokeWidth: 1
          },
          new go.Binding("figure"),
          new go.Binding("fill")
        ),
        $(go.Picture, { margin: 10, width: 50, height: 50, background: "red" }, new go.Binding("source"), new go.Binding("figure")),
        $(go.TextBlock, "Default Text", { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, new go.Binding("text", "name"))
      );

所有的这些building block类都是由GraphObjects抽象对象衍生出来。因为GraphObject不是DOM元素，所以创建和修改它们对性能开销不大。多个不同样式的Node节点模板可以通过myDiagram.nodeTemplateMap.add(go.Node)添加

 myDiagram.nodeTemplateMap.add("Center",
        $(go.Node, "Spot",
          {
            selectable: false,
            isLayoutPositioned: false,  // the Diagram.layout will not position this node
            locationSpot: go.Spot.Center
          },
          $(go.Shape, "Circle",
            { fill: radBrush, strokeWidth: 0, stroke: null, desiredSize: new go.Size(200, 200) }), // no outline
          $(go.TextBlock, "Arrowheads",
            { margin: 1, stroke: "white", font: "bold 14px sans-serif" })
        ))