GoJS介绍

GoJS官网 🔗定义为一个制作运行于html中的交互式JavaScript图表工具. 用于制作流程图再好不过了.

• 笔记参考于:
  • GoJS API 🔗
  • GoJS 绘图 🔗

GoJS使用

插件在线sdn地址: <script src="https://cdnjs.cloudflare.com/ajax/libs/GoJS/1.8.14/go-debug.js"></script>

基础必备(之后用到, 不重复定义)

1. 容器, 通过id属性关联: <div id="myDiagramDiv" style="width: 1000px; height: 500px; background-color: #DAE4E4"></div>
2. 将操作函数(画笔)简化处理: var $ = go.GraphObject.make;
3. 指定容器, 实例化一个diagram(画布): var diagram = new go.Diagram("myDiagramDiv");

//画布参数详细
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv", {
    //模型图的中心位置所在坐标
    initialContentAlignment: go.Spot.Center,
    //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
    "undoManager.isEnabled": true,
    //不运行用户改变图表的规模
    allowZoom: false,
    //画布上面是否出现网格
    "grid.visible": true,
    //允许在画布上面双击的时候创建节点
    "clickCreatingTool.archetypeNodeData": { text: "Node" },
    //允许使用ctrl+c、ctrl+v复制粘贴
    "commandHandler.copiesTree": true,
    //允许使用delete键删除节点
    "commandHandler.deletesTree": true,
    // dragging for both move and copy
    "draggingTool.dragsTree": true,
});

4. 图表绘制基础类GraphObject: Shape、TextBlock、Picture 和 Panel 直接继承于此类. 其中 Part 继承于 Panel.
5. 用户操作顶层类Part: 继承于 Panel 类, Adomment、Link 和 Node 直接继承于此类. 其中 Group 继承于 Node.

继承图谱

Diagram Classes

Diagram Classes
├── GraphObject             # 图表绘制基础类
│   ├── Placeholder
│   ├── Shape
│   ├── TextBlock           # 文本内容展示容器
│   ├── Picture
│   └── Panel               # 用作其它继承自GraphObject类的组件的容器
│       └── Part            # 用户操作顶层类
│           ├── Adomment
│           ├── Link
│           └── Node
│               └── Group
├── Diagram
│   ├── Overview
│   └── Palette
├── Layer
├── InputEvent
├── CommandHandler
└── AnimationManager

图表绘制基础类(GraphObject)

基础类, 类中定义了公用方法用于其它类继承.

常用公用属性列表:

面板(Panel)

容器里节点的显示格式

Panel的类型

1. Panel.Position: 坐标系中利用坐标点定位.
2. Panel.Vertical 和 Panel.Horizontal: 元素在面板中水平和垂直布局
3. Panel.Auto: 元素在面板中自动排列
4. Panel.Spot: 元素在面板中通过go.Spot下的Left, Right 和 Center 定位
5. Panel.Table: 表格定位, 通过 row 和 column 确定元素布局, rowSpan 和 columnSpan 确定元素占有的格子数
6. Panel.TableRow 和 Panel.TableColumn: 表格的行和列
7. Panel.Viewbox is used to automatically resize a single element to fit inside the panel’s available area.
8. Panel.Grid is not used to house typical elements, but is used only to draw regular patterns of lines. The elements must be Shapes used to describe the repeating lines.
9. Panel.Link is only used by Link parts and Link Adornments.
10. Panel.Graduated is used to draw regular tick marks and text along the main Shape element.

文本块(TextBlocks)

文本内容展示容器

• 两种实例化方式: $(go.TextBlock, { text: "Hello World", stroke: "gray" }) 和 $(go.TextBlock, "Hello World", { stroke: "gray" })
• 示例

myDiagram.add($(
    go.Part, 'Auto', $(
        go.TextBlock,
        { text: "Hello World", stroke: "gray" }
    )
))

• 常用配置项: 含继承的(background、margin、width、height、alignment)

形状(Shape)

用于绘制各种图形

• 两种实例化方式: $(go.Shape, { figure: "RoundedRectangle", fill: "lightgreen" }) 和 $(go.Shape, "RoundedRectangle", { fill: "lightgreen" })
• 常用图案: Rectangle(正方形)、Circle(圆形)、Elippse(椭圆)、Triangle(三角形)…详见shapes支持的图形展示 🔗
• 示例

myDiagram.add($(
    go.Part, 'Auto', $(
        go.Shape,
        { figure: "RoundedRectangle", fill: "lightgreen" }
    )
))

• 常用配置项: 含继承的(background、margin、width、height、angle、scale)

节点间连线

1. 普通连线方式

myDiagram.add($(
    go.Link,
    {
        fromNode: node1,
        toNode: node2
    },
    $(
        go.Shape
    )
));

2. 通过GraphLinksModel方法构建节点间的连线, diagram.nodeTemplate修改节点默认样式模板, diagram.linkTemplate修改线条默认样式模板

diagram.nodeTemplate = g(
    go.Node,
    'Auto',
    // new go.Binding('location', 'loc'), 当节点通过location定位时加上, 此时节点数组通过 loc: new go.Point(0, 0) 给节点定位
    // new go.Binding('location', 'loc', go.Point.parse), 当节点通过location定位时加上, 此时节点数组通过 loc: '0, 0' 给节点定位
    g(
        go.Shape,
        'RoundedRectangle',
        { fill: '#fff' },
        new go.Binding('fill', 'color')
    ),
    g(
        go.TextBlock,
        new go.Binding('text', 'text')
    )
)
diagram.linkTemplate = g(
    go.Link,
    g(
        go.Shape,
        new go.Binding('stroke', 'color'),
        new go.Binding('strokeWidth', 'thick')
    ),
    g(
        go.Shape,
        { toArrow: 'OpenTriangle', fill: null}
    )
)
var nodeDataArray = [
    { key: "Alpha"},
    { key: "Beta" }
];
var linkDataArray = [
    { from: "Alpha", to: "Beta" }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);