成都网站建设设计

将想法与焦点和您一起共享

JS组件系列之Gojs组件前端图形化插件之利器-创新互联

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

上蔡ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!

本文原创地址:http://www.cnblogs.com/landeanfen/p/7910530.html

一、组件效果预览

先来两个炫酷点的效果

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)文件引用

复制代码 代码如下:

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前标题:JS组件系列之Gojs组件前端图形化插件之利器-创新互联
URL分享:http://chengdu.cdxwcx.cn/article/dopgci.html