當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

GoJS中文文档

發布時間：2023/12/14 javascript 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 GoJS中文文档小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

GoJS是一個用于實現交互式圖表的JavaScript庫。本頁將向您展示使用GoJS的要點。

因為GoJS是一個依賴HTML5特性的JavaScript庫，所以你開發的頁面是在HTML5的基礎上。當然，首先需要加載庫：

<!DOCTYPE html>  <html> <head>  <script src="go-debug.js"></script>

您可以到?下載頁面?下載最新版 GoJS（包含所有例子），或者直接引用?CDN?文件：

每個?GoJS?圖形實例都需要一個 HTML 容器?<div>?并明確指定其大小：

<div id="myDiagramDiv"style="width:400px; height:150px; background-color: #DAE4E4;"></div>

在 JS 代碼中，需要將?<div>?的?id?作為參數來創建圖形。

var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv");

注意，go是命名空間，所有的GoJs的類型都依賴于它，所有使用GoJs的類例如Diagram 、Node 、 Panel 、Shape 、 TextBlock都需要加前綴go.，

這篇文章將向您展示如何使用go.GraphObject.make去創建GoJs對象，想了解更多的信息，請點擊 http://gojs.net/latest/intro/buildingObjects.html
這里就相當于一個變量，表示命名空間，如果你的項目中有使用到例如Jquery，也是使用的就相當于一個變量，表示命名空間，如果你的項目中有使用到例如Jquery，也是使用的,你可以將GoJs的命名空間變量隨意定義一個，例如GO,make,$$等

圖形和模型

節點和連線是圖表必須的，他們是通過Model管理的，GoJs有一個model-view視圖解析器，這里的模型（Model）數據描述了節點（node）,連線（link）,圖表行為，然后去真正渲染節點和連線。model不是圖表，它是你用來加載或編輯后用來保存數據的，你可以添加你項目所需要的圖表配置信息，不需要保存或修改圖表，GoJs會將Model渲染成圖表。
這兒有一個事例是關于圖表和模型的：
?

運行代碼后會生成三個節點，這兒生成的就是圖表，圖表中包含三個節點

點擊背景可以拖動，
選中一個節點可以拖動
可以復制，粘貼
可以使用delete刪除
可以使用ctrl+z或ctrl+y進行undo或redo

給節點添加樣式

節點樣式是通過圖表對象的模板以及一些設置屬性實現的，要創建一個節點我們有幾個類需要處理。
- Shape:外形, 去展示預定義的或默認的尺寸及顏色等
- TextBlock：文本塊, 展示各式各樣的字體
- Picture：圖片, 展示圖片
-?Panel：面板，可以放置其他對象像tables等
所有的這些塊都是圖表對象的一部分，我們可以訪問?GraphObject的屬性，方法、節點對象是?GraphObject而不是Document對象，所以我們在創建的時候不能像平常創建document對象一樣。
我們想讓model對象影響節點的顯示，這里是通過數據綁定實現的。

默認的節點模板很簡單：一個包含一個文本塊的節點。TextBlock的text屬性和模型數據的key屬性之間存在數據綁定。在代碼中，模板如下所示：

myDiagram.nodeTemplate =$(go.Node,$(go.TextBlock,// TextBlock.text is bound to Node.data.keynew go.Binding("text", "key")));

TextBlocks, Shapes, 和Pictures是GoJ的基本構建塊。TextBlocks不能包含圖像；Shapes不能包含文本。如果希望節點顯示一些文本，則必須使用TextBlocks。如果你想畫或填充一些幾何圖形，你必須使用一個Shapes。

一般來說，節點模板的結構如下所示：

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的嵌套可以是任意深度的，每個類都有自己獨特的屬性集可供使用，表明總體思路。

現在，我們已經了解了如何制作Node模板，讓我們來看一個實例。我們將制作一個在組織圖中常見的簡單模板。

"Horizontal"：面板類型的節點，意味著其元素將水平并排布置。它有兩個要素：

Picture 為人像，與圖像源數據綁定
?TextBlock 用于名稱，并綁定文本數據

效果如下圖：

當圖像或者數據未加載時，我們可能希望顯示一些默認狀態。

各種模型

為了在我們的圖表中加入鏈接，基本模型不會對其進行剪裁。我們可以選擇GoJS中另外兩個模型中的一個，這兩個模型都支持鏈接。這些是GraphlinkModel和TreeModel。（請在此處閱讀有關模型的更多信息。

在GraphlinkModel中，我們有model。除了模型之外，還有linkDataArray。nodeDataArray。它包含一個JavaScript對象數組，每個對象通過指定“to”和“from”節點鍵來描述鏈接。下面是一個示例，其中節點A鏈接到節點B，節點B鏈接到節點C：

GraphlinkModel允許節點之間有任意數量的鏈接，可以向任意方向移動。從A到B可能有十個鏈接，從B到A可能有三個反向鏈接。

TreeModel的工作原理有點不同。樹模型中的鏈接不是維護單獨的鏈接數據數組，而是通過為節點數據指定“parent”來創建的。然后從該關聯創建鏈接。下面是與樹模型相同的示例，其中節點a鏈接到節點B，節點B鏈接到節點C：

var model = $(go.TreeModel); model.nodeDataArray = [ { key: "A" }, { key: "B", parent: "A" }, { key: "C", parent: "B" } ]; myDiagram.model = model;

TreeModel比GraphlinkModel簡單，但它不能建立任意鏈接關系，例如同兩個節點之間的多個鏈接，或具有多個父節點。我們的組織結構圖是一個簡單的層次樹狀結構，因此我們將選擇TreeModel作為本例的示例。

首先，我們將通過添加幾個節點、使用樹模型并在數據中指定鍵和父節點來完成數據。

圖形布局

正如您所看到的，樹模型自動創建必要的鏈接來關聯節點，但很難判斷誰是誰的父節點。

圖表有一個默認布局，該布局會獲取所有沒有位置的節點，并為它們提供位置，將它們排列在網格中。我們可以明確地給每個節點一個位置來整理混亂的組織，但在我們的例子中，作為一個更簡單的解決方案，我們可以使用一個布局，自動為我們提供良好的位置。

在使用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還有其他幾個布局，你可以在這里閱讀。

到目前為止，將布局添加到圖表和模型中，我們可以看到的效果如下圖：

我們的圖表開始看起來像一個合適的組織結構圖，但我們可以通過鏈接做得更好。

連線模板?

我們將構建一個新的鏈接模板，該模板將更好地適應我們寬大的方形節點。鏈接不同于節點，主要元素是鏈接的形狀，必須是由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和TreeLayout結合起來，我們最終得到了完整的組織結構圖。下面完整的代碼，生成的圖表如下：

更多內容

如果需要教程，例如GraphObject操縱教程，也可以在YouTube上觀看教程。

還可以考慮仔細閱讀這些示例，看看GoJS可能使用的一些圖表，或者閱讀技術介紹，深入了解GoJS的組件。

總結

以上是生活随笔為你收集整理的GoJS中文文档的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。