引用：http://www.tuicool.com/articles/eEruaqu
http://www.open-open.com/lib/view/open1435023502544.html
gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。 gojs采用了面向对象的编程模式。以图形对象表示绘图模板。以用普通js对象存储数据作为数据模型，然后赋值给图形对象的属性作为数据绑定的模式。 gojs同样提供了大量工具类来代表我们的交互行为。我们需要做的就是创建图形对象、构建数据模型、设置属性、绑定数据模型、使用工具类添加行为即可创建 出具有丰富交互性能的各种图表
一个简单的流程图
1.HTML
<div id="myDiagram" style="width:400px; height:150px; background-color: #DAE4E4;"></div>
2.$是一个全局变量，全局变量相当于一个画笔，我们先定义一个画笔工具。之后我们就可以通过 $ 符号来调用它自身的一些方法、属性、枚举对象等
var $ = go.GraphObject.make;//
3.有了画笔，还需要画布，于是我们需要定义一个画布用来装载一些具体内容
var myDiagram =$(go.Diagram, //定义的画布
"myDiagram",//要渲染的DIV 的Id 名称,1中html中的id
{
initialAutoScale: go.Diagram.Uniform,
contentAlignment: go.Spot.Center,//对齐方式
layout://画布里的元素布局方式
$(go.ForceDirectedLayout,{
defaultSpringLength: 30,
defaultElectricalCharge: 100
})
});
这个画笔可以绘制节点、链接、区域、图案、形状、文本等
4.画笔绘制了一个文本对象 go.TextBlock ，并为它填充了属性 text、stroke、font、margin
$(go.TextBlock,{
text:"www.peng8.net",
stroke: "red",
font: "bold 10pt helvetica, bold arial, sans-serif",
margin: 4
})5.gojs绘制的图表（Diagram）具有两个最基本的元素，就是点和线（Node和Link），并且他们可以自由组合组成一个组（Group）。所有的元素都处在图层（Layer）上，并且可以对它们进行布局（Layout）。
5.1Node
myDiagram.nodeTemplate = $(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",//形状:一个 圆角矩形 ，默认填充色为 白色，边框颜色为 红色
{
fill: "white",
stroke: "red"
},
new go.Binding("fill", "color")
),
$(go.TextBlock,//文本
{
font: "bold 10pt helvetica, bold arial, sans-serif",
margin: 4
},
new go.Binding("text", "text"))//申明动态绑定text属性，将数据源中提供text字段的值赋值给当前的text属性
); 5.2Link
myDiagram.linkTemplate =
$(go.Link,
{ adjusting: go.Link.Stretch, reshapable: true },
new go.Binding("points").makeTwoWay(),
$(go.Shape, //用来画线
{
isPanelMain: true,
stroke: "black"
}),
$(go.Shape, //用来画箭头
{
toArrow: "standard",
stroke: null
}),
$(go.TextBlock, //用来显示线上的label
{
textAlign: "center",
segmentOffset: new go.Point(0, -10),
font: "10pt helvetica, arial, sans-serif",
stroke: "#555555",
margin: 4
},
new go.Binding("text", "text")
)
);
6.每个Diagram都是通过数据模型（Model）来填充和确定Node的信息和Link的所属关系的。并且我们只需要创建好Node和Link的 模板以及数据模型，其他的是事情都交给gojs去处理。它会通过Model.nodeDataArray方法和 GraphLinksModel.linkDataArray方法自动加载模型并构建元素。
jsonList 是我前端定义用来接收ajax返回数据的一个对象
var jsonList = {
nodeKeyProperty: "key", //关联的主键
nodeDataArray: [{key:1,text:"节点1"},
{key:2,text:"节点2"},
{key:3,text:"节点3"},
{key:4,text:"节点4"},
{key:5,text:"节点5"},
{key:6,text:"节点6"}],//节点数据
linkDataArray: [{from:1,to:2},
{from:2,to:3},
{from:2,to:5},
{from:3,to:6},
{from:5,to:4}]//点对应关系数据 ，上面from 和to 即 开始节点的主键指向结束节点的主键
};
7.最后就是如何给流程图填充动态数据了，这里我采用了json的方式，流程图赋值就是一句话就够了
myDiagram.model = go.Model.fromJson(jsonList);
8.效果图：很粗糙的一张图GoJS是一个JavaScript库，让你轻松创建现代Web浏览器的交互图。
GoJS支持图形化的模板和图形对象属性数据模型的数据绑定。你只需要保存和恢复模型，包括持有任何性质的应用需求，简单的JavaScript对象。许
多预定义的工具和命令执行，大部分的图表所需要的标准的行为。外观和行为的定制是大多设置属性的问题