一、基础入门
环境搭建 - 可通过CDN引入：``
- 使用npm安装：`npm install gojs --save`
- 在Vue项目中，推荐在入口文件（如`main.js`）中全局引入以保持代码同步。
核心概念
- Diagram： 图表的容器，包含节点和链接； - Model
- View：实际渲染的图形界面，绑定模型数据。
二、基础操作
创建图表 ```javascript
const $ = go.GraphObject.make;
const diagram = $(go.Diagram, "diagram_container", {
width: 742,
height: 398,
model: new go.GraphLinksModel([
{ key: "Node1", label: "节点1" },
{ key: "Node2", label: "节点2" }
])
});
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle"),
$(go.TextBlock, { margin: 8 })
);
diagram.linkTemplate =
$(go.Link, { target: "node" },
$(go.Shape, "Line"),
$(go.TextBlock, { margin: 8 })
);
diagram.render();
```
通过定义节点和链接模板，实现自动布局和样式绑定。
交互操作
- 支持拖放节点：绑定`dragging`事件；
- 支持键盘操作（如删除节点：按Delete键）；
- 支持撤销/重做：通过`UndoManager`启用。
三、数据绑定与动态更新
数据驱动的图表
通过修改模型数据实现动态更新：
```javascript
function updateData(nodeArr, linkArr, animate = true) {
if (animate) {
diagram.model = new go.GraphLinksModel(nodeArr, linkArr);
} else {
diagram.model.nodeDataArray = nodeArr;
diagram.model.linkDataArray = linkArr;
}
}
// 示例：添加节点
updateData([
{ key: "Node3", label: "节点3" }
]);
```
支持动画效果切换（`animate`参数）。
事件监听
- 模型更改： 通过`model.addChangedListener`监听属性变化； - 图表更改
- 支持多播事件机制，便于统一管理事件处理。
四、高级功能
图像与导出 - 使用`Diagram.makeImage`生成图像元素；
- 支持将图表导出为PNG或PDF。
自定义工具与面板
- 添加自定义工具栏按钮；
- 使用`Panel.Graduated`创建带刻度的面板。
布局与样式
- 支持多种布局类型（如`Auto`、`Circular`、`Grid`）；
- 通过属性绑定实现动态样式调整。
五、注意事项
性能优化： 大规模图表建议使用`Diagram.model.isDirty`判断是否需要重绘； 兼容性
官方资源：参考[GoJS官方文档](https://gojs.net/latest/)获取最新API和示例。
通过以上模块化学习，可逐步掌握GoJS从基础到高级的应用技巧。建议结合官方教程与实战项目，加深理解。
