JS流程图解决方案GoJS
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的更多相关文章
- Atitit sleep原理 node.js sleep解决方案 timer
Atitit sleep原理 node.js sleep解决方案 timer sleep()的实现分为三步: 1.注册一个信号signal(SIGALRM,handler).接收内核给出的一个信 ...
- 前端 go.js 流程图基于vue开发项目案例
一.流程图效果 最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求 ...
- JS组件系列——Gojs组件,前端图形化插件之利器
前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb.这个组件本身还不错,使用方便.入门简单.轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时 ...
- js流程图:aworkflow.js
auto-workflow 用于快速构建各种关系图的库 github地址:https://github.com/auto-workflow/AWorkflow 快速开始 npm install awo ...
- JS异步解决方案
前言 异步最早的解决方案是回调函数,如ajax,事件的回调,setInterval/setTimeout中的回调.但是回调函数有回调地狱的问题; 为了解决回调地狱的问题,社区提出了Promise解决方 ...
- js 乱码解决方案
如果网页编码规则是utf-8,即在网页头部中可以看到如下代码: 那么js文件中如果有中文字,调用输出时就会出现乱码.解决此个问题的办法如下: 即在引用javascript输出的地方加上charset= ...
- JS异步解决方案之概念理解-----------阻塞和非阻塞,同步和异步,并发和并行,单线程和多线程
首先记住一句话,JS是单线程的. 单线程意味着什么?单线程意味着 它不能依靠自己实现异步. JS实现的异步,往往都是靠 浏览器.Node 的机制(事件驱动.回调)实现的. 下面让我这个单身狗 以谈恋爱 ...
- three.js 流程图
用Axure做了个模型图: 第一步: Scene --模型.灯光.特效 第二步: Camera --视角 第三步: Renderer -- 渲染输出 第四步: render --渲染 ...
- js 闭包解决方案
相比很多人都遇见过这样的情况: 给一个ul的所有li绑定行为,在点击时获取其index. 假设结构如下: <body> <ul> <li>0</li> ...
随机推荐
- coding++ :Layui-监听事件
在使用layui的form表单做验证提交的时候,如果结合vue,或者是三级联动的时候,就需要做事件监听了. 具体语法: form.on('event(过滤器值)', callback); 可以用于监听 ...
- coding++ :HttpClientUtils 封装
1.关键 JAR <!-- <<===================>> httpClient <<===================>> ...
- 那些年,我们追过的java8
9月份java9就要发布了,在8月的最后一天决定回顾一下java8那些惊天动地的变化,加深理解,共同进步. 我们都知道java与c++,c不同是一个为面向对象而生的语言,面向对象思想贯彻了java发展 ...
- mongodb的增加和删除
一 mongodb中使用insert()方法来增加集合中的文档: db.myTable.insert({name:'arvin',age:12}) //对名为myTable的集合插入数据 插入数据 ...
- 【Springboot】实例讲解Springboot整合OpenTracing分布式链路追踪系统(Jaeger和Zipkin)
1 分布式追踪系统 随着大量公司把单体应用重构为微服务,对于运维人员的责任就更加重大了.架构更复杂.应用更多,要从中快速诊断出问题.找到性能瓶颈,并不是一件容易的事.因此,也随着诞生了一系列面向Dev ...
- MATLAB——元胞数组
一. 1.元胞数组的创建 >> a={;ones(,),:} a = ] [2x3 ;ones(,),:} >> b=[{};{ones(,)},{:}] b = ] [2x3 ...
- 快速创建Flask Restful API项目
前言 Python必学的两大web框架之一Flask,俗称微框架.它只需要一个文件,几行代码就可以完成一个简单的http请求服务. 但是我们需要用flask来提供中型甚至大型web restful a ...
- Java项目集成Redis
1.项目pom.xml中添加Jedis依赖 <dependency> <groupId>redis.clients</groupId> <artifactId ...
- 没用过.gitIgnore还敢自称高级开发?
Git是跟踪项目中所有文件的好工具, 但是,您会希望在项目的整个生命周期中不要跟踪某些文件及其变化. 系统文件(i.e. Mac系统的.Ds_Store) 应用程序配置文件(i.e. app.conf ...
- background-clip 和 background-origin 有什么区别? -[CSS] - [属性]
这两个属性在W3S上的示例,给人的感觉好像效果是一样的: