【GoJS教程】开始使用GoJS、图表和模型

最新推荐文章于 2024-07-18 11:13:00 发布

xiaochuachua

最新推荐文章于 2024-07-18 11:13:00 发布

阅读量968

点赞数

分类专栏：产品文章标签： GoJS 流程图图表图表控件 HTMl

产品专栏收录该内容

380 篇文章 9 订阅

订阅专栏

本文是GoJS教程，介绍了如何开始使用GoJS这个JavaScript库创建交互式图表。内容包括如何加载库、定义图表div元素、创建空图，以及探讨GoJS的模型-视图架构，讲解模型如何管理数据并实现图表的可视化。文章提供了实例，展示如何实现图表的互动功能，如平移、选择、移动节点等，并提到了撤销管理器的支持。

摘要由CSDN通过智能技术生成

下载GoJS最新版本

准备

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 library

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.36/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");

创建了一个空图：

GoJS

请注意，这go是所有GoJS类型所在的“命名空间” 。GoJS类的所有代码使用，例如Diagram或Node或Panel或Shape或TextBlock都将以“ go.” 为前缀。本文将通过示例向您展示如何使用它go.GraphObject.make来构建GoJS对象。有关更多详细信息，请阅读GoJS中的构建对象。使用$作为缩写go.GraphObject.make 非常方便我们将从现在开始使用它。如果你使用$的其他代码中的东西，你总是可以选择一个不同的短变量名称，如$$或MAKE或GO。

图表和模型

图的节点和链接是由模型管理的数据的可视化。 GoJS有一个模型 - 视图架构，其中Models包含描述节点和链接的数据（JavaScript对象的数组），Diagrams充当视图，使用实际的Node和Link对象可视化这些数据。模型，而不是图表，是您加载然后在编辑后保存的内容。您可以在模型中的数据对象上添加应用程序所需的任何属性; 您不添加属性或修改Diagram和GraphObject类的原型。

这是一个模型和图表的示例，后面是它生成的实际图表：

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "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;

GoJS