(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 ...
随机推荐
- javaSE基础(二)
文件:文件是信息在计算机上的保存形式. 可控式异常:一种必须被处理或必须在可能产生异常的方法中给出声明的异常. 可控式异常的三种处理方式: 1)try...catch捕获 2)throws语句往上抛 ...
- 分享一个全开源的ASP.NET快速开发平台,能快速开发OA CRM ERP 等系统
bingo炸了 2017/3/30 16:28:14 阅读(870) 评论(0) 公司业务量比较大,接了很多项目,为了缩短开发周期老板让我牵头搭建了一个快速开发平台. 我们主要的业务是做OA.CRM. ...
- poj1286 Necklace of Beads—— Polya定理
题目:http://poj.org/problem?id=1286 真·Polya定理模板题: 写完以后感觉理解更深刻了呢. 代码如下: #include<iostream> #inclu ...
- FreeMarker:什么是 FreeMarker?
ylbtech-FreeMarker:什么是 FreeMarker? 1.返回顶部 1. FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电 ...
- U74201 旅行计划 树上找链长度
题目背景 珂朵莉放假了,她打算去唐山旅行. 题目描述 我们简单地把唐山的共 nn 个景点看成是一棵树,有 n-1n−1 条边将它们连接起来,每个景点有一个游览指数 v_ivi.珂朵莉的假期时间不长, ...
- 从csv文件读取数据到二维vector
void ReadDataFromCsv(std::string &filename, std::vector<std::vector<std::string> > & ...
- 33. Extjs中的tree节点的操作
转自:https://blog.csdn.net/masterShaw/article/details/51354351?utm_source=blogkpcl9 ext 树节点操作 tree ...
- c++ class does not name a type (转载)
转载:http://blog.csdn.net/typename/article/details/7173550 declare class does not name a type 出现这个编译错误 ...
- [App Store Connect帮助]六、测试 Beta 版本(4.2) 管理 Beta 版构建版本:查看构建版本状态和指标
必要职能:“帐户持有人”职能.“管理”职能.“App 管理”职能.“开发者”职能或“营销”职能.请参见职能权限. 在首页上,点按“我的 App”,选择您的 App,然后在工具栏中点按“TestFlig ...
- Classic BADI总结
这里对sap Classic Badi 做一下总结,虽然已经是过时的技术了. Classic BADI的创建 Classic BADI的实施 Classic BADI的调用及运行原理 New BADI ...