GoJS的学习使用

原创 2016年08月29日 15:07:03

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的核心,所以对象都是根据他来创建的

关键组件

Diagrams

模型图:绘画基本在上面进行,节点以及线条

var myDiagram = $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, 
      // 模型图的中心位置所在坐标
      "undoManager.isEnabled": true 
      // 启用Ctrl-Z撤销和Ctrl-Y重做快捷键
    });//创建模型图,可根据需求参考API对其属性进行设置

Models

模型图的基本数据,描述了基本实体及其属性和关系,是图的结构零件图。

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,我们有几个组件可以使用:

  • Shape:形状——Rectangle(矩形)、RoundedRectangle(圆角矩形),Ellipse(椭圆形),Triangle(三角形),Diamond(菱形),Circle(圆形)等
  • TextBlock:文本域(可编辑)
  • Picture:图片
  • Panel:容器来保存其他Node的集合
    默认的节点模型代码只是由一个TextBlock组件构建成
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;

效果图

实际生产环境中我们可能根据需要设计组建更适合我们需要的图形的连线
而设计主要是设计连线的两个连接点的形状,连线的粗细,以及各种动态计算的线条效果

下面是创建连线模版的例子

// 定义一个没有箭头的连线模版(默认有箭头的)
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;

效果图

版权声明:本文为博主原创文章,未经博主允许不得转载。

GoJS - 简介

gojs是一个能够让我们很容易的实现基于html5浏览器绘制具有交互性的图形图表的JavaScript框架。 gojs采用了面向对象的编程模式。以图形对象表示绘图模板。以用普通js对象存储数据作为数据...
  • c________________j
  • c________________j
  • 2015年04月11日 10:03
  • 4739

GoJS 1.7.7 无水印版

  • 2017年04月14日 15:57
  • 852KB
  • 下载

JS组件系列——Gojs组件,前端图形化插件之利器

阅读目录 一、组件效果预览二、初次接触 1、Gojs简介2、使用入门 三、综合效果 1、自定义流程的使用2、工业流程图 四、总结   正文 前言:之前分享过两篇关于流程...
  • zwjweb
  • zwjweb
  • 2017年11月29日 14:46
  • 321

gojs JS实现网络拓扑图

废话先不多说,先上图;这是一个模拟设备状态的拓扑图;图中节点右上角的圆形图标绿色代表正常,红色代表设备一次;在图片的左上角 是用来获取节点的详细信息的。具体方法在js中有注释, 因为这只是个教程...
  • qq_26562641
  • qq_26562641
  • 2017年11月20日 09:31
  • 790

GO.js官方文档中文版

GoJs是一个实现图表交互的javaScript库,这篇文章将为你展示使用GoJs时的特征。因为GoJs是依赖hTML5的javaScript库,所以你要确认你开发的页面是在HTML技术的基础上,当然...
  • forwujinwei
  • forwujinwei
  • 2017年07月18日 18:43
  • 1699

gojs可视化demo文档

  • 2017年10月18日 10:24
  • 7.78MB
  • 下载

GoJs无水印版js文件

  • 2017年08月31日 13:40
  • 852KB
  • 下载

gojs一些操作

var node = obj.part.adornedPart;【管理员】没 2018/1/18 星期四 上午 9:34:33myDiagram.model.removeNodeData(node.d...
  • qq_26562641
  • qq_26562641
  • 2018年01月18日 09:44
  • 86

Solidity 官方文档中文版(二)

深入理解 Solidity 此节将帮助你深入理解Solidity,如果有遗漏,请和我们联系Githhub上发pull request Importing other Source File...
  • xiatiancc
  • xiatiancc
  • 2017年12月27日 11:34
  • 489

go.js的一些功能

.节点点击事件 var Select_Port = null; myDiagram.addDiagramListener("ObjectSingleClicked", function(e...
  • qq_34458824
  • qq_34458824
  • 2017年10月16日 17:29
  • 429
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:GoJS的学习使用
举报原因:
原因补充:

(最多只允许输入30个字)