GoJS图表组件简介

GoJS是一个JavaScript库，可让您在现代Web浏览器中轻松创建交互式图表。 GoJS支持图形模板和图形对象属性的数据绑定以模拟数据。您只需要保存和恢复模型，该模型由包含应用程序所需属性的简单JavaScript对象组成。许多预定义的工具和命令实现了大多数图表所需的标准行为。外观和行为的定制主要是设置属性的问题。

一个简单的gojs例子

var $ = go.GraphObject.make;
//节点模板描述了应该如何构造每个节点
 	diagram.nodeTemplate =
        $(go.Node, "Auto",  //Auto 比较常用，表示形状自动适应文本块；
          $(go.Shape, "RoundedRectangle",  // 用‘RoundedRectangle’这种图形来表示形状，gojs内置形状参考官网：https://gojs.net.cn/samples/shapes.html
            new go.Binding("fill", "color")), // 将Shape.fill绑定到Node.data.color
          $(go.TextBlock, //设置文本相关
            { margin: 3 },  // 通过margin来设置文本周围的空间
            new go.Binding("text", "key")) // 将TextBlock.text绑定到Node.data.key
        );
  // 模型只包含描述图表的基本信息
	diagram.model = new go.GraphLinksModel(
	//节点数据
	[ 
	  { key: "Alpha", color: "lightblue" },
	  { key: "Beta", color: "orange" },
	  { key: "Gamma", color: "lightgreen" },
	  { key: "Delta", color: "pink" }
	],
	//节点指向数据
	[ 
	  { from: "Alpha", to: "Beta" },
	  { from: "Alpha", to: "Gamma" },
	  { from: "Beta", to: "Beta" },
	  { from: "Gamma", to: "Delta" },
	  { from: "Delta", to: "Alpha" }
	]);
	// 打开撤销和重做（Ctro+Z,Ctro+Y）
	diagram.undoManager.isEnabled = true; 

效果：
此时，您可以通过多种方式与此图表进行交互：

1.您可以通过单击选择零件。选定的节点用Adornment突出显示，Adornment是围绕节点的蓝色矩形。所选链接在链接路径后面以蓝线突出显示。
2.可以一次选择多个部件。单击以添加到选择时按住Shift键。单击以切换是否选中该部件时按住Control键。
3.多选的另一种方法是在背景中的某个点（而不是在某个部分上）进行鼠标按下，稍等片刻，然后拖动一个框。选择鼠标向上时框中的部件。4.Shift和Control修饰符也适用。
5.Ctrl-A选择图中的所有部分。
6.通过选择并拖动来移动一个或多个节点。
7.复制选定的部件可以使用复制/粘贴（Ctrl-C / Ctrl-V）或Ctrl-鼠标拖动。
8.使用Delete键删除所选部件。
9.如果滚动条可见或整个零件集合小于图表的可视区域（“视口”），则可以在背景中使用鼠标按下平移图表（而不是在零件上）等候。
10.使用鼠标滚轮向上和向下滚动，使用Shift鼠标滚轮向左和向右滚动。Ctrl-mouse-wheel放大和缩小。

您还可以用手指在触摸设备上平移，捏放大，选择，复制，移动，删除，撤消和重做。大多数可以从键盘调用的命令都可以从默认的上下文菜单调用，您可以通过按下手指并保持静止一会儿来获得该命令。