创建与开发 GoJS

每个图表必须由一个HTML Div元素托管。 GoJS将管理那个Div元素的内容,但您可以像处理任何HTML元素一样来定位、调整大小和样式化Div元素。

Category: GoJS

GoJS 不依赖任何 JavaScript 库或框架,因此您应该能够在任何环境中使用它。 但是,它确实要求环境支持现代 HTML 和 JavaScript。

正在加载 GoJS

在执行任何用于构建图表的JavaScript代码之前,您需要加载GoJS库。 当您包含库时,”go“JavaScript对象将包含所有的GoJS类型。 在开发过程中,我们建议您加载”go-debug.js”而不是”go.js”,以进行额外的运行时错误检查和调试能力。

我们建议您声明您的网页支持现代HTML:

  

  
  . . .
  
  

如果依赖于你的npm环境:

import * as go from "gojs";

如果您想使用 ECMAScript 模块,请在 go-module.js 中使用 release/ 目录。 然而,您的构建环境可能会自动为您做出这个选择。

扩展类在 TypeScript 中实现,并编译为 extensionsJSM/ 目录中的 ECMAScript 模块。 该目录存在于从我们 网站 或 GitHub 下载的工具包中, 或者在您可以通过 安装的 create-gojs-kit npm 包中。 扩展类编译成可以在 目录中的常规脚本加载的 JavaScript。 npm create gojs-kit@latestextensions/

import { DoubleTreeLayout } from "./path/to/gojs-kit/dist/extensionsJSM/DoubleTreeLayout.js";

如果您使用 RequireJS, GoJS 库支持 UMD 模块定义。 将每个扩展文件复制到您的项目中,并更新其 require 语句 以便您的所有代码加载相同的 GoJS 库,并且只加载一次。

在 Div 元素中托管 GoJS

每个图表必须由一个HTML Div元素托管。 GoJS将管理那个Div元素的内容,但您可以像处理任何HTML元素一样来定位、调整大小和样式化Div元素。 图表将在那个Div元素中添加一个Canvas元素,图表将在其中绘制——这就是用户实际看到的内容。 Canvas元素会自动调整大小,使其与Div元素具有相同的大小。


  . . .
  
  

然后,您可以使用引用该 Div 元素的 JavaScript 代码创建 图表。 通过构建简单的 JavaScript 对象并将它们添加到图表的模型中来构建图表。 请注意,JavaScript 代码中对 GoJS 类型(如 Diagram)的所有引用都以 “go.” 为前缀。




  const diagram = new go.Diagram("myDiagramDiv");
  diagram.model = new go.GraphLinksModel(
    [{ key: 1, text: "Hello" },   // two node data, in an Array
     { key: 2, text: "World!" }],
    [{ from: 1, to: 2 }]  // one link data, in an Array
  );

上面您所看到的“Hello World!”实时示例的全部实现仅需一个HTML DIV元素和一点JavaScript代码。

开发你的图表

GoJS 当发生错误时,会输出错误或警告信息。 在使用 GoJS 开发时,请确保检查浏览器的开发者控制台以获取信息。 库的 “go-debug.js” 版本包含额外的类型检查和错误检查代码,应在开发期间使用。 “go.js” 版本的错误检查较少,但因此更快,应在生产中使用。

您的JavaScript代码应仅使用文档中描述的 API 的属性和方法。 GoJS 库是“最小化”的,因此如果您在调试器中查看 GoJS 类的一个实例, 您会看到许多一两个字母的属性名。所有这些都是您不应使用的内部名称。 目前, Point、Rect、Spot 和 LayoutVertex 上的唯一一字母属性名是“x”和“y”。 唯一的两字母属性名是 InputEvent.up。 否则,您不应尝试在任何 GoJS 定义的对象上使用任何一两个字母的属性名。

不要修改 GoJS 类的原型。
只能使用 API 文档中记录的属性和方法。

你也可以使用TypeScript,以获得更好的“编辑时”和“编译时”类型检查以及“编辑时”文档。 GoJS的TypeScript定义文件名为“go.d.ts”和“go-module.d.ts”,位于与库相同的目录中。 扩展类在TypeScript中实现,可在../extensionsJSM/ 找到,并在../extensionsJSM/../extensions/编译成JavaScript。 将扩展定义复制到你的项目中,并确保它们导入与所有代码相同的GoJS库。

Tags: GoJS 套件, GoJS图表, JavaScript

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部