GoJS图表组件简介

时间 2019-11-11

标签 gojs 图表组件简介繁體版

原文原文链接

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

一个简单的GoJS图

如下代码定义了一个节点模板和模型数据，它生成了一个包含少许节点和连接的小图。程序员

// For conciseness. See the "Building Parts" intro page for more
      var $ = go.GraphObject.make;

      // the node template describes how each Node should be constructed
      diagram.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.color
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: 3 },  // some room around the text
            // bind TextBlock.text to Node.data.key
            new go.Binding("text", "key"))
        );

      // the Model holds only the essential information describing the diagram
      diagram.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 redo
      diagram.undoManager.isEnabled = true;

这将建立如下图表：npm

您能够经过多种方式与此图表进行交互：编程

您能够经过单击选择零件。选定的节点用Adornment突出显示，Adornment是围绕节点的蓝色矩形。所选连接在连接路径后面以蓝线突出显示。
能够一次选择多个部件。单击以添加到选择时按住Shift键。单击以切换是否选中该部件时按住Control键。
多选的另外一种方法是在背景中的某个点（而不是在某个部分上）进行鼠标按下，稍等片刻，而后拖动一个框。选择鼠标向上时框中的部件。Shift和Control修饰符也适用。
Ctrl-A选择图中的全部部分。
经过选择并拖动来移动一个或多个节点。
复制选定的部件可使用复制/粘贴（Ctrl-C / Ctrl-V）或Ctrl-鼠标拖动。
使用Delete键删除所选部件。
若是滚动条可见或整个零件集合小于图表的可视区域（“视口”），则能够在背景中使用鼠标按下平移图表（而不是在零件上）等候。
使用鼠标滚轮向上和向下滚动，使用Shift鼠标滚轮向左和向右滚动。Ctrl-mouse-wheel放大和缩小。

您还能够用手指在触摸设备上平移，捏放大，选择，复制，移动，删除，撤消和重作。大多数能够从键盘调用的命令均可以从默认的上下文菜单调用，您能够经过按下手指并保持静止一下子来得到该命令。浏览器

文档中全部示例的独特之处在于它们都是“实时” - 没有屏幕截图！它们是由显示的源代码实现的实际Diagram。您能够与它们进行交互 - 有些甚至能够显示动画。app

若是您想了解更多关于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>