一、简介

仅仅是一个前端插件

使用的话需要去官网下载对应的js文件:https://gojs.net/latest/index.html

下载之后并不是所有的js文件都用的到，我们需要了解到只有三个

"""
go.js                 正常必须要导入的文件
go-debug.js  会展示报错消息 类似于debug模式 线上肯定不会使用
Figures.js     扩展图表(go.js自带的图表比较少，如果出现图标显示不出来的情况)
"""
# 总结:使用的时候导入go.js和Figures.js就不会有任何问题了

二、简单使用

方法:先用div在页面上划定区域，之后所有的gojs图表渲染全部在该div内部进行。

<!-- 划定用来渲染gojs图标的div区域，背景颜色等参数 -->
<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E4;"></div>

<script src="go.js"></script>
<script>
    var $ = go.GraphObject.make;
    // 第一步：创建图表，用于在页面上画图
    var myDiagram = $(go.Diagram, "myDiagramDiv");
    // 第二步：创建一个节点，内容为donner
    var node = $(go.Node, $(go.TextBlock, {text: "donner"}));
    // 第三步：将节点添加到div区域中
    myDiagram.add(node)
</script>

三、重要概念

TextBlock创建文本
Shape图形
Node节点(文本与图形结合)
Link箭头