GoJS超详细入门（插件使用无非：引包、初始化、配参数（json）、引数据（json）四步）
GoJS超詳細入門（插件使用無非：引包、初始化、配參數（json）、引數據（json）四步）
一、總結
一句話總結：插件使用無非：引包、初始化、配參數（json）、引數據（json）四步。
1、gojs的引包是怎么寫的？
用的go-debug.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.2/go-debug.js"></script>
2、gojs的初始化是怎么寫的？
go的GraphObject屬性的make屬性
var $ = go.GraphObject.make;3、gojs的配參數（json）是怎么寫的？
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});4、gojs的引數據（json）是怎么寫的？
數據處理就是在model
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;二、GoJS入門
轉載：https://www.jianshu.com/p/9001d6b292d8
原文在這里：Get Started with GoJS
GoJS 是一個實現交互式圖表(Diagram)的Javascript 庫。這個頁面展示了使用GoJS的精髓。 因為GoJS是一個依賴于HTML5特性的JavaScript庫，所以你要搞清楚瀏覽器是否支持HTML5，當然首先要加載這個庫：
<!DOCTYPE html> <!-- HTML5 document type -->
<html>
<head>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="go-debug.js"></script>
你可以在這里下載,也可以直接引用這個地址CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.2/go-debug.js"></script>
每個GoJS圖表包含在一個頁面中固定尺寸的HTML<div>的元素中：
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
In this case we also add a background color so we can see that area. -->
<div id="myDiagramDiv"
></div>
在Javascript代碼中你可以傳遞<div>的id來創建一個圖表(Diagram):
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv");
這樣就會獲得一個空白的圖表(Diagram):
Paste_Image.png
記住GoJS的命名空間是 go，所有的GOJs包含的類型都在go這個命名空間下。所有的GoJS的類比如Diagram 、Node 、 Panel 、 Shape 、 TextBlock 都是以go.為前綴的。
這篇文章會舉例告訴你如何調用go.GraphObject.make來創建一個GoJS對象。更詳細的介紹情況請看 Building Objects in GoJS，它使用$作為go.GraphObject.make的縮寫，這樣很方便。如果你的代碼中$表示別的對象，你也可以選一個其它的短變量，比如$$或者MAKE或者GO.
圖表和模型
圖表(Diagram)的節點(Node)和鏈接(Link)是模型管理下的可視數據。GoJS支持模型-視圖構架，當模型包含描述節點和鏈接的數據（Javascript的數組對象）。而且圖表使用視圖的方式來表現數據中的節點和鏈接對象。我們加載、編輯、保存的是模型而不是圖表。你在模型的數據對象中添加你的APP需要的屬性，而不是去修改Diagram 和GraphObject 類的原型。
下面是一個模型和圖表(Diagram)的例子，再下面就是這個例子生成的圖：
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
"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;
Paste_Image.png
圖表(Diagram)展示了模型的三個節點。也能夠實現一些交互：
點擊和拖放背景圖表一直跟著移動.
通過點擊選擇一個節點，也可以拖放節點.
為了創建一個選擇框，直接點擊握住背景，然后開始拖動就可以了。
使用Ctrl-C和Ctrl-V或者通過拖放來實現拷貝和粘貼.
因為可以使用撤銷(undo)管理器，Ctrl-Z是撤銷，Ctrl-Y是重做
節點風格
節點的風格是由GraphObjects的模板和對象的屬性值決定的，為了創建一個節點( Node),我們有一些構建形狀塊(building block)的類：
Shape, 顯示預定義或者定制的帶顏色的幾何圖形.
TextBlock, to display (potentially editable) text in various fonts
Picture, 顯示圖片
Panel,一個包含了其它的對象集合的容器，可以根據Panel的類型修改位置、尺寸.
所有的構建形狀塊(building block)都是從GraphObject 這個抽象類繼承過來的, 所以我們可以隨意的以GraphObjects 的方式引用他們。注意GraphObjects 不是一個HTML DOM 元素，所以不需要創建或者修改此類元素。
我們想通過模型數據的屬性來影響節點，且這個是通過數據綁定來實現的。數據綁定允許我們修改節點上的GraphObjects的屬性來修改 的外觀和行為。模型對象是Javascript對象。你可以選擇任意你想用的屬性名來定義模型。缺省的節點模板是非常簡單的，一個節點包含一個TextBlock類.TextBlock的Text屬性和模型的key要綁定到一起，就像這樣的代碼：
The default Node template is simple: A Node which contains one TextBlock. There is a data binding
myDiagram.nodeTemplate =
$(go.Node,
$(go.TextBlock,
// TextBlock.text is bound to Node.data.key
new go.Binding("text", "key"))
);
注意沒有Node.key的屬性。但是你可以通過someNode.data.key來獲取Node的key值。
TextBlocks,Shapes和Pictures是GoJS的原始的構建形狀塊。TextBlocks不能包含圖片，Shapes不能包含文字。如果你想要節點顯示文字，必須用TextBlock。如果你想畫或者填充一些幾何圖形，你必須使用Shape.
一般情況下，節點的模塊代碼就像下面這個樣子：
myDiagram.nodeTemplate =
$(go.Node, "Vertical" // second argument of a Node/Panel can be a Panel type
/* set Node properties here */
{ // the Node.location point will be at the center of each node
locationSpot: go.Spot.Center
},
/* add Bindings here */
// example Node binding sets Node.location to the value of Node.data.loc
new go.Binding("location", "loc"),
/* add GraphObjects contained within the Node */
// this Shape will be vertically above the TextBlock
$(go.Shape,
"RoundedRectangle", // string argument can name a predefined figure
{ /* set Shape properties here */ },
// example Shape binding sets Shape.figure to the value of Node.data.fig
new go.Binding("figure", "fig")),
$(go.TextBlock,
"default text", // string argument can be initial text string
{ /* set TextBlock properties here */ },
// example TextBlock binding sets TextBlock.text to the value of Node.data.key
new go.Binding("text", "key"))
);
Panels里面的GraphObjects 可以附著在任意的深度，而去每個類有他自己獨有的屬性，但是這里展示的是一般情況。
現在我們已經看了如果創建一個節點模板，讓我們看一個實際的例子。我夢將會創建一個簡單的組織架構圖-節點包含名字和圖片。考慮下如下的節點模板：
一個"水平"類型的節點，意思是節點中的元素將會水平并排放置，它有兩個元素：
一個Picture對象表示照片，包含一個圖片源數據的綁定
一個TextBlock對象表示名字，包含文字數據的綁定
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
// the entire node will have a light-blue background
{ background: "#44CCFF" },
$(go.Picture,
// Pictures should normally have an explicit width and height.
// This picture has a red background, only visible when there is no source set
// or when the image is partially transparent.
{ margin: 10, width: 50, height: 50, background: "red" },
// Picture.source is data bound to the "source" attribute of the model data
new go.Binding("source")),
$(go.TextBlock,
"Default Text", // the initial value for TextBlock.text
// some room around the text, a larger font, and a white stroke:
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
// TextBlock.text is data bound to the "name" attribute of the model data
new go.Binding("text", "name"))
);
var model = $(go.Model);
model.nodeDataArray =
[ // note that each node data object holds whatever properties it needs;
// for this app we add the "name" and "source" properties
{ name: "Don Meow", source: "cat1.png" },
{ name: "Copricat", source: "cat2.png" },
{ name: "Demeter", source: "cat3.png" },
{ /* Empty node data */ }
];
myDiagram.model = model;
以上的代碼產生了下面這個圖表：
當不是所有的信息都被完全展示時，我們可能會想顯示一些缺省的的狀態：比如圖片沒有下載完或者還不知道名字的時候。例子中空節點的數據就可以作為占位符。
模型的種類
包含自定義模板的圖表是非常漂亮的，但是或許我們想展示更多。比如我們想展示一個組織架構圖，Don Meow的確是這個組織的老板。因此我們會創建一個完整的組織結構圖，圖中會在節點之間加上一些鏈接來展示人物關系，并且包含一個圖層來自動排列節點。
為了把鏈接加入圖中，基礎的模型是不夠用的。我們將會加入GoJS中的兩個其它的模型。他們是GraphLinksModel和 TreeModel。
. (想要了解更多看 這里.)
在GraphLinksModel中, 我們除了model.nodeDataArray還有 model.linkDataArray。他包含了一個Javascript 對象數組，每個數組表示一個指定了“from”和“to”的鏈接的節點key。這是一個例子表示節點A鏈接到節點B以及節點B鏈接到節點C:
var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
{ key: "A" },
{ key: "B" },
{ key: "C" }
];
model.linkDataArray =
[
{ from: "A", to: "B" },
{ from: "B", to: "C" }
];
myDiagram.model = model;
一個GraphLinksModel 允許你任意個節點間的鏈接，包含任意的方向?？梢杂惺畟€A到B的鏈接，和三個相反的B到A的鏈接。
一個TreeModel和GraphLinksModel有點不同。他并不包含一個鏈接數據的數組，而是創建了一個節點數據“父節點”的模型。鏈接用這種方式創建。下面是一個TreeModel的例子，包含一個節點A鏈接到B，B鏈接到C:
var model = $(go.TreeModel);
model.nodeDataArray =
[
{ key: "A" },
{ key: "B", parent: "A" },
{ key: "C", parent: "B" }
];
myDiagram.model = model;
TreeModel比 GraphLinksModel簡單,但是他不能隨意創建鏈接關系，比如不能在兩個節點間創建的多個鏈接，也不能有多個父節點。我們的組織架構圖是簡單樹形層級結構，所以我們選擇TreeModel來實現這個例子：
首先，我們添加 幾個節點，然后用TreeModel來指定key和父節點：
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ background: "#44CCFF" },
$(go.Picture,
{ margin: 10, width: 50, height: 50, background: "red" },
new go.Binding("source")),
$(go.TextBlock, "Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
new go.Binding("text", "name"))
);
var model = $(go.TreeModel);
model.nodeDataArray =
[ // the "key" and "parent" property names are required,
// but you can add whatever data properties you need for your app
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
圖表(Diagram)布局
正如你可以看到的，TreeModel自動創建需要的節點間的鏈接，但是它很難確定誰的父節點是誰。
圖表(Diagram)有一個缺省布局會管理那些沒有具體位置的節點，會自動分配一個位置。我們可以顯示的給每個節點分配一個位置來給組織排序，但是在我們的例子中一個更容易的解決方案是，我們會使用布局來自動排列位置。
我們想要來顯示一個層級，而且已經用了TreeModel，因此最自然的方式是使用TreeLayout。TreeLayout缺省的是從左到右，因此為了表示從上到下的我們會將angle屬性設置為90.
在GoJS中使用布局通常很簡單。每種類型的布局有一些屬性能影響結果。每種布局都是有例子的：(比如TreeLayout Demo)
// define a TreeLayout that flows from top to bottom
myDiagram.layout =
$(go.TreeLayout,
{ angle: 90, layerSpacing: 35 });
GoJS 有許多其它的布局，你可以看 這里.
給圖表添加布局，我們可以看到如下結果：
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{ angle: 90, layerSpacing: 35 })
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ background: "#44CCFF" },
$(go.Picture,
{ margin: 10, width: 50, height: 50, background: "red" },
new go.Binding("source")),
$(go.TextBlock, "Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
new go.Binding("text", "name"))
);
var model = $(go.TreeModel);
model.nodeDataArray =
[
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
Paste_Image.png
這個圖表看起來像是組織機構那么回事，但是我們可以做得更好。
鏈接模板(Link templates)
我們會構建一個新的鏈接模板（link template），這個模板可以更好的適應我們的寬的盒狀的節點。鏈接Link是一個不同于Node的部分。鏈接主要的元素是鏈接的形狀，而且必須是一個由 GoJS動態計算出來的形狀。我們的鏈接是將會包含形狀形狀、比一般黑色的更寬一點的灰色筆畫。不像缺省的鏈接模板，我們不會有箭頭。而且我們會將Link routing 屬性從Normal修改為Orthogonal，而且給他一個拐角值因此角會變園。
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link,
// default routing is go.Link.Normal
// default corner is 0
{ routing: go.Link.Orthogonal, corner: 5 },
$(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape
// if we wanted an arrowhead we would also add another Shape with toArrow defined:
// $(go.Shape, { toArrow: "Standard", stroke: null }
);
綜合我們的鏈接模板、節點模板、TreeModel和Treelayou，我們最終得到了一個完整的組織架構圖。完整的代碼在下面，緊跟的是生成的結果圖：
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center, // center Diagram contents
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{ angle: 90, layerSpacing: 35 })
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal",
{ background: "#44CCFF" },
$(go.Picture,
{ margin: 10, width: 50, height: 50, background: "red" },
new go.Binding("source")),
$(go.TextBlock, "Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" },
new go.Binding("text", "name"))
);
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5 },
$(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape
var model = $(go.TreeModel);
model.nodeDataArray =
[
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;
Paste_Image.png
http://gojs.net/latest/learn/index.html
總結
以上是生活随笔為你收集整理的GoJS超详细入门（插件使用无非：引包、初始化、配参数（json）、引数据（json）四步）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql中as用法
- 下一篇： 【软件测试】等价类划分