Gojs_简单使用

·  阅读 326

简单使用

所有内容都是基于参考内容:官方文档 , 掘金-gojs基础绘图vue+gojs 绘制鱼骨图

jsrun 放了简单案例,边看边尝试加深理解 --> 案例实践

goGoJs 保留的 namespace ,Gojs类使用都会以此作为前缀开头
  1. 直接引用在线库,进行学习使用<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
  2. 类似于canvas的使用,需要指定一个html div 作为画布(需明确显示区域大小)

    <div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

  3. 通过 id 指定对应画布,创建空图表.
    // 创建可以通过`go`对象,或者通过构造器创建,即使用 `go.GraphObject.make` 创建并赋值
    var $ = go.GraphObject.make;
    // $(go.Diagram, 容器id, {配置项})
    var myDiagram = $(go.Diagram, "myDiagramDiv");
    复制代码
    gojs是 model-view 结构,视图是 madel 数据的可视化展现,使用只需关注数据对象的设定,例如:
    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram, "myDiagramDiv",
        { // 启用撤销管理器,Ctrl-Z 和 Ctrl-Y 将撤销
          "undoManager.isEnabled": true
        });
    ​
    myDiagram.model = new go.Model(
      [ // 数组中的每个对象, 视图都会创建一个节点表示
        { key: "Alpha" },
        { key: "Beta" },
        { key: "Gamma" }
      ]);
    ​
    // 默认的节点模版,通过modle的key属性绑定TextBlock的text; 不设置默认先找text值,再找key值。
    myDiagram.nodeTemplate =
      $(go.Node,
        $(go.TextBlock,
          new go.Binding("text", "key"))
      );
    复制代码
  4. 设置Node节点样式 扩展

    通过 nodeTemplate 或者 nodeTemplateMap 设置。

    • Diagram对象.nodeTemplate = $(go.Node, ...)
    • Diagram对象.nodeTemplateMap.add(模版名称,$(go.Node,...)) 适用于不同节点要设置不同样式
    // 重复部分不再赘述,将如下部分替换上案例的nodeTemplate部分
    myDiagram.nodeTemplate = $(
        go.Node,
        // 对齐方式,作用于作用区域内元素,可以注释后感受一下,下面一个一样。
        "Horizontal",
        $(go.Panel,
          "Horizontal",
          { background: 'gray', margin: 10, width: 50, height: 50 },
          $(go.TextBlock, { stroke: '#fff' }, new go.Binding("text", "key"))
         ),
        $(go.TextBlock, { stroke: 'blue' }, new go.Binding("text", "key"))
    );
    复制代码

    为了减少说明位置的书写, 内容| 代表对应内容为非填项目。后续会经常用到 $(...) 写法,写法通常 $(go.对象, 方式或类型|, {配置项}|,绑定数据|,$(...))

    $go.GraphObject.make ,是自定义的短变量,也可定义为其他,这里为了通用,后续都用$表示。

    绑定数据,通过new go.Binding(外层go.对象上的属性,数据中对应的字段名|,Func数据转换方法|) ,属性和字段名一致的情况下,可以不写

    Func对应写法, (value)=>{} value为数据中字段名对应的值。

    $(go.TextBlock,默认值|,...) 在没有绑定数据的情况下或者绑定的对应键不存在(key是不一样的,即使不设置也会有值)的情况下,会显示默认值。

    Node下支持 Shape 图形,TextBlock 文字模块,Picture 图片,Panel 容器。

  5. 链接节点
    很多情况下,我们都是要通过链接节点展示对应节点结构关系,这个时候我们就可以选择 GraphLinksModelTreeModel
    • Diagram对象.model = new go.GraphLinksModel([节点数组],[链接关系数组]);
    • Diagram对象.model = new go.TreeModel([有parent指定的节点数组]);
    // 链接关系对象通过to和from来描述链接之间的关系,可以在节点间任意建立多个链接关系
    myDiagram.model = new go.GraphLinksModel(
      [
        { key: "A" },
        { key: "B" },
        { key: "C" },
        { key: "D" }
      ],
      [
        { from: "A", to: "B" },
        { from: "B", to: "C" },
        { from: "B", to: "D" }
      ]);
    // TreeModel 是通过指定parent来维护链接关系的,不能建立任意链接关系,父节点有唯一性。
    myDiagram.model = new go.TreeModel(
      [
        { key: "A" },
        { key: "B", parent: "A" },
        { key: "C", parent: "B" },
        { key: "D", parent: "B" }
      ]);
    复制代码

    通过上面的例子,成功链接节点后,会发现 TreeModel 创建的结构关系,并不清晰,这个时候就要通过图表布局来解决这个问题。

  6. 图表布局

    可以通过给每个节点设置位置,去控制展示,但是这样比较麻烦,官方提供了直接通过设置布局方式控制,更多布局相关参考 Diagram Layouts ,TreeLayout更多的可能参考TreeLayout Demo

    // TreeLayout 默认为从左到右,将angle设置为90度实现从上往下
    myDiagram.layout =
      $(go.TreeLayout,
        { angle: 90, layerSpacing: 35 });
    复制代码
  7. 控制链接样式 Link Templates

    通过设置 linkTemplate 控制链接样式,链接不同于节点,link 主要由Shape构成 。

    // 定义一个没有箭头的圆角链接
    // 将routing属性设置为直角,然后通过设置corner值,使得直角转弯为圆形
    myDiagram.linkTemplate =
      $(go.Link,
        // 默认 routing 为 go.Link.Normal
        // 默认角度为0
        { routing: go.Link.Orthogonal, corner: 5 },
        // 路径形状
        $(go.Shape, { strokeWidth: 3, stroke: "#555" })
        // 如果我们需要箭头,可以通过添加另一个定义了toArrow的图形:
        // $(go.Shape, { toArrow: "Standard", stroke: null })
      );
    复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改