DongHao's 个人在线文档库

基本概念

GoJS 是一个依赖HTML5特性的JavaScript库，所以开发的页面是在HTML5的基础上，可以在现代 Web浏览器中轻松创建交互式图表，GoJS 支持图形模板和图形对象属性到模型数据的数据绑定

安装依赖：npm i gojs

在vue中引入GoJs基础图表的构建：

vue

<template>
	<!--创建画布-->
    <div id="diagramDiv" style="width: 100%; height: 900px; background-color: #DAE4E4;"></div>
</template>
  
<script setup lang="ts">
import { onMounted } from 'vue';
import go from 'gojs';  // 引入

function initDiagram(){
    // 给go.GraphObject.make起简称，后续调用更加方便
    const $ = go.GraphObject.make;
    
    // 为DIV.HTML元素创建一个画布，定义画布的基本属性
    // 使用 GraphObject.make 构建 Diagram 
    // "diagramDiv"必须命名或引用DIV HTML元素画布绑定的Div的ID
    const myDiagram = $(go.Diagram, "diagramDiv", {
        // 设置画布配置
        //'undoManager.isEnabled': true, // 启用撤销重做功能
        //isReadOnly: true,  //只读 元素不可拖动
        contentAlignment: go.Spot.Center, // 元素位置移动后始终处于在画布正中间
        maxSelectionCount: 1,  // 最多选择一个元素
        'grid.visible': true,  // 画布上面是否出现网格
        allowZoom: false, // 不允许用户改变图表的规模
        // 使鼠标滚轮事件放大和缩小，而不是上下滚动
        "toolManager.mouseWheelBehavior": go.WheelMode.Zoom,
    });

    // 创建模型数据
    myDiagram.model = new go.GraphLinksModel(
        // 创建元素
        [
            { key: 'SomeNode1' },
            { key: 'SomeNode2' },
            { key: 'SomeNode3' },
        ],
        // 元素连线
        [
            { from: 'SomeNode1', to: 'SomeNode2' },
            { from: 'SomeNode1', to: 'SomeNode3' },
        ]
    );
}

onMounted(() => {
    initDiagram()
});
</script>

核心思想

图表(Diagram)中的基本元素：点(Node)、线(Link)，点和线自由组合就变成了组(Group)

所有的元素都处在图层(Layer) 上，并且可以对他们进行布局(Layout)，每一个点和线都是通过模板来描述他们的文本、形状、颜色等信息以及交互行为。每一个模板其实就是一个面板(Panel)，每个图表都是通过数据模型(Model) 来填充和确定点的信息和线的所属关系，Model又分为了以下三种类型：

Model：最基本的（不带连线）
GraphLinksModel ：高级点的动态连线图
TreeModel：树形图的模型

我们只需创建好点和线的模板以及数据模型，其他事情都交给gojs处理：

通过Model.nodeDataArray方法和GraphLinksModel.linkDataArray方法自动加载模型并构建元素；
通过ToolManager对象管理工具类(交互行为)，如管理CommandHandler对象用来添加一些键盘命令

gojs定义了一个用于创建GraphObject对象的静态函数GraphObject.make；GraphObject是所有图形对象的抽象类，这个类的子类包括Panel、Shape、TextBlock、Picture和Placeholder：

其中Panel派生的子类Part是Node和Link的父类；Part是一个图表对象，它继承自Panel，它是所有用户操作级别对象的基类
Shape：形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等
TextBlock：文本域（可编辑）
Picture：图片
Panel：容器来保存其他Node的集合

`GraphObject`构造方法

GraphObject是一个抽象类，一个节点Node是一个GraphObject，包含TextBlocks，shapes，Pictures和Panels

创建一个节点：var node = new go.Node(go.Panel.Auto);
将设置好的属性添加给该节点，以shape属性为例：node.add(shape);
将该节点添加到图表中： diagram.add(node);

逐一为每个节点配置属性比较麻烦，推荐使用GraphObject.make进行统一的创建：

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

// 可以通过使用字符串参数进行简化
// Panel.type、Shape.figure 和 TextBlock.text 属性是可以进行简化的
var $ = go.GraphObject.make;
  myDiagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));

基本概念 ​

核心思想 ​

GraphObject构造方法 ​

基本概念

核心思想

`GraphObject`构造方法