GoJS圖表組件簡介

時間 2019-11-11

標籤 gojs 圖表組件簡介简体版

原文原文鏈接

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

一個簡單的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;

這將建立如下圖表：npm

您能夠經過多種方式與此圖表進行交互：編程

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

您還能夠用手指在觸摸設備上平移，捏放大，選擇，複製，移動，刪除，撤消和重作。大多數能夠從鍵盤調用的命令均可以從默認的上下文菜單調用，您能夠經過按下手指並保持靜止一下子來得到該命令。瀏覽器

文檔中全部示例的獨特之處在於它們都是「實時」 - 沒有屏幕截圖！它們是由顯示的源代碼實現的實際Diagram。您能夠與它們進行交互 - 有些甚至能夠顯示動畫。app

若是您想了解更多關於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：

<!DOCTYPE html>  <!-- Declare standards mode. -->
  <html>
    <head>
    . . .
    <!-- Include the GoJS library. -->
    <script src="go-debug.js"></script>

若是您使用的是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元素大小相同。

<body>
    . . .
    <!-- The DIV for a Diagram needs an explicit size or else we won't see anything.
         In this case we also add a border to help see the edges. -->
    <div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>

而後，您可使用對該Div元素的引用在JavaScript中建立Diagram。經過構造純JavaScript對象並將其添加到圖的模型來構建圖。請注意，JavaScript代碼中對GoJS類型（如Diagram）的全部引用都以「 go.」爲前綴。

<!-- Create the Diagram in the DIV element using JavaScript. -->
  <!-- The "go" object is the "namespace" that holds all of the GoJS types. -->
  <script>
    var diagram = new go.Diagram("myDiagramDiv");
    diagram.model = new go.GraphLinksModel(
      [{ key: "Hello" },   // two node data, in an Array
       { key: "World!" }],
      [{ from: "Hello", to: "World!"}]  // one link data, in an Array
    );
  </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。