Gojs 快速入门

佚名 2024-05-07 12:33:55 举报

篇首语：本文由小编为大家整理，主要介绍了Gojs 快速入门相关的知识，希望对你有一定的参考价值。

参考技术A 一、前言
Gojs提供了很多API给我们使用，下面只是提供完成关系图表（如下图）的某种方法，用其他方法也可以实现同样的效果。

二、准备图表数据
1、节点数据：

2、关系数据：

三、开始画图
由上图可以分析得到，图表由节点、文字、线、箭头组成。
1、创建图表

2、新建节点

3、设置线条和箭头

4、其他设置

5、新建关系图

这里只是简单介绍如何快速完成一个关系图，当然如果你想改成树形图或者改箭头为闭合，改形状为圆形，插入图片等等，强大的gojs都能帮你实现，而且有完善的api和例子可以参考。
参考链接：
https://gojs.net/latest/index.html
https://gojs.net/latest/intro/viewport.html

研究GoJS

GoJS入门

GoJS是一个灵活的库，可用于创建多种不同类型的交互式图，包括数据可视化，绘图工具和图形编辑器。有样品流程图，组织结构图，业务流程BPMN，泳道，时间表，状态图，看板，网络，思维导图，桑基，家谱和系图图，鱼骨图，平面图，UML，决策树，PERT图，甘特图，和数百人。GoJS包括许多内置布局，包括树形布局，力导向，径向和分层的有向图布局，以及许多自定义布局示例。

GoJS使用HTML Canvas元素渲染（导出为SVG或图像格式）。GoJS可以在Web浏览器中运行，也可以在Node或Puppeteer的服务器端运行。GoJS Diagrams由模型支持，通常通过JSON保存和加载。

在gojs.net上了解有关GoJS的更多信息
该存储库包含所有示例，扩展和文档的库和源。您可以使用GitHub存储库快速搜索所有源。

一、引入并去水印

与引入方式有关，通过cdn方式引用的，不知道如何去水印。
如果是通过 npm install gojs –save 安装，使用时需要在index.js中引入，import * as go from
“gojs”。然后去水印要去项目的如下路径：node_modules/gojs/release/go.js，在这个文件中搜索”7eba17a4ca3b1a8346″，会搜到类似a.kv=d[w.Jg(“7eba17a4ca3b1a8346”)][w.Jg(“78a118b7”)]****(d,w.um,4,4);这样一条语句，将其改为a.kv=function()return
true;;修改完成后水印即消失。

二、GoJS简单例子

通过创建一个或多个模板（具有所需属性数据绑定）并添加模型数据来构造图。

var $ = go.GraphObject.make;var myDiagram =  $(go.Diagram, "myDiagramDiv",     // enable Ctrl-Z to undo and Ctrl-Y to redo      "undoManager.isEnabled": true    );// define a simple Node templatemyDiagram.nodeTemplate =  $(go.Node, "Horizontal",    // the entire node will have a light-blue background     background: "#44CCFF" ,    $(go.Picture,      // Pictures should normally have an explicit width and height.      // This picture has a red background, only visible when there is no source set      // or when the image is partially transparent.       margin: 10, width: 50, height: 50, background: "red" ,      // Picture.source is data bound to the "source" attribute of the model data      new go.Binding("source")),    $(go.TextBlock,      "Default Text",  // the initial value for TextBlock.text      // some room around the text, a larger font, and a white stroke:       margin: 12, stroke: "white", font: "bold 16px sans-serif" ,      // TextBlock.text is data bound to the "name" property of the model data      new go.Binding("text", "name"))  );var model = $(go.Model);model.nodeDataArray =[ // note that each node data object holds whatever properties it needs;  // for this app we add the "name" and "source" properties   name: "Don Meow", source: "cat1.jpg" ,   name: "Copricat", source: "cat2.jpg" ,   name: "Demeter",  source: "cat3.jpg" ,   /* Empty node data */  ];myDiagram.model = model;

上述代码运行结果如下：

三、用法

Diagram

Diagram里的点和连线是数据的可视化展示，它由模型Model管理，GoJS是一个model-view架构的库。
GoJS中模型控制着数据，数据是一个数组，数组中的元素是js对象。
生成的图表有一定的特性：(1)在图表上按住鼠标拖拽会移动图表。(2)可以使用ctrl+C和ctrl+V来复制粘贴节点。(3)选中节点后按键盘的delete键可以删除节点。(4)如果在创建Diagram图表时传递一个undoManager.isEnable属性作为参数，并令其属性值为true，则可以使用ctrl+Z和ctrl+R来撤销与重做，重做会刷新浏览器。

var myDiagram =  $(go.Diagram, "myGram2",          "undoManager.isEnabled": true // 开启撤销(ctrl+Z)与重做(ctrl+R)功能    ); var myModel = $(go.Model);// 每个点是一个是js对象myModel.nodeDataArray = [   key: "Alpha" ,   key: "Beta" ,   key: "Gamma" ];myDiagram.model = myModel;

节点模板（node template）

默认的节点模板是一个节点框（go.Node）加一个文本框（go.TextBlock）。
可以自定义节点的样式。
注意TextBlock里不能包含图片，而Shape里不能包含文本。

//按需求定义一种模板，元素水平地排列在一起——horizontal ，每一个区域有两个元素，一个是shape，跟source绑定，另一个是textBlock跟name绑定。var myDiagram3 = $(go.Diagram,"displayGram","undoManager.isEnabled":true)myDiagram3.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.Model)model.nodeDataArray = [    name:"hammer",source:"../asset/icon3.jpg",    name:"goddess",source:"../asset/icon2.jpg",    name:"lastName",source:"../asset/icon.jpeg"]myDiagram3.model = model

如果想让图表中的节点之间有一些有向或者无向的连线，仅仅靠普通的Model是无法做到的。此时应该使用TreeModel或者GraphLinksModel。
GraphLinksModel：(1)声明model，var model=$$(go.GraphLinksModel)
(2)使用nodeDataArray创建节点时，增加一个key作为属性。(3)创建一个linkDataArray数组，利用from和to表示连线的指向，他俩的属性值就是节点的key值。
TreeModel:(1)TreeModel不需要用一个额外的数组定义连线。只需在定义节点的时候指定父节点即可。(2)适用于比较简单的场景，复杂情况应使用GraphLinksModel

/** * go.GraphLinksModel: *  * 使用nodeDataArray和linkDataArray共同创建连线 *    (1)nodeDataArray需要在节点中加入key值 *    (2)linkDataArray需要使用from和to两个属性表示连线的方向，节点的key值作为属性值。 *  *  *  * 优点：graphLinksModel允许在两个节点之间连接任意数量的连线，而且也不限制方向。 *     */  var $ = go.graphObject.make  var model = $(go.graphLinkModel)  model.nodeDataArray = [key:"A",key:"B",key:"C"]  model.linkDataArray = [from:"A",to:"B",from:"B",to:"C"]  myDiagram.model=model

/**  * TreeModel:  *     (1)TreeModel不需要写一个额外的数组，只用nodeDataArray一个数组就可以。与之前一样，给每个节点增加一个key  *     (2)在节点同时制定当前节点的父节点。用属性parent表示，属性值是节点的key值。  * 特点：只能处理比较简单的连线情况，如果比较复杂就无能为力，比如，一个节点有多个父节点，或者一对节点之间有多条连线的情况。  */  var $ = go.graphObject.make  var model = $(go.TreeModel)   model.nodeDataArray = [key:"A",key:"B",parent:"A",key:"C",parent:"B"]  myDiagram.model=model

以上是关于Gojs 快速入门的主要内容，如果未能解决你的问题，请参考以下文章