gojs

GoJS 是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。 GoJS 2.1 新的动画功能 GoJS 2.1包含许多新功能，可为图表的不同组件制作动画。 新的默认GoJS动画“逐渐消失”，而不是对Node位置进行动画处理。添加了AnimationManager.initialAnimationStyle以控制此行为。这是一个例子： （顶部）新的初始动画，“图”位置向上动画，“图不透明度”从0到1动画。 （中部）一个自定义的“放大”动画，动画化了图比例，在新的状态图示例中进行了演示， （底部）将AnimationManager.initialAnimationStyle设置为AnimationManager.AnimateLocations以执行GoJS 2.0和以前的动画样式。该数据可视化示例使用此选项。 添加了"InitialAnimationStarting" DiagramEvent以更轻松地自定义初始动画。有关详细信息，请参见 AnimationManager.initialAnimationStyle。 新类：AnimationTrigger。这些内容描述了如何在GraphObject更改值时自动为其设置动画。 新课程：动画

GoJs简介 一个实现交互类图表（比如流程图，树图，关系图，力导图等等）的JS库 GoJS依赖于HTML5，所以请保证您的浏览器版本支持HTML5，当然还要加载这个库。 首先个人建议先下载官方实例的 离线版本【内网访问不是很好所以建议缓存下载下来在来看】,其次希望你有个谷歌浏览器！（方便于翻译成中文阅读不费劲！） 下载界面 https://gojs.net/latest/download.html 点击这里下载 <!-- 调式或开发模式下请使用 go-debug.js --> <!-- f非调式或开发模式下请使用 go.js --> 每个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这个命名空间下