开始使用GoJS

旧巷老猫 提交于 2019-12-19 23:17:11

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

由于GoJS是一个依赖于HTML5功能的JavaScript库,因此您需要确保您的页面声明它是一个HTML5文档。当然,您需要加载库:

<!DOCTYPE html>  <!-- HTML5 document type -->
<html>
<head>
  <!-- use go-debug.js when developing and go.js when deploying -->
  <script src="go-debug.js"></script>
  . . .

您可以在这里下载GoJS(和所有样本)或者你可以直接链接到GoJS提供图书馆CDNJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.8/go-debug.js"></script>

每个GoJS图都包含在<div>HTML页面中的HTML 元素中,您可以给出明确的大小:

<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
     In this case we also add a background color so we can see that area. -->
<div id="myDiagramDiv"
     style="width:400px; height:150px; background-color: #DAE4E4;"></div>

在JavaScript代码您传递<div>id制作图表时:(一起创建一个空图:)

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

注意go是所有GoJS类型所在的“命名空间” GoJS类的所有代码使用,如Diagram或Node或Panel或Shape或TextBlock都将以“ go.” 作为前缀

本文将向您展示如何使用go.GraphObject.make构建GoJS对象。有关更多详细信息,请参阅GoJS中的构建对象使用$作为缩写go.GraphObject.make 是非常方便,我们将从现在开始使用它。如果你使用$的其他代码中的东西,你总是可以选择一个不同的短变量名称,如$$MAKEGO

图表和模型

图的节点和链接是由模型管理的数据的可视化。 GoJS有一个模型视图体系结构,其中,Model拥有描述节点和链接的数据(JavaScript对象的数组),而Diagrams作为视图来使用实际的Node和Link对象可视化这些数据。模型,而不是图表,是您加载的,然后编辑后保存。您可以在模型中的数据对象上添加应用程序所需的任何属性; 您不添加属性或修改Diagram和GraphObject类的原型。

下面是一个Model和Diagram的例子,其后面是它生成的实际图表:

ar $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

var myModel = $(go.Model);
// in the model data, each node is represented by a JavaScript object:
myModel.nodeDataArray = [
  { key: "Alpha" },
  { key: "Beta" },
  { key: "Gamma" }
];
myDiagram.model = myModel;

该图显示了模型中的三个节点。一些互动已经成为可能:

  • 单击并拖动上图中的背景以平移视图。
  • 单击一个节点进行选择,或者按下并拖动一个节点来移动它。
  • 要创建选择框,请单击并按住背景,然后开始拖动。
  • 使用CTRL-C和CTRL-V,或者控制拖放来制作选择的副本。
  • 按Delete键删除所选节点。(阅读更多键盘命令。)
  • 由于启用了撤销管理器,因此CTRL-Z和CTRL-Y将会撤消并重做移动和复制和删除。

样式节点

节点通过创建由GraphObjects组成的模板和在这些对象上设置属性来设计风格。为了创建一个Node,我们有几个构建块类可供我们使用:

  • 形状,以颜色显示预定义或自定义几何
  • TextBlock,以各种字体显示(可编辑)文本
  • 图片,显示图像
  • 面板,容器可以根据面板的类型(如桌子,垂直堆叠和拉伸容器)收集可定位和大小不同的其他物体的集合,

所有这些构建块都是从 GraphObject抽象类派生的,所以我们随便将它们引用为GraphObjects或对象或元素。请注意,GraphObject 不是 HTML DOM元素,因此在创建或修改此类对象时没有太多的开销。

我们希望模型数据属性影响我们的节点,这是通过数据绑定的方式完成的。数据绑定允许我们通过自动将这些GraphObjects上的属性设置为从模型数据中获取的值来更改节点中GraphObjects的外观和行为。模型数据对象是纯JavaScript对象。您可以选择在模型中的节点数据上使用您喜欢的任何属性名称。

默认的Node模板很简单:包含一个TextBlock的Node。TextBlock的text属性和模型数据的key属性之间存在数据绑定在代码中,模板看起来像这样:

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!