当前位置：首页 > 前端技术 > javascript >内容正文

javascript

GoJS中文文档

发布时间：2023/12/14 javascript 53 豆豆

生活随笔收集整理的这篇文章主要介绍了 GoJS中文文档小编觉得挺不错的,现在分享给大家,帮大家做个参考.

GoJS是一个用于实现交互式图表的JavaScript库。本页将向您展示使用GoJS的要点。

因为GoJS是一个依赖HTML5特性的JavaScript库，所以你开发的页面是在HTML5的基础上。当然，首先需要加载库：

<!DOCTYPE html>  <html> <head>  <script src="go-debug.js"></script>

您可以到下载页面下载最新版 GoJS（包含所有例子），或者直接引用 CDN 文件：

每个 GoJS 图形实例都需要一个 HTML 容器 <div> 并明确指定其大小：

<div id="myDiagramDiv"style="width:400px; height:150px; background-color: #DAE4E4;"></div>

在 JS 代码中，需要将 <div> 的 id 作为参数来创建图形。

var $ = go.GraphObject.make; var myDiagram = $(go.Diagram, "myDiagramDiv");

注意，go是命名空间，所有的GoJs的类型都依赖于它，所有使用GoJs的类例如Diagram 、Node 、 Panel 、Shape 、 TextBlock都需要加前缀go.，

这篇文章将向您展示如何使用go.GraphObject.make去创建GoJs对象，想了解更多的信息，请点击 http://gojs.net/latest/intro/buildingObjects.html
这里就相当于一个变量，表示命名空间，如果你的项目中有使用到例如Jquery，也是使用的就相当于一个变量，表示命名空间，如果你的项目中有使用到例如Jquery，也是使用的,你可以将GoJs的命名空间变量随意定义一个，例如GO,make,$$等

图形和模型

节点和连线是图表必须的，他们是通过Model管理的，GoJs有一个model-view视图解析器，这里的模型（Model）数据描述了节点（node）,连线（link）,图表行为，然后去真正渲染节点和连线。model不是图表，它是你用来加载或编辑后用来保存数据的，你可以添加你项目所需要的图表配置信息，不需要保存或修改图表，GoJs会将Model渲染成图表。
这儿有一个事例是关于图表和模型的：

运行代码后会生成三个节点，这儿生成的就是图表，图表中包含三个节点

点击背景可以拖动，
选中一个节点可以拖动
可以复制，粘贴
可以使用delete删除
可以使用ctrl+z或ctrl+y进行undo或redo

给节点添加样式

节点样式是通过图表对象的模板以及一些设置属性实现的，要创建一个节点我们有几个类需要处理。
- Shape:外形, 去展示预定义的或默认的尺寸及颜色等
- TextBlock：文本块, 展示各式各样的字体
- Picture：图片, 展示图片
- Panel：面板，可以放置其他对象像tables等
所有的这些块都是图表对象的一部分，我们可以访问 GraphObject的属性，方法、节点对象是 GraphObject而不是Document对象，所以我们在创建的时候不能像平常创建document对象一样。
我们想让model对象影响节点的显示，这里是通过数据绑定实现的。

默认的节点模板很简单：一个包含一个文本块的节点。TextBlock的text属性和模型数据的key属性之间存在数据绑定。在代码中，模板如下所示：

myDiagram.nodeTemplate =$(go.Node,$(go.TextBlock,// TextBlock.text is bound to Node.data.keynew go.Binding("text", "key")));

TextBlocks, Shapes, 和Pictures是GoJ的基本构建块。TextBlocks不能包含图像；Shapes不能包含文本。如果希望节点显示一些文本，则必须使用TextBlocks。如果你想画或填充一些几何图形，你必须使用一个Shapes。

一般来说，节点模板的结构如下所示：

myDiagram.nodeTemplate = $(go.Node, "Vertical", // second argument of a Node/Panel can be a Panel type /* set Node properties here */ { // the Node.location point will be at the center of each node locationSpot: go.Spot.Center }, /* add Bindings here */ // example Node binding sets Node.location to the value of Node.data.loc new go.Binding("location", "loc"), /* add GraphObjects contained within the Node */ // this Shape will be vertically above the TextBlock $(go.Shape, "RoundedRectangle", // string argument can name a predefined figure { /* set Shape properties here */ }, // example Shape binding sets Shape.figure to the value of Node.data.fig new go.Binding("figure", "fig")), $(go.TextBlock, "default text", // string argument can be initial text string { /* set TextBlock properties here */ }, // example TextBlock binding sets TextBlock.text to the value of Node.data.key new go.Binding("text", "key")) );

Panels 面板中GraphObjects的嵌套可以是任意深度的，每个类都有自己独特的属性集可供使用，表明总体思路。

现在，我们已经了解了如何制作Node模板，让我们来看一个实例。我们将制作一个在组织图中常见的简单模板。

"Horizontal"：面板类型的节点，意味着其元素将水平并排布置。它有两个要素：

Picture 为人像，与图像源数据绑定
TextBlock 用于名称，并绑定文本数据

效果如下图：

当图像或者数据未加载时，我们可能希望显示一些默认状态。

各种模型

为了在我们的图表中加入链接，基本模型不会对其进行剪裁。我们可以选择GoJS中另外两个模型中的一个，这两个模型都支持链接。这些是GraphlinkModel和TreeModel。（请在此处阅读有关模型的更多信息。

在GraphlinkModel中，我们有model。除了模型之外，还有linkDataArray。nodeDataArray。它包含一个JavaScript对象数组，每个对象通过指定“to”和“from”节点键来描述链接。下面是一个示例，其中节点A链接到节点B，节点B链接到节点C：

GraphlinkModel允许节点之间有任意数量的链接，可以向任意方向移动。从A到B可能有十个链接，从B到A可能有三个反向链接。

TreeModel的工作原理有点不同。树模型中的链接不是维护单独的链接数据数组，而是通过为节点数据指定“parent”来创建的。然后从该关联创建链接。下面是与树模型相同的示例，其中节点a链接到节点B，节点B链接到节点C：

var model = $(go.TreeModel); model.nodeDataArray = [ { key: "A" }, { key: "B", parent: "A" }, { key: "C", parent: "B" } ]; myDiagram.model = model;

TreeModel比GraphlinkModel简单，但它不能建立任意链接关系，例如同两个节点之间的多个链接，或具有多个父节点。我们的组织结构图是一个简单的层次树状结构，因此我们将选择TreeModel作为本例的示例。

首先，我们将通过添加几个节点、使用树模型并在数据中指定键和父节点来完成数据。

图形布局

正如您所看到的，树模型自动创建必要的链接来关联节点，但很难判断谁是谁的父节点。

图表有一个默认布局，该布局会获取所有没有位置的节点，并为它们提供位置，将它们排列在网格中。我们可以明确地给每个节点一个位置来整理混乱的组织，但在我们的例子中，作为一个更简单的解决方案，我们可以使用一个布局，自动为我们提供良好的位置。

在使用TreeModel的基础上，我们想要显示一个层次结构，最自然的布局选择是TreeLayout。TreeLayout默认为从左到右流动，因此为了使其从上到下流动（这在组织图中很常见），我们将angle属性设置为90。

在GoJS中使用布局通常很简单，但每种布局都有许多影响结果的属性，每个布局（如TreeLayout Demo）都有展示其属性的示例。

// define a TreeLayout that flows from top to bottom myDiagram.layout = $(go.TreeLayout, { angle: 90, layerSpacing: 35 });

GoJS还有其他几个布局，你可以在这里阅读。

到目前为止，将布局添加到图表和模型中，我们可以看到的效果如下图：

我们的图表开始看起来像一个合适的组织结构图，但我们可以通过链接做得更好。

连线模板

我们将构建一个新的链接模板，该模板将更好地适应我们宽大的方形节点。链接不同于节点，主要元素是链接的形状，必须是由GoJS动态计算其几何体的形状。我们的链接将由这个形状组成，其笔划比正常的笔划略厚，由黑色变为深灰色。与默认链接模板不同，我们没有箭头。我们将把Link 的“routing ”属性“Normal”改为“Orthogonal”，并设置一个边框圆角。

// define a Link template that routes orthogonally, with no arrowhead myDiagram.linkTemplate = $(go.Link, // default routing is go.Link.Normal // default corner is 0 { routing: go.Link.Orthogonal, corner: 5 }, $(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape // if we wanted an arrowhead we would also add another Shape with toArrow defined: // $(go.Shape, { toArrow: "Standard", stroke: null } );

将链接模板与节点模板TreeModel和TreeLayout结合起来，我们最终得到了完整的组织结构图。下面完整的代码，生成的图表如下：

总结

以上是生活随笔为你收集整理的GoJS中文文档的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇：一支笔的测试点_一支笔的测试
下一篇： Python爬虫-JS破解openlaw