GoJS圖表組件簡(jiǎn)介

下載GoJS最新版本

    GoJS是一個(gè)JavaScript庫(kù)，可讓您在現(xiàn)代Web瀏覽器中輕松創(chuàng)建交互式圖表。 GoJS支持圖形模板和圖形對(duì)象屬性的數(shù)據(jù)綁定以模擬數(shù)據(jù)。您只需要保存和恢復(fù)模型，該模型由包含應(yīng)用程序所需屬性的簡(jiǎn)單JavaScript對(duì)象組成。許多預(yù)定義的工具和命令實(shí)現(xiàn)了大多數(shù)圖表所需的標(biāo)準(zhǔn)行為。外觀和行為的定制主要是設(shè)置屬性的問題。

一個(gè)簡(jiǎn)單的GoJS圖

    以下代碼定義了一個(gè)節(jié)點(diǎn)模板和模型數(shù)據(jù)，它生成了一個(gè)包含少量節(jié)點(diǎn)和鏈接的小圖。

   // For conciseness. See the "Building Parts" intro page for more
      var $ = go.GraphObject.make;

      // the node template describes how each Node should be constructed
      diagram.nodeTemplate =
        $(go.Node, "Auto",  // the Shape automatically fits around the TextBlock
          $(go.Shape, "RoundedRectangle",  // use this kind of figure for the Shape
            // bind Shape.fill to Node.data.color
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: 3 },  // some room around the text
            // bind TextBlock.text to Node.data.key
            new go.Binding("text", "key"))
        );

      // the Model holds only the essential information describing the diagram
      diagram.model = new go.GraphLinksModel(
      [ // a JavaScript Array of JavaScript objects, one per node;
        // the "color" property is added specifically for this app
        { key: "Alpha", color: "lightblue" },
        { key: "Beta", color: "orange" },
        { key: "Gamma", color: "lightgreen" },
        { key: "Delta", color: "pink" }
      ],
      [ // a JavaScript Array of JavaScript objects, one per link
        { from: "Alpha", to: "Beta" },
        { from: "Alpha", to: "Gamma" },
        { from: "Beta", to: "Beta" },
        { from: "Gamma", to: "Delta" },
        { from: "Delta", to: "Alpha" }
      ]);

      // enable Ctrl-Z to undo and Ctrl-Y to redo
      diagram.undoManager.isEnabled = true;

    這將創(chuàng)建以下圖表：

    您可以通過(guò)多種方式與此圖表進(jìn)行交互：

• 您可以通過(guò)單擊選擇零件。選定的節(jié)點(diǎn)用Adornment突出顯示，Adornment是圍繞節(jié)點(diǎn)的藍(lán)色矩形。所選鏈接在鏈接路徑后面以藍(lán)線突出顯示。
• 可以一次選擇多個(gè)部件。單擊以添加到選擇時(shí)按住Shift鍵。單擊以切換是否選中該部件時(shí)按住Control鍵。
• 多選的另一種方法是在背景中的某個(gè)點(diǎn)（而不是在某個(gè)部分上）進(jìn)行鼠標(biāo)按下，稍等片刻，然后拖動(dòng)一個(gè)框。選擇鼠標(biāo)向上時(shí)框中的部件。Shift和Control修飾符也適用。
• Ctrl-A選擇圖中的所有部分。
• 通過(guò)選擇并拖動(dòng)來(lái)移動(dòng)一個(gè)或多個(gè)節(jié)點(diǎn)。
• 復(fù)制選定的部件可以使用復(fù)制/粘貼（Ctrl-C / Ctrl-V）或Ctrl-鼠標(biāo)拖動(dòng)。
• 使用Delete鍵刪除所選部件。
• 如果滾動(dòng)條可見或整個(gè)零件集合小于圖表的可視區(qū)域（“視口”），則可以在背景中使用鼠標(biāo)按下平移圖表（而不是在零件上）等候。
• 使用鼠標(biāo)滾輪向上和向下滾動(dòng)，使用Shift鼠標(biāo)滾輪向左和向右滾動(dòng)。Ctrl-mouse-wheel放大和縮小。

    您還可以用手指在觸摸設(shè)備上平移，捏放大，選擇，復(fù)制，移動(dòng)，刪除，撤消和重做。大多數(shù)可以從鍵盤調(diào)用的命令都可以從默認(rèn)的上下文菜單調(diào)用，您可以通過(guò)按下手指并保持靜止一會(huì)兒來(lái)獲得該命令。

    文檔中所有示例的獨(dú)特之處在于它們都是“實(shí)時(shí)” - 沒有屏幕截圖！它們是由顯示的源代碼實(shí)現(xiàn)的實(shí)際Diagram。您可以與它們進(jìn)行交互 - 有些甚至可以顯示動(dòng)畫。

    如果您想了解更多關(guān)于GoJS可以做什么的示例，請(qǐng)參閱GoJS Samples目錄。為了便于搜索JavaScript代碼和文檔或通過(guò)修改示例進(jìn)行實(shí)驗(yàn)，您可以通過(guò)各種方式安裝GoJS工具包：

• 從下載中下載ZIP文件。
• 從GITHub上的GoJS下載我們。
• 使用安裝GoJS npm install gojs。

GoJS Concepts

    圖表 s由部分 s組成：節(jié)點(diǎn)可以通過(guò)鏈路連接，并且可以組合在一起成為組 s。所有這些部分都在圖層中聚集在一起，并按布局排列。

    每個(gè)圖都有一個(gè)模型，用于保存和解釋您的應(yīng)用程序數(shù)據(jù)，以確定節(jié)點(diǎn)到節(jié)點(diǎn)的鏈接關(guān)系和組成員關(guān)系。大多數(shù)部件都是數(shù)據(jù)綁定到您的應(yīng)用程序數(shù)據(jù)。該圖自動(dòng)為模型的Model.nodeDataArray中的每個(gè)數(shù)據(jù)項(xiàng)創(chuàng)建一個(gè)Node或Group， 并為模型的GraphLinksModel.linkDataArray中的每個(gè)數(shù)據(jù)項(xiàng)創(chuàng)建一個(gè)Link。您可以向每個(gè)數(shù)據(jù)對(duì)象添加所需的任何屬性，但每種模型只需要幾個(gè)屬性。

    每個(gè)節(jié)點(diǎn)或鏈接通常由聲明其外觀和行為的模板定義。每個(gè)模板由面板號(hào)第GraphObject S，從而如TextBlock的 S或形狀秒。所有部件都有默認(rèn)模板，但幾乎所有應(yīng)用程序都會(huì)指定自定義模板，以實(shí)現(xiàn)所需的外觀和行為。GraphObject屬性與模型數(shù)據(jù)屬性的數(shù)據(jù)綁定使每個(gè)節(jié)點(diǎn)或鏈接對(duì)數(shù)據(jù)唯一。

    該節(jié)點(diǎn)可以被手動(dòng)地定位（交互方式或編程），或者可以由自動(dòng)排列 Diagram.layout以及由每個(gè)Group.layout。節(jié)點(diǎn)位于其左上角點(diǎn)（GraphObject.position）或節(jié)點(diǎn)中的程序員定義點(diǎn)（Part.location和Part.locationSpot）。

    工具處理鼠標(biāo)和鍵盤事件。每個(gè)圖都有許多工具可以執(zhí)行交互式任務(wù)，例如選擇零件或拖動(dòng)它們或在兩個(gè)節(jié)點(diǎn)之間繪制新鏈接。該ToolManager確定哪些工具應(yīng)該運(yùn)行，根據(jù)鼠標(biāo)事件和目前的情況。

    每個(gè)圖還有一個(gè)CommandHandler，它實(shí)現(xiàn)了各種命令，例如Delete或Copy。當(dāng)ToolManager運(yùn)行時(shí)，CommandHandler解釋鍵盤事件，例如control-Z。

    該圖提供了滾動(dòng)圖表部分以及放大或縮小的功能。該圖還包含所有層，而這些層又包含所有部分（節(jié)點(diǎn)和鏈接）。這些部件又由可能嵌套的文本，形狀和圖像組成。內(nèi)存中JavaScript對(duì)象的這種層次結(jié)構(gòu)形成了圖表可能繪制的所有內(nèi)容的“可視樹”。

    在概述類允許用戶看到整個(gè)模型和控制一下它的一部分，該圖顯示。的調(diào)色板類認(rèn)為，用戶可以拖動(dòng)和放下到的圖的部分。

    您可以在圖表中選擇一個(gè)或多個(gè)部件。模板實(shí)現(xiàn)可以在選擇節(jié)點(diǎn)或鏈接時(shí)更改其外觀。該圖還可以添加裝飾以指示選擇并支持諸如調(diào)整節(jié)點(diǎn)大小或重新連接鏈接之類的工具。裝飾品也是工具提示和上下文菜單的實(shí)現(xiàn)方式。

    應(yīng)該在每個(gè)用戶操作的單個(gè)事務(wù)中執(zhí)行 對(duì)Diagram，GraphObject，Model或model數(shù)據(jù)狀態(tài)的所有編程更改，以確保正確更新并支持undo / redo。所有預(yù)定義的工具和命令都執(zhí)行事務(wù)，因此如果啟用了UndoManager，則每個(gè)用戶操作都可以自動(dòng)撤消。 圖表上的DiagramEvent以及Diagrams和GraphObjects上的事件處理程序都會(huì)記錄它們是否在事務(wù)中引發(fā)，或者是否需要執(zhí)行事務(wù)以更改模型或圖表。

創(chuàng)建圖表

    GoJS不依賴于任何JavaScript庫(kù)或框架，因此您應(yīng)該能夠在任何環(huán)境中使用它。但是它確實(shí)需要環(huán)境支持現(xiàn)代HTML和JavaScript。

加載GoJS

    在您可以執(zhí)行任何JavaScript代碼來(lái)構(gòu)建Diagram之前，您需要加載GoJS庫(kù)。當(dāng)您包含庫(kù)時(shí)，“go”JavaScript對(duì)象將包含所有GoJS類型。在開發(fā)過(guò)程中，我們建議您加載“go-debug.js”而不是“go.js”，以獲得額外的運(yùn)行時(shí)錯(cuò)誤檢查和調(diào)試功能。

建議您聲明您的網(wǎng)頁(yè)支持現(xiàn)代HTML：

    
          . . .

    如果您使用的是RequireJS，GoJS支持UMD模塊定義。有關(guān)示例，請(qǐng)參閱Require示例。此外，現(xiàn)在可以使用擴(kuò)展類的模塊化版本../extensionsTS/，其中擴(kuò)展類已被轉(zhuǎn)換為TypeScript并編譯為.js可import編輯的文件。或required。

    在ES6（ECMAScript 2015）或TypeScript代碼中，只需導(dǎo)入“go.js”庫(kù)：

import * as go from "./path/to/gojs/release/go";

    取決于您的npm環(huán)境：

import * as go from "gojs";

在Div元素中托管GoJS

    每個(gè)圖必須由HTML Div元素托管。 GoJS將管理該Div元素的內(nèi)容，但您可以像對(duì)待任何HTML元素一樣定位和調(diào)整Div的樣式。該圖將向該圖將繪制的Div元素添加Canvas元素 - 這是用戶實(shí)際看到的內(nèi)容。Canvas元素的大小自動(dòng)調(diào)整為與Div元素大小相同。

     . . .

    然后，您可以使用對(duì)該Div元素的引用在JavaScript中創(chuàng)建Diagram。通過(guò)構(gòu)造純JavaScript對(duì)象并將其添加到圖的模型來(lái)構(gòu)建圖。請(qǐng)注意，JavaScript代碼中對(duì)GoJS類型（如Diagram）的所有引用都以“go.”為前綴。

購(gòu)買GoJS正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！