五分钟搞定Go.js
1、基于html5~因为Go.js是一个依赖于HTML5特性的JavaScript库，所以需要确保您的页面声明它是一个HTML5文档，当然需要加载库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="An organization chart editor -- edit details and change relationships." />
<title>数据图形化</title>
<script src="js/go.js"></script>
</head>
2、每个Go.js图都包含在HHTML元素中，我们需要给出一个显示的大小
<div id="myDiagramDiv"
style="width:400px; height:150px; background-color: #DAE4E4;"></div>
3、在JavaScript代码中，绘制图表时需要传递ID
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv");
注意：go是所有Gojs类型的“名称空间”。所有使用GoJs类的代码，如图表、节点、面板、形状或文本块，都以go做为前缀。
make来构建Gojs对象，使用$作为go.GraphObject的缩写。图中的加点和链接是由模型管理数据的可视化表示。GoJs有一个模型视图系统结构，其中模型包含描述节点和链接的数据（JavaScript对象数组）
基础图例代码
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
var myModel = $(go.Model);
// in the model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
];
myDiagram.model = myModel;
简单介绍下以下几个小功能：
（）在上图中单击并拖动背景以平移视图
（）单击一个节点来选择它，或者按下并拖动一个节点来移动它
（）要创建一个选择框，单击并按住背景，然后开始拖动
（）使用CTRL-C和CTRL-V，或control-drag- drop，创建选择的副本
（）按Delete键删除选中的节点。(阅读更多键盘命令。)
（）由于启用了撤消管理器，CTRL-Z和CTRL-Y将撤消和重做移动、复制和删除操作。
4、一些属性的使用：
“shape”:用颜色显示预先定义或自定义的几何图形
“TextBlock”以各种字体显示（可编辑文本）
“Picture”用来显示图片
“Panel(面板)”,用来存放其他对象集合的容器，这些对象可以根据面板的类型以不同的方式惊醒定位和大小调整（如垂直堆栈和拉伸容器）
所有这些构建块都来自于GraphObject抽象类，因此我们随意地将它们称为GraphObject、对象或元素。注意，GraphObject不是HTML DOM元素，因此在创建或修改方面没有太多开销 我们希望模型数据属性影响我们的节点，这是通过数据绑定实现的。数据绑定允许我们通过自动设置这些GraphObjects的属性值来更改节点中的GraphObjects的外观和行为
使用介绍：
默认的节点模板很简单:一个包含一个文本块的节点。文本块的文本属性和模型数据的键属性之间有数据绑定。在代码中，模板看起来是这样的:
myDiagram.nodeTemplate =
$(go.Node,
$(go.TextBlock,
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
); 注意：文本块、形状和图片是GoJS的原始构建块。文本块不能包含图像;形状不能包含文本。如果想让节点显示一些文本，必须使用文本块。
5、
创建简单的图形面板
一种“水平”面板类型的节点，意味着其元素将被水平并排地放置。它有两个要素：
（1）一个图片为肖像，与图像源数据绑定
（2）带有文本数据绑定的名称文本块
6、
可以设置默认显示的内容
我们可能希望在不是所有信息都存在的情况下显示一些“默认”状态，例如当图像不加载或不知道名称时。本例中的“空”节点数据用于显示节点模板在没有值的情况下可以很好地工作
7、
使用自定义节点模板，
我们的关系图变得非常漂亮，但是我们可能想要展示更多。也许我们需要一张组织结构图来证明唐·喵真的是一个猫卡特尔的老板。所以我们将创建一个完整的组织结构图
为了让链接进入我们的图表，基本模型不会削减它。我们将不得不在GoJS中选择另外两个模型中的一个，这两个模型都支持链接。这些是GraphLinksModel和TreeModel。(请阅读更多关于模型的内容。)
8、
树模板的使用
树模有点不同。树模型中的链接不是维护单独的链接数据数组，而是通过为节点数据指定“父”来创建的。然后从这个关联创建链接。这里有一个和Tr相同的例子
9、
图的布局
图有一个默认布局，它接受所有没有位置的节点，并给它们位置，将它们安排在网格中。我们可以显式地为每个节点提供一个位置，以解决组织混乱的问题
我们想要显示一个层次结构，并且已经在使用TreeModel，所以最自然的布局选择是TreeLayout。TreeLayout默认从左到右流动，所以为了让它从上到下流动(这在组织图中很常见)
大家自己可以尝试啦!!!!!!!!!!!