开始使用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(和所有样本)。或者你可以直接链接到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
是非常方便,我们将从现在开始使用它。如果你使用$
的其他代码中的东西,你总是可以选择一个不同的短变量名称,如$$
或MAKE
或GO
。
图表和模型
图的节点和链接是由模型管理的数据的可视化。 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,我们有几个构建块类可供我们使用:
所有这些构建块都是从 GraphObject抽象类派生的,所以我们随便将它们引用为GraphObjects或对象或元素。请注意,GraphObject 不是 HTML DOM元素,因此在创建或修改此类对象时没有太多的开销。
我们希望模型数据属性影响我们的节点,这是通过数据绑定的方式完成的。数据绑定允许我们通过自动将这些GraphObjects上的属性设置为从模型数据中获取的值来更改节点中GraphObjects的外观和行为。模型数据对象是纯JavaScript对象。您可以选择在模型中的节点数据上使用您喜欢的任何属性名称。
默认的Node模板很简单:包含一个TextBlock的Node。TextBlock的text
属性和模型数据的key
属性之间存在数据绑定。在代码中,模板看起来像这样:
开始使用GoJS的更多相关文章
- gojs绘流程图
引用:http://www.tuicool.com/articles/eEruaqu http://www.open-open.com/lib/view/open1435023502544.html ...
- GoJS使用
1. 先学习官网的这篇Get Started with GoJS教程入门,了解GoJS基础知识: 2. 浏览GoJS各个示例(Samples.Intro),找到契合自己业务需要的某个或者某几个例子,然 ...
- GoJS研究,简单图表制作。
话不多说,先上图 我在这个中加入了缩略图.鼠标放大缩小等功能. <!doctype html> <html> <head> <title>Flowcha ...
- JS组件系列——Gojs组件,前端图形化插件之利器
前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...
- gojs常用API-画布定义
持续更新中 基础画布定义API画布初始位置 initialContentAlignment: go.Spot.Center,画布位置,定义后就不能拖动画布了,画布位置交由gojs管理 contentA ...
- GoJS学习笔记
GoJS 和 GO 语言没有关系,它是一个用来创建交互式图表的 JavaScript 库. 基础概念 GraphObject 是所有图形是抽象基类,基本上 GoJS 中,万物皆 GraphObject ...
- 用gojs写的流程图demo
领导要求,可以展开收缩子级,但是子级可以有多个父级,一开始用的dagre-d3.js,但是功能不是太全,无意中看到gojs,感觉还不错,所以拿来改了改... 代码地址:https://github.c ...
- GoJS 在 vue 项目中的使用
GoJS 在 html vue 项目中的使用,github地址:https://github.com/cag2050/gojs_demo GoJS 在 vue-cli 2.x 项目中的使用,githu ...
- GoJS拖动设计
http://192.168.0.149:8035/gojs/intro/groups.html http://192.168.0.149:8035/gojs/intro/ports.html htt ...
随机推荐
- sscanf 与 ssprintf 用法 (转载--https://www.cnblogs.com/Anker/p/3351168.html)
sprintf函数 sprintf函数原型为 int sprintf(char *str, const char *format, ...).作用是格式化字符串,具体功能如下所示: (1)将数字变量转 ...
- CodeForces 682A
D - Alyona and Numbers Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Sub ...
- da shu mo ban
#include<bits/stdc++.h> using namespace std; ;/*精度位数,自行调整*/ //1.如果需要控制输出位数的话,在str()里面把len调成需要的 ...
- hdu4705 Y 树形DP
给出一颗数,求没有一条路径穿过的节点三元集合个数. 这样的三元集合呈现Y字形,求出反面情况,三点为子节点和两个祖先节点,或一个祖先节点与它子树中非父子关系的节点.可由树形DP求得. #pragma c ...
- hdu4424 Conquer a New Region 并查集/类似最小生成树
The wheel of the history rolling forward, our king conquered a new region in a distant continent.The ...
- redis 部署相关
★ 启动: 配置好环境变量后:打开一个cmd窗口,执行redis-server.exe就可以启动redis了. https://blog.csdn.net/weixin_42423819/articl ...
- Windows和linux 文件互传
一般我是直接在windows下创建一个共享文件夹,然后在linux挂载,我一直都是这么干的. 直到有一天,我需要往一个公网linux上面传几个文件,可是我的Windows是内网的,所以,这种方法行不通 ...
- redis服务以及phpredis扩展的安装
一.下载软件包 下载redis wget http://download.redis.io/releases/redis-3.0.7.tar.gz 下载redis的php扩展 wget http:// ...
- Unity3D用户手册 学习
- 主机-配件-接口-整机-3c-1
standby 待机 hibernate 休眠(睡眠) power-off 关机 usb端口能给外部设备充电在低压状态(standby,hibernate,power-off),如果系统运行在batt ...