gojs绘流程图

标签：

引用：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;//

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 
     　　})
 });

$(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对象。许 多预定义的工具和命令执行，大部分的图表所需要的标准的行为。外观和行为的定制是大多设置属性的问题

gojs绘流程图

标签：

原文地址：http://www.cnblogs.com/zhangmu126/p/5789200.html