GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
GoJS is a library for implementing diagrams in your JavaScript and HTML5 Canvas applications. GoJS is fast and lightweight, yet powerful enough to greatly simplify your JavaScript / Canvas programming.
GoJS可以輕松構建節點，鏈接和組的交互式圖表，以及可自定義的模板和布局。
完全互動的圖表
可擴展的布局和工具系統
數據綁定和模型
事務狀態和撤消管理
移動支持
數據綁定和模板
GoJS支持圖形模板和對象屬性與模型數據的數據綁定。只需要保存和恢復由簡單JavaScript對象組成的模型。GoJS使您可以輕松地以JSON格式讀取和編寫模型。
完整的文檔
我們通過交互式示例提供全面的API文檔和GoJS概念的深入概述。有超過90個樣本，您會發現許多GoJS屬性和方法的例子。
瀏覽器中的閃電快速繪圖
GoJS利用HTML Canvas來支持高性能圖表。為了創建靜態文檔和可打印資源，GoJS支持將圖表導出為圖像和SVG。GoJS支持所有現代瀏覽器（IE9 +），包括移動瀏覽器。
功能
折疊和展開樹形圖
作為應用于大型圖形的一項通用技術，此功能允許用戶控制樹形圖的顯示部分。 GoJS 中內置了展開和折疊子樹功能，如以下示例所示，其中與 IsExpandedTree 屬性綁定了一個按扭。
子圖/組
許多圖形類型，例如工作流程圖或業務流程建模符號(BPMN)，使用分組技術來組織圖形。 GoJS 中支持分組功能，包括支持與層級結構的定義相關的數據綁定以及在 DataTemplate 中定義組的外觀的數據綁定。
 |  |
缺省組 DataTemplate | DataTemplate XAML 所定義的組 |
子組也可展開/折疊，如下圖所示：
子圖外部的鏈接可連接至子圖內部的節點、子圖的邊緣，或者子圖邊界的邊緣的特定端口：
帶有輸入和輸出端口的子圖 ;
層
可將圖形對象置于不同層中以定義其 Z-order 。缺省情況下，DiagramPanel 具有 9 層，其中包括背景層、缺省和前景節點鏈接層以及輸入工具和裝飾（例如選擇手柄）層。
面板控件
許多圖形應用程序使用面板來支持向視圖中拖放新元素。 GoJS也提供了一種類型特別的面板圖形。其中以矩形網格形式顯示一系列節點。在此面板中，您可以使用與常規圖形不同的多種 DataTemplate，以針對每項提供更小更簡潔的外觀。
Logic Circuit 中的面板控件
預覽控件
此控件顯示另一圖形的整個模型的一個縮略圖以及該圖形的視圖。用戶可單擊預覽控件或拖入該控件以查看其他圖形的視圖。
剪切/復制/粘貼
缺省情況下，標準剪貼板功能處于啟用狀態，但是當應用程序不需要該功能時，將禁用標準剪貼板功能。
無限制 Undo / Redo 操作
為了支持無限制并且自定義的 undo 和 redo 操作，UndoManager 跟蹤對圖形模型所作的更改。更改按事務進行邏輯分組。
縮放/滾動/鏡頭移動
GoJS 支持滾動圖形和縮放圖形功能。您可通過設置 DiagramPanel 屬性來按程式執行滾動、放大或縮小操作。用戶可使用滾動條或平移工具滾動圖形，可使用 Control-Mouse-Wheel 來放大或縮小圖形。
內置文本編輯
支持圖形中任何文本的內置文本編輯。僅需單擊啟用文本編輯的任何文本即可對該文本進行編輯。
單選/多選/自定義裝飾
GoJS 控件支持選擇功能，此控件簡化訪問與當前所選節點綁定的數據的過程。您可通過提供定制數據模板來自定義選擇句柄和工具手柄（例如，用于調整大小）。
預定義圖形形狀以及箭頭
GoJS 中預定義了超個 195 種的常用圖形形狀以用于常規節點定義中。 樣本顯示了所有這些圖形形狀。
Features
Collapsing and Expanding Trees
A common technique for large graphs is to allow the user to control the visibility of parts of that tree. Expanding and collapsing subtrees is built into GoJS, as shown in this example with a TreeExpanderButton.
Subgraphs / Groups
Many graph types, such as workflow or Business Process Modeling Notation (BPMN), use grouping techniques to organize diagrams. Groups are supported within GoJS, including support for data binding for the definition of the hierarchy and in templates that define the group's appearance.
 |
 |
| Default Group Template |
Group defined by custom groupTemplate |
and subgraphs can expand / collapse too:
Links from outside the subgraph can connect to a node within the subgraph, to the edge of the subgraph, or to specific ports on the edge of the subgraph border:
Subgraph with input and output ports
Layers
Graphical objects can be placed within layers to define their Z-order. A Diagram has layers by default, including layers for background, default and foreground nodes and links, as well as layers for input tools and adornments such as selection handles.
Palette for drag and drop
Many diagram applications use a palette to support drag and drop of new elements to the view. GoJS also provides a specialized kind of diagram called the Palette. It displays a number of nodes in a rectangular grid-like arrangement. You can use different templates than in your regular Diagram, in order to provide a smaller or simpler appearance for each item.
Pallette in Logic Circuit samples
Overview View
It displays a thumbnail of the whole model shown by another Diagram and shows that diagram’s viewport. The user can click or drag in the Overview to scroll the other diagram’s viewport.
Cut / Copy / Paste
Standard clipboard actions are enabled by default, but may be disabled for applications where it isn't desired.
Unlimited Undo / Redo
To support unlimited and customizable undo and redo, the UndoManager tracks changes to the diagram’s model. Changes are logically grouped together by transactions.
Zooming / Scrolling / Panning
GoJS supports scrolling around and zooming into the diagram. You can scroll and zoom in or out programmatically by setting DiagramPanel properties. The user can scroll using the scrollbars or the PanningTool, and the user can zoom in or out using Control-Mouse-Wheel.
In-place text editing
In-place text editing of any text in the diagram is supported. Just click on any text that is enabled for text editing.
Selection / Multiple Selection / Customizable adornments
GoJS controls support selection, and it makes it easy to data-bind to the currently selected node. You can customize selection handles and tool handles (e.g. for resizing) by supplying custom templates.
Predefined Shapes and Arrowheads
GoJS comes with over 195+ common shapes predefined for use in common node definitions. The sample shows all of these shapes.The Arrowheads sample shows the 65 predefined arrowhead designs.
金喜正規買球 
相關產品
正式授權
授權相關問題
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線