(1) GoJS入门
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入门的更多相关文章
- GoJS超详细入门(插件使用无非:引包、初始化、配参数(json)、引数据(json)四步)
GoJS超详细入门(插件使用无非:引包.初始化.配参数(json).引数据(json)四步) 一.总结 一句话总结:插件使用无非:引包.初始化.配参数(json).引数据(json)四步. 1.goj ...
- 可视化图表库--goJS
GoJS是Northwoods Software的产品.Northwoods Software创立于1995年,专注于交互图控件和类库.旗下四款产品: GoJS:用于在HTML上创建交互图的纯java ...
- GoJS 友情链接
目前GoJS官网是学习gojs的最佳选择 GOJS简单示例 GoJS API学习 GoJS组织结构图2 mind map思维导图 组织结构图 GoJS实例1 GoJS实例2 GoJS实例3 GoJS实 ...
- GoJS 教程新手入门(资源整理,解决方案)
以下几个是我在百度.谷歌 上能找到的比较全的GoJs的一些东西,希望对各位有所帮助! 如有外网网站不能访问请自行FQ GoJS官网 第一个推荐的是GoJS的一个类似于社区的问题讨论区,这里面初学者的一 ...
- GoJS使用
1. 先学习官网的这篇Get Started with GoJS教程入门,了解GoJS基础知识: 2. 浏览GoJS各个示例(Samples.Intro),找到契合自己业务需要的某个或者某几个例子,然 ...
- JS组件系列——Gojs组件,前端图形化插件之利器
前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...
- JS图形化插件利器组件系列 —— Gojs组件
阅读目录 一.组件效果预览 二.初次接触 1.Gojs简介 2.使用入门 三.综合效果 1.自定义流程的使用 2.工业流程图 四.总结 正文 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPl ...
- JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...
- GOJS的使用
项目当中要求表与表之间建立关联关系,需要用到Gojs(只想说这是个什么?),以前完全没接触过gojs,所以记录下使用中的技巧和方法 http://www.devtalking.com/articles ...
随机推荐
- busybox的使用
1 将busybox设置为静态链接,放在文件系统中使用 make menuconfig的时候,Busybox Settings --> Build Options --> Build Bu ...
- python 时区
Python中的时区处理 http://tech.glowing.com/cn/dealing-with-timezone-in-python/ Python时区设置方法与pytz查询时区教程_py ...
- 测试-Swagger:Swagger
ylbtech-测试-Swagger:Swagger The Best APIs are Built with Swagger Tools. Swagger 是一款RESTFUL接口的文档在线自动生成 ...
- nginx - ubutun下安装nginx(详述编译方法)
一.使用apt命令安装 sudo apt-get install nginx 二.编译方法安装(个人实践方法,具体见官方文档) 1)说明:我使用的虚拟机是64位 ubuntu server14.04, ...
- matlab进入指定目录
cd C:\Users\hui\Desktop\minepy\1\minepy-1.2.0\minepy-1.2.0\matlab
- Linux压缩命令(zip/gz/bz2/tar/tar.gz/tar.bz2)
一.Linux的压缩格式 .zip . gz . bz2 .tar 1..zip格式(Linux和Windows是可以互传的) 压缩命令 语法:zip 文件名.zip 文件名 ------压缩 ...
- js moment.js日期操作类 datetime,日期操作,dayjs
http://momentjs.com/ JS时间处理插件MomentJS https://juejin.im/post/5a2bdc55f265da432b4abf5e Day.js 2kB超轻量时 ...
- bzoj 1726: [Usaco2006 Nov]Roadblocks第二短路【dijskstra】
严格次短路模板,用两个数组分别维护最短路和次短路,用dijskstra,每次更新的时候先更新最短路再更新次短路 写了spfa版的不知道为啥不对-- #include<iostream> # ...
- bzoj1052覆盖问题(二分+贪心)
1052: [HAOI2007]覆盖问题 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2446 Solved: 1131[Submit][Stat ...
- [ZJOI2005]沼泽鳄鱼
题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石墩和石桥 ...