GoJS图表组件简介

下载GoJS最新版本

GoJS是一个JavaScript库，可让您在现代Web浏览器中轻松创建交互式图表。 GoJS支持图形模板和图形对象属性的数据绑定以模拟数据。您只需要保存和恢复模型，该模型由包含应用程序所需属性的简单JavaScript对象组成。许多预定义的工具和命令实现了大多数图表所需的标准行为。外观和行为的定制主要是设置属性的问题。

一个简单的GoJS图

以下代码定义了一个节点模板和模型数据，它生成了一个包含少量节点和链接的小图。

   // For conciseness. See the "Building Parts" intro page for morevar $ = go.GraphObject.make;// the node template describes how each Node should be constructeddiagram.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.colornew go.Binding("fill", "color")),$(go.TextBlock,{ margin: 3 },  // some room around the text// bind TextBlock.text to Node.data.keynew go.Binding("text", "key")));// the Model holds only the essential information describing the diagramdiagram.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 redodiagram.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：

<!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>

购买GoJS正版授权，请点击“咨询在线客服”哟！

转载于:https://juejin.im/post/5cecdee2e51d4510aa011486