GoJS圖表組件簡介

下載GoJS最新版本

    GoJS是一個JavaScript庫，可讓您在現代Web瀏覽器中輕松創建交互式圖表。 GoJS支持圖形模板和圖形對象屬性的數據綁定以模擬數據。您只需要保存和恢復模型，該模型由包含應用程序所需屬性的簡單JavaScript對象組成。許多預定義的工具和命令實現了大多數圖表所需的標準行為。外觀和行為的定制主要是設置屬性的問題。

一個簡單的GoJS圖

    以下代碼定義了一個節點模板和模型數據，它生成了一個包含少量節點和鏈接的小圖。

   // 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;

    這將創建以下圖表：

    您可以通過多種方式與此圖表進行交互：

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

    您還可以用手指在觸摸設備上平移，捏放大，選擇，復制，移動，刪除，撤消和重做。大多數可以從鍵盤調用的命令都可以從默認的上下文菜單調用，您可以通過按下手指并保持靜止一會兒來獲得該命令。

    文檔中所有示例的獨特之處在于它們都是“實時” - 沒有屏幕截圖！它們是由顯示的源代碼實現的實際Diagram。您可以與它們進行交互 - 有些甚至可以顯示動畫。

    如果您想了解更多關于GoJS可以做什么的示例，請參閱GoJS Samples目錄。為了便于搜索JavaScript代碼和文檔或通過修改示例進行實驗，您可以通過各種方式安裝GoJS工具包：

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

GoJS Concepts

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

    每個圖都有一個模型，用于保存和解釋您的應用程序數據，以確定節點到節點的鏈接關系和組成員關系。大多數部件都是數據綁定到您的應用程序數據。該圖自動為模型的Model.nodeDataArray中的每個數據項創建一個Node或Group， 并為模型的GraphLinksModel.linkDataArray中的每個數據項創建一個Link。您可以向每個數據對象添加所需的任何屬性，但每種模型只需要幾個屬性。

    每個節點或鏈接通常由聲明其外觀和行為的模板定義。每個模板由面板號第GraphObject S，從而如TextBlock的 S或形狀秒。所有部件都有默認模板，但幾乎所有應用程序都會指定自定義模板，以實現所需的外觀和行為。GraphObject屬性與模型數據屬性的數據綁定使每個節點或鏈接對數據唯一。

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

    工具處理鼠標和鍵盤事件。每個圖都有許多工具可以執行交互式任務，例如選擇零件或拖動它們或在兩個節點之間繪制新鏈接。該ToolManager確定哪些工具應該運行，根據鼠標事件和目前的情況。

    每個圖還有一個CommandHandler，它實現了各種命令，例如Delete或Copy。當ToolManager運行時，CommandHandler解釋鍵盤事件，例如control-Z。

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

    在概述類允許用戶看到整個模型和控制一下它的一部分，該圖顯示。的調色板類認為，用戶可以拖動和放下到的圖的部分。

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

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

創建圖表

    GoJS不依賴于任何JavaScript庫或框架，因此您應該能夠在任何環境中使用它。但是它確實需要環境支持現代HTML和JavaScript。

加載GoJS

    在您可以執行任何JavaScript代碼來構建Diagram之前，您需要加載GoJS庫。當您包含庫時，“go”JavaScript對象將包含所有GoJS類型。在開發過程中，我們建議您加載“go-debug.js”而不是“go.js”，以獲得額外的運行時錯誤檢查和調試功能。

建議您聲明您的網頁支持現代HTML：

    
          . . .

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

    在ES6（ECMAScript 2015）或TypeScript代碼中，只需導入“go.js”庫：

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

    取決于您的npm環境：

import * as go from "gojs";

在Div元素中托管GoJS

    每個圖必須由HTML Div元素托管。 GoJS將管理該Div元素的內容，但您可以像對待任何HTML元素一樣定位和調整Div的樣式。該圖將向該圖將繪制的Div元素添加Canvas元素 - 這是用戶實際看到的內容。Canvas元素的大小自動調整為與Div元素大小相同。

     . . .

    然后，您可以使用對該Div元素的引用在JavaScript中創建Diagram。通過構造純JavaScript對象并將其添加到圖的模型來構建圖。請注意，JavaScript代碼中對GoJS類型（如Diagram）的所有引用都以“go.”為前綴。

購買GoJS正版授權，請點擊“”喲！