GO.js官方文档中文版

最新推荐文章于 2024-05-17 04:18:11 发布

Awna

最新推荐文章于 2024-05-17 04:18:11 发布

阅读量4w

点赞数 3

本文链接：https://blog.csdn.net/forwujinwei/article/details/75316623

版权

GoJs是一个实现图表交互的javaScript库，这篇文章将为你展示使用GoJs时的特征。因为GoJs是依赖hTML5的javaScript库，所以你要确认你开发的页面是在HTML技术的基础上，当然你在使用GoJs之前必须要导入其库。
下面介绍引入GoJs的几种方法
下载GoJs，本地引入

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

通过CDNJS提供的方式引入

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

创建一个明确尺寸的div

<div id="myDiagramDiv"
     style="width:400px; height:150px; background-color: #DAE4E4;"></div>

在javaScript代码中，制定在div下创建图标

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

这样就创建好一个空的图标
注意，go是命名空间，所有的GoJs的类型都依赖于它，所有使用GoJs的类例如Diagram 、Node 、 Panel 、Shape 、 TextBlock都需要加前缀go.，
这篇文章将向您展示如何使用go.GraphObject.make去创建GoJs对象，想了解更多的信息，请点击 http://gojs.net/latest/intro/buildingObjects.html
这里 $就相当于一个变量，表示命名空间，如果你的项目中有使用到例如Jquery，也是使用的$ ,你可以将GoJs的命名空间变量随意定义一个，例如GO,make,$$等

Diagrams and Models

节点和连线是图表必须的，他们是通过Model管理的，GoJs有一个model-view视图解析器，这里的模型（Model）数据描述了节点（node）,连线（link）,图表行为，然后去真正渲染节点和连线。model不是图表，它是你用来加载或编辑后用来保存数据的，你可以添加你项目所需要的图表配置信息，不需要保存或修改图表，GoJs会将Model渲染成图表。
这儿有一个事例是关于图表和模型的，看一生成的图表

var $ = 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;

运行代码后会生成三个节点，这儿生成的就是图表，图表中包含三个节点

点击背景可以拖动，
选中一个节点可以拖动
可以复制，粘贴
可以使用delete删除
可以使用ctrl+z或ctrl+y进行undo或redo

节点样式（Styling Nodes）

节点样式是通过图表对象的模板以及一些设置属性实现的，要创建一个节点我们有几个类需要处理。
- 外形, 去展示预定义的或默认的尺寸及颜色等
- 文本块, 展示各式各样的字体
- 图片, 展示图片
- 面板，可以放置其他对象像tables等
所有的这些块都是图表对象的一部分，我们可以访问图表对象的属性，方法。节点对象是图表对象而不是Document对象，所以我们在创建的时候不能像平常创建document对象一样。
我们想让model对象影响节点的显示，这里是通过数据绑定实现的

—–没看完，慢慢补上

想了解更多java相关技术，请关注公众号“JavaEE那些事”

扫描下面二维码，更多技术资料等你来拿
这里写图片描述

Awna

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
6
评论
GO.js官方文档中文版

GoJs是一个实现图表交互的javaScript库，这篇文章将为你展示使用GoJs时的特征。因为GoJs是依赖hTML5的javaScript库，所以你要确认你开发的页面是在HTML技术的基础上，当然你在使用GoJs之前必须要导入其库。下面介绍引入GoJs的几种方法下载GoJs，本地引入&lt;!DOCTYPE html&gt; &lt;!-- HTML5 document ty...
复制链接

扫一扫