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

前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb。这个组件本身还不错,使用方便、入门简单、轻量级,但是使用一段时间下来,发现一些弊病,比如组件不太稳定,初始进入页面的时候连线的样式有时会乱掉,刷新页面之后才能恢复正常,而且连线样式比较单一,容易让人产生视觉疲劳,加之最近公司在大力推行所谓的“工业4.0”,除了对自动化控制要求的提高之外,对这种图形化界面的要求也随之提高,所以单纯的jsPlumb组件效果已经不能满足日益发展的公司业务。基于以上种种,最终找到了Gojs组件,它效果强大、api丰富,唯一的不足就是这个组件是一个收费组件,可是在天朝,嘘...这是个不能说的秘密!

本文原创地址:

一、组件效果预览

先来两个炫酷点的效果

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

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

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

就最下面两个效果而言,就是jsPlumb无法实现的,可是这种效果在MES系统里面是很吸引人的,尤其是一些流程性的业务,用这种效果实现让可以一眼就感觉高大上了。并且咋一眼看上去,你根本都不相信这是一个web页面的效果。

 其他效果示例

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

 

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

可折叠的树

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

这是图片吗?

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

竟然还可以生成图表!

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

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

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

想抢visio的饭碗吗?

 

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

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

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

更多示例可查看 官网

本文原创地址:

二、初次接触

老规矩,还是先来个入门教程。

源码下载:https://github.com/NorthwoodsSoftware/GoJS

api详情:https://gojs.net/latest/api/index.html

示例地址:https://gojs.net/latest/samples/index.html

1、Gojs简介

GoJS是一个功能丰富的JS库,在Web浏览器和平台上可实现自定义交互图和复杂的可视化效果,它用自定义模板和布局组件简化了节点、链接和分组等复杂的JS图表,给用户交互提供了许多先进的功能,如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。无需切换服务器和插件,GoJS就能实现用户互动并在浏览器中完全运行,呈现HTML5 Canvas元素或SVG,也不用服务器端请求。 GoJS不依赖于任何JS库或框架(例如bootstrap、jquery等),可与任何HTML或JS框架配合工作,甚至可以不用框架。

2、使用入门

(1)文件引用

<script src="gojs/go-debug_ok.js"></script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsffsw.html