GoJS的官方下载,若下载失败,可尝试通过我的个人网盘分享下载。

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。在网上并没有找到比较全面的中文文档,官方英文版写的还是很容易理解的。

1.Gojs入门

GoJS是一个javascript,利用GoJS可以轻松在页面上创建交互式的图表。GoJS支持图形模板,以及图形属性与模型对象之间的数据绑定。

GoJS基本概念

GoJS不依赖于任何JavaScript库或框架,应该可以在任何的HTML\JS环境中加载go.js并使用。

  <html>
<head>
. . .
<!-- Include the GoJS library. -->
<script src="go.js"></script>
</head>

在ES6或TS代码中,引入gojs:

import * as go from "go";

npm环境:

import * as go from "gojs";

创建一个简单的仅包含node和link的图表:

index.html (创建一个DIV作为diagramd的画布,300px*300px)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.7/go-debug.js"></script>
<title>Document</title>
</head>
<body>
<div id="myDiagramDiv" style="width:300px; height:300px; background-color: #DAE4E4;"></div>
</body>
</html>

script.js

  <script>
var diagram = new go.Diagram("myDiagramDiv");
diagram.model = new go.GraphLinksModel(
[{ key: "Hello" }, // 两个node对象
{ key: "World!" }],
[{ from: "Hello", to: "World!"}] // 一条link的数据
);
</script>

(1) GoJS入门的更多相关文章

  1. GoJS超详细入门(插件使用无非:引包、初始化、配参数(json)、引数据(json)四步)

    GoJS超详细入门(插件使用无非:引包.初始化.配参数(json).引数据(json)四步) 一.总结 一句话总结:插件使用无非:引包.初始化.配参数(json).引数据(json)四步. 1.goj ...

  2. 可视化图表库--goJS

    GoJS是Northwoods Software的产品.Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS:用于在HTML上创建交互图的纯java ...

  3. GoJS 友情链接

    目前GoJS官网是学习gojs的最佳选择 GOJS简单示例 GoJS API学习 GoJS组织结构图2 mind map思维导图 组织结构图 GoJS实例1 GoJS实例2 GoJS实例3 GoJS实 ...

  4. GoJS 教程新手入门(资源整理,解决方案)

    以下几个是我在百度.谷歌 上能找到的比较全的GoJs的一些东西,希望对各位有所帮助! 如有外网网站不能访问请自行FQ GoJS官网 第一个推荐的是GoJS的一个类似于社区的问题讨论区,这里面初学者的一 ...

  5. GoJS使用

    1. 先学习官网的这篇Get Started with GoJS教程入门,了解GoJS基础知识: 2. 浏览GoJS各个示例(Samples.Intro),找到契合自己业务需要的某个或者某几个例子,然 ...

  6. JS组件系列——Gojs组件,前端图形化插件之利器

    前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...

  7. JS图形化插件利器组件系列 —— Gojs组件

    阅读目录 一.组件效果预览 二.初次接触 1.Gojs简介 2.使用入门 三.综合效果 1.自定义流程的使用 2.工业流程图 四.总结 正文 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPl ...

  8. JS前端图形化插件之利器Gojs组件(php中文网)

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  9. GOJS的使用

    项目当中要求表与表之间建立关联关系,需要用到Gojs(只想说这是个什么?),以前完全没接触过gojs,所以记录下使用中的技巧和方法 http://www.devtalking.com/articles ...

随机推荐

  1. python-----删除同一文件夹下相似的图片

    最近整理图片发现,好多图片都非常相似,于是写如下代码去删除,有两种方法: 注:第一种方法只对于连续图片(例一个视频里截下的图片)准确率也较高,其效率高:第二种方法准确率高,但效率低 方法一:相邻两个文 ...

  2. 【高德地图API】绘制大地线 Geodesic/Great Circles

    大地线(geodesic)是指地球椭球面上连接两点的最短程曲线. 大地线上每点的密切面(无限接近的3个点所构成的平面)都包含此点的曲面法线.因曲面法线互不相交,故为一条空间曲面曲线.在球面上,大圆弧( ...

  3. Rails5 任务注释

     任务注释  格式  # TODO: ...  # FIXME: ...  # OPTIMIZE ...  查看   rails notes  个别查看  rails notes:todo  rail ...

  4. Windows8.1进入IIS管理器的方法

    以前在本机的Windows8.1操作系统中安装了IIS,很久没有使用过,今天在安装IBM Http Server的时候启动失败,才想起来IIS占用了80端口,需要把IIS服务停止掉.找了半天才找到进入 ...

  5. ASP.NET Core&EF 笔记

    首先创建Asp.net Core项目,然后通过 NuGet 安装 EntityFrameworkCore: Microsoft.EntityFrameworkCore.SqlServer Micros ...

  6. 从 FTP 服务器上下载并保存文件

    本例演示如何运用 C# 中的 FtpWebRequest 等对象从 FTP 服务器上获取文件,并结合 Stream 对象中的方法来保存下载的文件: using System; using System ...

  7. pycharm但多行注释快捷键

    pycharm中同时注释多行代码快捷键: 代码选中的条件下,同时按住 Ctrl+/,被选中行被注释,再次按下Ctrl+/,注释被取消

  8. [转]MVC之 自定义过滤器(Filter)

    本文转自:http://www.cnblogs.com/kissdodog/archive/2013/01/21/2869298.html 一.自定义Filter 自定义Filter需要继承Actio ...

  9. SVN服务器搭建 内网可用外网不可用的问题

    检查1:内网端口映射到了外网端口,这样外网才能够访问到 映射的方式有两种: 1.通过路由器的虚拟服务器功能,网上一搜一大把. 2.将路由器的DMZ功能开启,并把DMZ主机设置为目标计算机. 检查2:S ...

  10. Java 8 (1) 行为参数化

    行为参数化就是可以帮助你处理频繁变更需求的一种软件开发模式.它意味着拿出一个代码块,把它准备好却不去执行它.这个代码块以后可以被你程序的其他部分调用,这意味着你可以推迟这块代码的执行.例如:你可以将代 ...