数据可视化-监控大屏呈现和拓扑图绘制工具总结( 三 )
在最早我们做自研ESB产品的时候 ， 采用Flash实现了一个集成架构的展示效果 ， 但是整体效果并不是很好 。 而通过这套可视化工具 ， 可以用来实现这种集成架构的效果展示 。 同时可以展示出两级架构的集成效果 。 即可以分层展开效果 。
集成架构不需要提前进行设计 ， 而是需要在后台提取了集成关系后 ， 自动进行拓扑生成和自动化布局 。 集成架构中的连线可以用来表示当前系统间的接口服务连通性和接口服务调用流量等信息 。 但是上图实际上离我们需要的集成架构图可视化设计仍然有具体 ， 具体见后面集成架构图设计部分的一些思考 。
4. 端到端流程监控可视化设计
基于服务间的集成关系和调用先后顺序来实现端到端的流程监控 ， 这个我在博客前面多次提到 ， 也一直在寻找比较好的前端设计工具来做 。 比如对我们已有的流程平台流程建模工具前端进行适度改进来支持等 。
对于这类需求也可以用前面提到的工具来实现 ， 先进行端到端监控流程图的设计 ， 然后在进行运行展示 。 其中最主要的还是在运行态的各类信息 ， 比如运行状态 ， 数量 ， 是否有异常等是否很容易叠加到已有的设计图上 。 只要能够解决这个问题 ， 那么就能够很好的应用到端到端流程监控的可视化设计中 。
集成架构图的可视化设计对于集成架构图的绘制一直是我关注的一个点 ， 也看了类似百度Echart ， D3和HighChart等 ， 基本都没有发现适合用来做类似集成架构图绘制的工具 。 同时集成架构图往往都不是自动绘制 ， 而需要提前进行集成架构的图形布局设计 ， 布局好后才能够用JS去绘制 。
因此更多我们需要的是一个JS绘图工具库 ， 能够汇总线条 ， 矩阵 ， 圆等基础图形形状即可 。 我们可以看下一个简单的集成架构图 ， 经过设计排版后布局可能如下：
文章插图
对于这类图可以看到实际上各类可视化图表库并不太容易实现 。 原来我们采用过Flash来进行集成架构图的绘制 ， 但是Flash相对偏重不太合适 。 因此还是需要找一个JS绘图库来实现这种简单的集成架构图的绘制工作 。
基于这个思路我们在网上找了下比较好的一些JS绘制工具库 。
jsPlumb开源流程图绘制工具库
那么如果你应该使用它取决于你想用jsPlumb做什么 。 该框架适用于必须绘制图表的Web应用程序 ， 例如类似于Visio的应用程序或工作流程设计器等 。 由于图表项目和连接的所有参数都是非常精细可控的 ， 因此您可以绘制您可以想到的任何类型的图表 。
该开源库的GitHub地址为：
在该地址也有详细的中文使用教程 ， 根据教程的一些截图可以看到 ， 该工具库很适合用来绘制我们上面的集成架构图 ， 因为这种图本身也就是形状和线条的一些简单组合 ， 而且来拖拽功能都不需要 。
文章插图
当然基于该工具库 ， 我们也可以用来实现更加复杂的集成架构图 ， 即将两个业务系统间的所有关键集成接口全部以连线的方式表示出来 。 这种集成架构图也是无法自动生成 ， 需要首先进行整体部版设计 ， 然后再通过jsPlumb工具库进行绘制即可 。
如果要连接多条线条 ， 需要整个节点作为source或者target ，并且将锚点设置成Continuous ， 那么锚点就会随着节点的位置改变而改变自己的位置 。 这个功能特性可以很方便我进行多线条设置 。
注意在这个网址 ，，这个工具库是存在License费用的 ， 因此如果这个工具库用于商业用途 ， 按道理会涉及到License的购买问题 。
一篇关于该工具库的使用参考：
另外一个用该工具库实现的流程设计器和表单设计器：
付费JS绘制工具库：GoJS
推荐阅读
- 西部数据在CES 2021推出多款4TB容量的旗舰级SSD
- WhatsApp收集用户数据新政惹众怒，“删除WhatsApp”在土耳其上热搜
- 未来想进入AI领域，该学习Python还是Java大数据开发
- 黑客窃取250万个人数据 意大利运营商提醒用户尽快更换SIM卡
- 阳狮报告：4成受访者认为自己的数据比免费服务更有价值
- 中消协点名大数据网络杀熟 反对利用消费者个人数据画像
- 学习大数据是否需要学习JavaEE
- 意大利运营商Ho Mobile被曝数据泄露
- 微软官方数据恢复工具即将更新：更易于上手 优化恢复性能
- HDMI 2.1诞生三年：超高速数据线落地 8K电视圆满了