GoJS的学习使用
GoJS插件下载(源码以及API)
http://gojs.net/latest/doc/download.html
下载
官方下载的源码内部有简单的demo和api
源码好像内嵌版权说明防伪水印，需要付费下载正版无水印源码的样子
天朝规则：无水印源码下载链接（反正我在源码中找到了那段很长的但看起来毫无作用的变量，删掉就无水印了，并且目前没觉得会影响插件的使用）
来自官方学习使用文档，夹杂自己使用时的一些理解和私货（生产时参考官方给的Sample Example和API得到的理解）
添加依赖
因为GoJS依赖于h5的标准，所以页面必须声明使用标准为h5
<!DOCTYPE html> <!-- HTML5 document type -->
<html>
<head>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="go-debug.js"></script>
. . .使用步骤
创建一个div,gojs渲染的图层，任意给个div就可以了
<div id="myDiagramDiv"
style="width:400px; height:150
px; background-color: #DAE4E4;"></div>
<script>创建画布
var $ = go.GraphObject.make;
var myDiagram =$(go.Diagram, "myDiagramDiv");官方文档给的是用$作为变量，但是为了和其实是可以任意的，所以为了和Jquery区分开来，实际生产中我们可以不用$作为go.GraphObject.make的声明，而是使用其他各种合法js变量名区分开来，go.GraphObject.make是GoJS的核心，所以对象都是根据他来创建的
关键组件
模型图：绘画基本在上面进行，节点以及线条
var myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
// 模型图的中心位置所在坐标
"undoManager.isEnabled": true
// 启用Ctrl-Z撤销和Ctrl-Y重做快捷键
});//创建模型图，可根据需求参考API对其属性进行设置模型图的基本数据,描述了基本实体及其属性和关系,是图的结构零件图。
var myModel = $(go.Model);//创建Model对象
// model中的数据每一个js对象都代表着一个相应的模型图中的元素
myModel.nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
];//其实就是个普通json对象属性随便加，内部渲染时根据json里面的值设置节点的相应属性
myDiagram.model = myModel; //将模型数据绑定到模型图上Node
Node通过创建NodeTemplates节点模板由GraphObjects和设置这些对象上的属性。
创建一个Node,我们有几个组件可以使用:
myDiagram.nodeTemplate =
$(go.Node,
$(go.TextBlock,
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
);
通过以上组件构建节点，需要显示文本可以使用TextBlocks ，设置节点形可以使用Shapes ，但是：
TextBlocks 不能包含image
Shapes 不能包含text
下面是几个节点模板的构建例子：
myDiagram.nodeTemplate =
$(go.Node, "Vertical" // 第二个参数是 Node/Panel组件分布的布局方式，例子是垂直分布：Vertical，还有横向布局：Horizontal可选
{ /* 设置节点的一些参数 */ },
// 绑定节点坐标Node.location为Node.data.loc的值 Model对象可以通过Node.data.loc 获取和设置Node.location（修改节点坐标）
new go.Binding("location", "loc"),
//Shape上面有个TextBlock
$(go.Shape,
"RoundedRectangle", //定义形状，这是圆角矩形
{ /* Shape的参数。宽高颜色等等*/ },
// 绑定 Shape.figure属性为Node.data.fig的值，Model对象可以通过Node.data.fig 获取和设置Shape.figure（修改形状）
new go.Binding("figure", "fig")),
$(go.TextBlock,
"default text", // 文本域的默认显示文本
{ /* 可以在此参数设置字体样式 */ },
// 绑定TextBlock.text属性为Node.data.key的值，Model对象可以通过Node.data.key获取和设置TextBlock.text（修改文本）
new go.Binding("text", "key"))
);组件之间的嵌套组装可以玩出花来，下面的一个简单的例子
横向的节点面板Node，面板里面包含着两个元素：一个头像Picture，一个名字TextBlock
// 定义一个简单的节点模板
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",//横向布局的面板
// 节点淡蓝色背景
{ background: "#44CCFF" },
$(go.Picture,
// 设置图片的宽高
// 红色的图片背景（可以避免没有图片或者图片是透明的）
{ margin: 10, width: 50, height: 50, background: "red" },
// 绑定Picture.source 属性为Node.data.source的值，Model对象可以通过Node.data.source获取和设置Picture.source（修改图片）
new go.Binding("source")),
$(go.TextBlock,
"Default Text", // 默认文本
// 设置字体大小颜色以及边距
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
//绑定TextBlock.text 属性为Node.data.name的值，Model对象可以通过Node.data.name获取和设置TextBlock.text
new go.Binding("text", "name"))
);
var model = $(go.Model);
model.nodeDataArray =
[ // 每个节点数据对象都可以持有任意的属性，但是最后模型会根据属性生成对应的节点模板
// 比如这个例子中name、source
{ name: "Don Meow", source: "cat1.png" },
{ name: "Copricat", source: "cat2.png" },
{ name: "Demeter", source: "cat3.png" },
{ /* 空节点数据，我们可以看看会生成什么*/ }
];
myDiagram.model = model;多个不同样式的Node节点模板可以通过myDiagram.nodeTemplateMap.add(go.Node)添加
//来自Sample中的例子
myDiagram.nodeTemplateMap.add("Comment",
$(go.Node, "Auto", nodeStyle(),
$(go.Shape, "File",//文件的形状
{ fill: "#EFFAB4", stroke: null }),
$(go.TextBlock,
{
margin: 5,
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
font: "bold 12pt Helvetica, Arial, sans-serif",
stroke: '#454545'
},
new go.Binding("text").makeTwoWay())
));
//以下可以添加多个
myDiagram.nodeTemplateMap.add(...)
...Models 的类型
GoJS除了简单的go.Model这个模型之外还提供多种Model绘制精密的各种连线图可以描绘出很多不同的关系：
- Model：最基本的
- GraphLinksModel ：高级点的动态连线图
- TreeModel：树形图的模型（从例子看好像用的不多）
GraphLinksModel中为model.nodeDataArray提供model.linkDataArray为node节点连线保存数据模型信息，其实也是的一个JSON数组对象，每个线条都有两个属性 “to” 和 “from” 即Node节点的“key”值，两个属性代表两个key表示两个节点间的连线
//此例子即ABC三个节点，然后是两条线，线条从A到B，从B到C
var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
{ key: "A" },
{ key: "B" },
{ key: "C" }
];
model.linkDataArray =
[
{ from: "A", to: "B" },
{ from: "B", to: "C" }
];
myDiagram.model = model;
TreeModel不大一样，TreeModel从名字就可以看出是个树模型，只需要表示出父子节点的关系就可以了，所以只需要在Node的属性中加一个parent表示父节点的key是什么就可以了，下面是个例子（代码很直观，不解释）
// 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"))
);
var model = $(go.TreeModel);
model.nodeDataArray =
[ // the "key" and "parent" property names are required,
// but you can add whatever data properties you need for your app
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;Layouts
上面的例子中虽然通过TreeModel自动创建必要的链接来关联节点，但是生成的图像不够直观，很难找出Model的父节点。散列分布的复杂网络，不直观。组织结构混乱，有一种更简单的布局解决方案,利用TreeLayout，让图表更清晰
同时使用TreeMode和TreeLayout搭配。TreeLayout默认为从左向右流动,所以让它流从上到下(如组织图中是常见的),将设置theangle属性为90。
GoJS使用布局通常是简单的。每一种布局有很多属性,影响结果。下面一个例子展示TreeLayout
// 默认TreeLayout是从左到右的，修改为从上到下的代码
myDiagram.layout =
$(go.TreeLayout,
{ angle: 90, layerSpacing: 35 });其实还有很多不同的布局方式，可以用个例子简单演示下，详细使用还是要参考API和一些对应的demo
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"))
);
var model = $(go.TreeModel);
model.nodeDataArray =
[
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;Link Templates（线条模版）
实际生产环境中我们可能根据需要设计组建更适合我们需要的图形的连线
而设计主要是设计连线的两个连接点的形状，连线的粗细，以及各种动态计算的线条效果
下面是创建连线模版的例子
// 定义一个没有箭头的连线模版（默认有箭头的）
myDiagram.linkTemplate =
$(go.Link,
// 默认的动态线条效果routing：go.Link.Normal
// 默认就角度 corner 0
{ routing: go.Link.Orthogonal, corner: 5 },
$(go.Shape, { strokeWidth: 3, stroke: "#555" }) // 线条的形状粗细，颜色
// 默认定义的箭头
// 如果想在连接处添加其他的形状也可以通过修改toArrow的值做到
// $(go.Shape, { toArrow: "Standard", stroke: null }
);
结合上面的线条与节点模板,TreeModel,TreeLayout,可以得到一个完整的组织图。完整代码和效果图如下:
ar $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
"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: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;