JS流程图解决方案GoJS

GoJs简介

一个实现交互类图表(好比流程图,树图,关系图,力导图等等)的JS库
GoJS依赖于HTML5,因此请保证您的浏览器版本支持HTML5,固然还要加载这个库。html

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

下载界面 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做为前缀

入门教程看这里

相关文章
相关标签/搜索