GoJS 优势

STRENGTHS

   

GoJS可以轻松地构建节点、链接和组的交互式图表，并提供可定制的模板和布局。

GoJS是一款专业的JavaScript平台下的绘图控件，完全支持HTML5，可以进行数据流程图、树形图、网络图、思维导图、网格图、社会网络图、流程图、组织图、实体关系图等，完全支持各种标准的自定义功能，支持数据绑定和模型，可用于移动平台。

界面展示

INTERFACE

GoJS  

INTRODUCTION

• 

  全交互式图表

• 

  可扩展布局和工具系统

• 

  数据绑定和模型

• 

  交易状态和撤消管理

• 

  移动支持

• 

  支持主要的框架，如React、Angular

• GoJS是用于实现交互式图的JavaScript库。因为GoJS是依赖HTML5功能的JavaScript库，所以您需要确保页面声明它是HTML5文档。

  

• // 图表和模型 //

  图的节点和链接是由模型管理的数据的可视化。 GoJS具有模型视图架构，其中模型保存描述节点和链接的数据（JavaScript对象的数组），而图作为视图使用实际的Node和Link对象可视化此数据。在编辑后加载然后保存的是模型，而不是图。您可以在模型中的数据对象上添加应用程序所需的任何属性；您不向Diagram和GraphObject类添加属性或修改其原型

  

• // 样式节点 //

  通过创建由GraphObject组成的模板并在这些对象上设置属性来设置节点的样式。要创建一个Node，我们可以使用几个构建基块类：
  ●  Shape，以显示带有颜色的预定义或自定义几何
  ●  TextBlock，以显示（可能是可编辑的）各种字体的文本
  ●  图片，以显示图像，包括SVG文件
  ●  Panel，用于容纳其他对象集合的容器，这些对象可以根据Panel的类型以不同的方式定位和调整大小（例如桌子，垂直堆栈和拉伸容器）
  所有这些构件都是从GraphObject抽象类派生的，因此我们随便将它们称为GraphObjects或对象或元素。

  

• // 型号种类 //

  使用自定义节点模板，我们的图变得很漂亮，但也许我们想展示更多。也许我们希望组织结构图显示Don Meow确实是卡特尔的老板。因此，我们将通过添加一些链接以显示各个节点之间的关系以及一个自动放置节点的布局来创建完整的组织结构图。

  

• // 图表布局 //

  图具有默认布局，该布局采用所有没有位置的节点并将其分配给它们，然后将它们排列在网格中。我们可以显式地为每个节点分配一个位置，以解决这种组织混乱的情况，但是，在本例中，作为一种更简单的解决方案，我们将使用一种布局，该布局会自动为我们提供良好的位置。

  

• // 链接模板 //

  我们将构建一个新的Link模板，该模板将更适合我们宽阔的Boxy节点。一个链接是一种不同的部分，而不是像一个节点。链接的主要元素是链接的形状，并且必须是一个形状，其形状将由GoJS动态计算。我们的链接将仅由这种形状组成，其笔触比正常的笔触要粗一些，并且深灰色而不是黑色。