【初学者笔记】前端图表库 GoJs 入门

前言

什么是 GoJs

GoJs 是一个 JavaScript 和 typescript 库，用于构建交互式图表，可以轻易的实现日常开发中所需要的各种示意图、结构图、组织图、流程图、状态图、思维导图、树状图等。

它用自定义模板和布局组件简化了节点、链接和分组等复杂的 JS 图表，给用户交互提供了许多先进的功能，如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。

无需切换服务器和插件，GoJS 就能实现用户互动并在浏览器中完全运行，呈现 HTML5 Canvas 元素或 SVG，也不用服务器端请求。

安装

npm i gojs -S

去水印

GoJs 是一个商业软件，所以我们通过 NPM 安装的模块，如果没有支付费用的话，默认会带有水印。

image.png

方法仅供学习，请支持正版软件。

我们可以通过修改源码的方式去除水印。

• 首先找到这个文件 node_modules\gojs\release\go.js
• 然后在文件中搜索 7eba17a4ca3b1a8346
• 找到类似于 a.kv=d[w.Jg(“7eba17a4ca3b1a8346”) **][w.Jg(“78a118b7”)]****(d,w.um,4,4) 这样的一句代码
• 将此条语句替换成 a.xx=function(){return true}; 保存即可，xx 的位置以前是什么就写什么，不然会卡死。

最终如果呈现以下效果，则说明去除水印成功。

image.png

使用

GoJS 不依赖于任何 JS 库或框架（例如 bootstrap、jquery 等），可与任何 HTML 或 JS 框架配合工作。本文基于 vue2.x 作为基础前端框架。

初始化

GoJs 需要提供一个节点作为容器，并且图形的容器 div 需要明确指定大小（支持固定值以及百分比），否则无法显示，容器支持部分 CSS 样式，比如背景颜色，边框等，这个容器可以理解为画布。

<template>
  <!-- 图形的容器 div 需要明确指定大小，否则无法显示 -->
  <div id="diagram" style="width:50%; height:50%; background-color: #DAE4E4;"></div>
</template>

因为全局都会用到 go.GraphObject.make 这个方法，所以我们在导入以后直接声明一个全局变量，这个变量可以理解为画笔。

import go from 'gojs'
// 获取 gojs 的方法
const $ = go.GraphObject.make;

接下来进行 GoJs 的初始化部分。这个是官网的例子，先不用知道每一行代码的作用，我们先把程序跑起来，页面画出来。

// 初始化gojs
initGoJs() {
  // 将 gojs 挂载到 div 上 ,canvas 的大小由 div 的宽高决定
  this.diagram =
    $(go.Diagram, "diagram",
      {
        "undoManager.isEnabled": true
      });

  const myModel = $(go.Model);
  myModel.nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ];
  this.diagram.model = myModel;
}

以上简单的代码呈现出下面的结果。

image.png

其可以实现的功能如下

• 点击空白并按住鼠标左键，可以通过平移整个图表
• 点击节点可以选中某个节点，选中的节点高亮显示
• 使用 Ctrl+A 可以选中所有元素
• 按住 ctrl 键，点击鼠标左键可以选择多个元素
• 选中节点并按住鼠标左键，可以移动特定节点
• 点击空白并按住鼠标左键，点击后等 1s 再滑动鼠标，可以画出一个选择框，选中多个节点
• 选中节点后，使用 ctrl+c，ctrl+v 的方式可以复制节点
• 选中节点后，使用 delete 按钮可以删除节点
• 按住 ctrl 键，滑动鼠标滚轮（或者 + - 号）可以进行整个图表的缩放，ctrl + 0 恢复初始大小
• 使用 ctrl+z，ctrl+y 可以进行撤回和重做操作（由代码中的 "undoManager.isEnabled": true 控制）

可以看到，当前代码量只有几行，在一个代码量比较少的情况可以完成这么多功能，可以看出 GoJs 本身已经将大部分交互的动作内置到框架本身，只需要通过设置相应的属性即可完成。

go.GraphObject.make

首先获取 go.GraphObject.make方法， 该方法用于创建图形和图形中的元素，同时定义元素的属性，可以理解为一个画笔，是 GoJS 中一个最基础的 API 。

为了方便代码的编写与阅读，这里先将 go.GraphObject.make 简化定义为 ，但这不是必须的，也可以使用任何你喜欢的简化方式。之后我们就可以通过 符号来调用它自身的一些属性、方法等。

import go from 'gojs'
// 获取 gojs 的方法
const $ = go.GraphObject.make;

go.GraphObject.make 的第一个参数是需要创建元素的类型，通常是 GraphObject 的子类，后续的参数可以有多个，可以是以下类型：

• 包含键/值对的简单 JS 对象，用来描述被创建元素的属性，比如{ figure:"RoundedRectangle" }。
• 一个枚举类型的参数，一般该参数用于设定构建对象在 Diagram 中的排列方式，比如平铺排列、垂直排列等，以及嵌套元素的自适应方法。
• 也可以是一个 GraphObject 类型，添加到被创建元素中的子元素，比如，下面的代码中在 Node 元素中增加 Shape 子元素和 TextBlock 子元素。
• 一个字符串，这个参数一般作为第二个参数，用于设置某个 GraphObject 子类型的第一属性，比如设置 TextBlock 的 text、Shape 的 figure、Picture 的 source、Panel 的 type 等。
• 针对创建元素的不同，也可以是其它可能的 Js 对象或数组。

  const $ = go.GraphObject.make;
  const diagram = $(go.Diagram, "diagram",{});
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "你好!", { margin: 5 })
    ));

go.GraphObject.make 的返回值通常也是一个 GraphObject ，所以可以嵌套调用。

图表（Diagram）

有了画笔，还需要画布，通过 go.GraphObject.make 来挂载一个图表到 div 容器上。

  const $ = go.GraphObject.make;
  const diagram = $(go.Diagram, "diagram",{});

• 参数一： go.Diagram ，固定写法，可以理解为我们需要的画布
• 参数二： 要挂载的 div 容器的 id
• 参数三： 画布的配置对象
• 返回值： 画布实例对象

为了更好理解，接下来本文中的 画布 指的就是这个 diagram 对象，图表 指的也是这个 diagram 对象。

常用的画布初始化配置属性如下：

GraphObject

有了画布，接下来就要有内容，也就是画布中的元素，一个元素通常是一个 GraphObject 类型的对象。

GraphObject 是所有图形对象的抽象类，万物皆 GraphObject。这个类的子类包括 Panel、Shape、TextBlock、Picture 和 Placeholder。

GraphObject 和其子类的关系如下图。

image.png

GraphObject 是抽象类，不能直接创建，需要利用 $ 也就是 go.GraphObject.make 去创建子类的实例。

面板（Panel）

面板是将其他图形对象作为元素的图形对象。面板负责确定其所有元件的尺寸和位置。每个面板建立自己的坐标系，按顺序绘制面板的元素。

Panel 有不同的类型，每个类型表示一种布局，通过不同的坐标系统排列。

注意，GoJS 中的 x 轴水平向右，y 轴垂直向下。

Panel 的值包括以下类型：

• Panel.Position： 建立坐标系，通过指定坐标对绝对位置排序。
• Panel.Vertical： 定义垂直方向的线性排列。
• Panel.Horizontal： 定义水平方向的线性排列。
• Panel.Auto： 调整主元素的大小以适应 Panel 中的其他元素。
• Panel.Spot： 通过 GraphObject.alignment 属性指定其他元素相对于主元素的位置。
• Panel.Table： 以表格的方式排列元素，通过指定 row 和 col 以及相关信息指定元素位置。
• Panel.TableRow： 只能在 Panel.Table 中使用，以将元素集合组织为表格中的行。
• Panel.TableColumn： 只能在 Panel.Table 中使用，以将元素集合组织为表格中的列。
• Panel.Viewbox： 用于自动调整单个元素的大小以适合面板的可用区域。
• Panel.Grid： 仅用于绘制常规的线条图案，元素必须是用于描述重复行的形状。
• Panel.Link： 仅供 Link 部件和 Link Adornments 使用。
• Panel.Graduated： 用于沿主 Shape 元素绘制常规刻度线和文本。

零部件（Part）

所有零部件都是面板，因为零部件类继承自面板类。

我们只能向 画布 中添加 零部件，所以 Part 是顶级元素。Node 和 Link 继承自 Part 。 所以我们可以向 画布 中添加 节点 或 线 。

而 Shape 、TextBlock 、Picture 则只能作为 Part 的子元素，不能直接添加到 画布 中。

节点（Node）

节点可以是通过线连接到其他节点的零部件，也可以是组的成员。Node 可以被 Link 连接起来。每一个 Node 都有一个 key，用来唯一标识该 Node。

连线（Link）

link 有 from 和 to 属性，用来表示该 Link 的 出发点 和 结束点。

组（Group）

组继承自节点,允许节点在逻辑上包含其他节点和线。

形状（Shape）

表示一个几何图形。可以使用 GoJS 中定义好的一些图形，如 “Rectangle” 也可以自定义图形的形状。通过 fill 和 stroke 等属性决定图形的显示。

文本（TextBlock）

文本属性和 CSS 相同 font-style、 font-variant、 font-weight 、font-size、 font-family。也可以定义 stroke 等属性。

构建图形

GoJs 绘制的图表（Diagram）具有两个最基本的元素，就是点和线（Node和Link），并且他们可以自由组合组成一个组（Group）。所有的元素都处在图层（Layer）上，并且可以对它们进行布局（Layout）。

通过常规方式

一个图形可以看做由节点和连线组成，在 GoJs 中，图形元素是 GraphObject，我们可以使用常规方式创建节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/gojs/release/go.js"></script>
</head>
<body>
    <div id="diagram" style="border: solid 1px blue; width:400px; height:400px"></div>
    <script>
      // 创建画布
      const diagram = new go.Diagram("diagram");
      // 创建节点 节点中元素的排列方式是 Panel.Auto
      const node = new go.Node(go.Panel.Auto);
      // 创建一个图形
      const shape = new go.Shape();
      // 定义图形的属性
      shape.figure = "RoundedRectangle";
      shape.fill = "lightblue";
      // 将图形加到节点
      node.add(shape);
      // 创建一个文本
      const textblock = new go.TextBlock();
      // 定义文本的属性
      textblock.text = "Hello!";
      textblock.margin = 5;
      // 将文本加到节点
      node.add(textblock);
      // 将节点加到图
      diagram.add(node);
    </script>
</body>
</html>

通过 go.GraphObject.make

常规的编程方法虽然容易理解，但是需要定义大量的中间变量，如果需要创建的元素很多，就会感觉有些冗余，上面的代码可以通过 go.GraphObject.make 简化成如下

const diagram = new go.Diagram("diagram");
const $ = go.GraphObject.make;
diagram.add(
    $(go.Node, go.Panel.Auto,
        $(go.Shape,
            { figure: "RoundedRectangle", fill: "lightblue" }),
        $(go.TextBlock,
            { text: "Hello!", margin: 5 })
    ));

这样会让代码量大幅减少，并且如果给元素赋值了错误的属性，make 函数内部会报出错误。

例如，将 text 写错为 test，会在控制台看到报错：

Uncaught Error: Trying to set undefined property "test" on object: TextBlock("")

模型和模板

每个 Diagram 都是通过数据模型（Model）来填充和确定 Node 的信息和 Link 的所属关系的。并且我们只需要创建好 Node 和 Link 的模板（Template）以及数据模型（Model），其他的是事情都交给 GoJs 去处理，它会自动加载模型并构建元素。

模板（Template）

虽然 go.GraphObject.make 创建图形的方式简单了许多，但是如果要创建很多的 Node，而不同的 Node 之间结构相同，通过上面的方式，扔需要书写大量的重复代码。

如果能定义一个 Node 的模板，然后通过指定参数来定义节点，就会方便很多。

GoJS 中为我们提供了这种模板语法，后面会讲。

模型（Model）

GoJS 是一个 model-view 架构的库，画布里的点和连线是数据的可视化展示，它由模型 Model 进行管理。

GoJS 中 模型 控制着 数据，数据是一个 数组，数组中的每一个元素是一个 JavaScript 对象。

把 nodeDataArray 作为构造函数的参数，通过 new go.Model() 创建模型对象的实例，然后再把模型实例赋值给 diagram.model 属性就完成了对 Model 的管理。我们日常中的开发基本上就是在维护 nodeDataArray 这个数组。

语法：

const myModel = new go.Model(nodeDataArray);

节点模板（nodeTemplate）

当我们没有手动指定节点模板的时候，其实 GoJS 是有默认模板的，也就是我们最开始的例子，一个节点（Node）加一个文本（TextBlock）。

默认的节点模板：

image.png

我们可以自定义节点的样式

  // 创建画布
  this.diagram = $(go.Diagram, "diagram",{"undoManager.isEnabled": true});
  // 定义模板
  this.diagram.nodeTemplate =  
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle", fill: "white" },
      ),
      $(go.TextBlock,
        { text: "hello!", margin: 20 })
    );
  // 定义数据
  const nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ];
  // 创建模型实例
  const myModel = new go.Model(nodeDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myModel;

自定义的节点模板：

image.png

连线模板（linkTemplate）

如果想让图表中的节点之间有一些有向或者无向的连线，仅仅靠普通的 Model 是无法做到的。此时应该使用 TreeModel 或者 GraphLinksModel。

TreeModel

TreeModel 适用于比较简单的场景。

创建一个 nodeDataArray 数组，用来保存节点数据，每个元素需要增加一个 key 作为唯一标识。

TreeModel 只用 nodeDataArray 一个数组就可以，不需要用一个额外的数组定义连线，只需在定义节点的时候指定父节点即可。

在定义节点同时指定当前节点的父节点，用属性 parent 表示，属性值是节点的 key 值。

特点：只能处理比较简单的连线情况，如果比较复杂就无能为力，比如，一个节点有多个父节点，或者一对节点之间有多条连线的情况。

语法：

const myTreeModel = new go.TreeModel(nodeDataArray);

演示代码:

  // 创建画布
  this.diagram = $(go.Diagram, "diagram", { "undoManager.isEnabled": true });
  // 定义数据
  const nodeDataArray = [
    { key: "Head" },
    { key: "Alpha", parent: "Head" },
    { key: "Beta", parent: "Head" },
    { key: "A", parent: "Alpha" },
    { key: "B", parent: "Alpha" },
    { key: "C", parent: "Beta" },
    { key: "D", parent: "Beta" },
    { key: "E", parent: "Beta" },
  ];
  // 创建 TreeModel 模型实例
  const myTreeModel = new go.TreeModel(nodeDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myTreeModel;

结果如下:

image.png

发现连线重合，布局混乱，这时可以使用 TreeLayout 解决。

  // 创建画布
  this.diagram = $(go.Diagram, "diagram", {
    "undoManager.isEnabled": true,
    layout: $(go.TreeLayout, { angle: 90, layerSpacing: 35 })
  });
  // 定义数据
  const nodeDataArray = [
    { key: "Head" },
    { key: "Alpha", parent: "Head" },
    { key: "Beta", parent: "Head" },
    { key: "A", parent: "Alpha" },
    { key: "B", parent: "Alpha" },
    { key: "C", parent: "Beta" },
    { key: "D", parent: "Beta" },
    { key: "E", parent: "Beta" },
  ];
  // 创建 TreeModel 模型实例
  const myTreeModel = new go.TreeModel(nodeDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myTreeModel;

这下就比较正常了。

image.png

GraphLinksModel

GraphLinksModel 适用于比较复杂的情况。

创建一个 nodeDataArray 数组，用来保存节点数据，每个元素需要增加一个 key 作为唯一标识。

创建一个 linkDataArray 数组，利用 from 和 to 属性表示连线的指向，它俩的属性值就是节点的 key 值。

语法：

const myGraphLinksModel = new go.GraphLinksModel(nodeDataArray, linkDataArray);

演示代码:

  // 创建画布
  this.diagram = $(go.Diagram, "diagram", { "undoManager.isEnabled": true });
  // 定义节点数据
  const nodeDataArray = [
    { key: "Head" },
    { key: "Alpha", parent: "Head" },
    { key: "Beta", parent: "Head" },
    { key: "A", parent: "Alpha" },
    { key: "B", parent: "Alpha" },
    { key: "C", parent: "Beta" },
    { key: "D", parent: "Beta" },
    { key: "E", parent: "Beta" },
  ];
  // 定义连线数据
  const linkDataArray = [
    { from: "Alpha", to: "Head" },
    { from: "Beta", to: "Alpha" },
    { from: "A", to: "Alpha" },
    { from: "B", to: "Alpha" },
    { from: "C", to: "Alpha" },
    { from: "D", to: "C" },
    { from: "E", to: "D" },
  ]
  // 创建模型实例
  const myGraphLinksModel = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  // 最终赋值给 diagram.model 修改模型
  this.diagram.model = myGraphLinksModel;

结果如下:

image.png

linkTemplate

和节点模板相同的是，我们也可以自定义连线模板。

  // 定义连线模板
  this.diagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, corner: 5 },
      $(go.Shape, { strokeWidth: 3, stroke: "#555" })
    )

最后变成了这样：

image.png

图表事件（DiagramEvent）

DiagramEvent 表示一般用户发起的对图表的改变。可以通过调用 Diagram.addDiagramListener 注册图表事件处理程序，各个图表事件以名字区分，也可以在图表初始化时调用 go.GraphObject.make 注册图事件处理程序。

常用的的图表事件名称包括：