GoJs简介

一个实现交互类图表(比如流程图,树图,关系图,力导图等等)的JS库

GoJS依赖于HTML5,所以请保证您的浏览器版本支持HTML5,当然还要加载这个库。

首先个人建议先下载官方实例的 离线版本【内网访问不是很好所以建议缓存下载下来在来看】,其次希望你有个谷歌浏览器!(方便于翻译成中文阅读不费劲!)

下载界面 https://gojs.net/latest/download.html

点击这里下载


<!-- 调式或开发模式下请使用 go-debug.js -->
<script src="go-debug.js"></script> <!-- f非调式或开发模式下请使用 go.js -->
<script src="go.js"></script>

每个GoJS图表必须包含在一个指定宽高的div容器内

<!-- 这个DIV必须指定宽高,否者不会被渲染出来
我们通常为DIV设置一个背景颜色以便于我们更便捷的观察 -->
<div id="myDiagramDiv"
style="width:400px; height:150px; background-color: #DAE4E4;"></div>

在JS代码部分,您需要传入一个div的id作为参数来创建一个图表,这里不多说案例里很明了多看!

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

PS : 所有GoJS的属性和方法都在go这个命名空间下。所有GoJS的类名,例如Diagram、Node、Panel、 Shape、TextBlock也都使用go作为前缀

入门教程看这里

JS流程图解决方案GoJS的更多相关文章

  1. Atitit sleep原理 node.js sleep解决方案 timer

    Atitit  sleep原理  node.js sleep解决方案  timer sleep()的实现分为三步: 1.注册一个信号signal(SIGALRM,handler).接收内核给出的一个信 ...

  2. 前端 go.js 流程图基于vue开发项目案例

    一.流程图效果 最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求 ...

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

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

  4. js流程图:aworkflow.js

    auto-workflow 用于快速构建各种关系图的库 github地址:https://github.com/auto-workflow/AWorkflow 快速开始 npm install awo ...

  5. JS异步解决方案

    前言 异步最早的解决方案是回调函数,如ajax,事件的回调,setInterval/setTimeout中的回调.但是回调函数有回调地狱的问题; 为了解决回调地狱的问题,社区提出了Promise解决方 ...

  6. js 乱码解决方案

    如果网页编码规则是utf-8,即在网页头部中可以看到如下代码: 那么js文件中如果有中文字,调用输出时就会出现乱码.解决此个问题的办法如下: 即在引用javascript输出的地方加上charset= ...

  7. JS异步解决方案之概念理解-----------阻塞和非阻塞,同步和异步,并发和并行,单线程和多线程

    首先记住一句话,JS是单线程的. 单线程意味着什么?单线程意味着 它不能依靠自己实现异步. JS实现的异步,往往都是靠 浏览器.Node 的机制(事件驱动.回调)实现的. 下面让我这个单身狗 以谈恋爱 ...

  8. three.js 流程图

    用Axure做了个模型图:          第一步: Scene --模型.灯光.特效 第二步: Camera --视角 第三步: Renderer -- 渲染输出 第四步: render --渲染 ...

  9. js 闭包解决方案

    相比很多人都遇见过这样的情况: 给一个ul的所有li绑定行为,在点击时获取其index. 假设结构如下: <body> <ul> <li>0</li> ...

随机推荐

  1. [vijos1162]波浪数

    题目链接:https://www.vijos.org/p/1162 这题的解法我觉得可能是模拟吧,但是题的分类又是构造QAQ..... 不是很懂,所以我们把这个方法叫做奇技淫巧吧 这题的暴力思路就是针 ...

  2. Python itchat库(1)

    一.实验环境 在cmd中输入以下命令,完成微信的API包itchat的安装. pip install itchat 注意这里有个问题,因为电脑里既有Python3.6,又有anaconda.所以一定要 ...

  3. CTR学习笔记&代码实现2-深度ctr模型 MLP->Wide&Deep

    背景 这一篇我们从基础的深度ctr模型谈起.我很喜欢Wide&Deep的框架感觉之后很多改进都可以纳入这个框架中.Wide负责样本中出现的频繁项挖掘,Deep负责样本中未出现的特征泛化.而后续 ...

  4. 1+X Web前端开发(初级)理论考试样题(附答案)

    传送门 教育部:职业教育将启动"1+X"证书制度改革 职业教育改革1+X证书制度试点启动 1+X成绩/证书查询入口 一.单选题(每题 2 分,共 60 分) 1.在 HTML 中, ...

  5. Light of future-凡事预则立

    目录 1.冲刺的时间计划安排 2.针对上一次作业同学.助教提出的问题的回答 3.针对前几次作业的不足的地方进行思考和总结 4.需要改进的团队分工 5.团队的代码规范 6.Github仓库链接 归属班级 ...

  6. Linux 任务管理篇(一)

    查看网络的联机状态    netstat -a 查看后台执行的程序    ps -aux 将内存中的数据快速写入到硬盘中        sync

  7. Python设计模式(3)-工厂方法模式

    # coding=utf-8 #定义一个用于创建对象的接口,让子类决定实例化哪一个类 class DbManager: def __init__(self): pass def operate_db( ...

  8. 超过百万的StackOverflow Flutter 问题

    老孟导读:今天分享StackOverflow上高访问量的20大问题,这些问题给我一种特别熟悉的感觉,我想你一定或多或少的遇到过,有的问题在stackoverflow上有几十万的阅读量,说明很多人都遇到 ...

  9. leetcode c++做题思路和题解(4)——队列的例题和总结

    队列的例题和总结 0. 目录 栈实现队列 队列实现栈 滑动窗口最大值 1. 栈实现队列 FIFO和FILO,相当于+-号,互转都是利用"负负得正"的原理. 官方解答中第二种思路很6 ...

  10. java中取得用户输入的方法

    java中取得用户输入的方法 1.采用java.util.Scanner类 采用Scannerd的next()方法读取,测试代码如下: Scanner sc=new Scanner(System.in ...