监控大屏和拓扑图绘制工具总结(201021)

在日常项目建设和实施过程中，经常会遇到类似数据可视化的实现场景。对于数据可视化已经从简单的统计图表展现，扩展到类似监控大屏，拓扑图，流程编排图，集成架构图等方面的呈现。而这些往往不是简单的使用图表就能够解决的。

因此今天总结下对于数据可视化和图形绘制方面的工具整理。

数据可视化综述

推荐首先阅读知乎的关于有哪些可视化工具推荐的回答，内容已经相当全面了

https://www.zhihu.com/question/19929609

要注意的是当前主流的仍然是 基于javasrcirpt开发的图表库 ，对于偏重的flex不应该作为选择的基础。下面对一些选择的思路做些简单的说明。

首先可选的主流图表库包括了 百度的Echart，Highchart，D3.js 这三个。

这三个可视化图表库的使用客户也相当多，能够应对的常见可视化场景也足够。对于百度的Echart又推出有新的V4.0版本，虽然支撑的图表扩展没有大的变化，但是在性能上有明显改进。当然从支持的图表类型种类和开放性来谈，最强大的还是D3.js，但是前面两种已经能够基本满足实际的图表层面使用的需要。

对于百度Echart，对里面的关系图做了详细分析后，实际上没有找到用来做网络拓扑图的工具，系统集成关系图的组件。当然百度Echart里面有的关系图，桑基图，地图，热力图迁徙图，矩阵图，日历图，树图等功能已经足够强大。

采用百度Echart也很容易自己来实现类似监控大屏这种前端应用。

对于网络关系图，在可视化里面常见的一种类型，其中主流的应该是Gephi，Gephi是一款开源免费跨平台基于JVM的复杂网络分析软件, 其主要用于各种网络和复杂系统，动态和分层图的交互可视化与探测开源工具。其次是R语言中的iGraph和networkD3包，功能也足够强大。还有就是基于python语言实现的networkx，是专门进行网络可视化呈现的一个小工具。

Gephi地址和例子参考：https://gephi.org/

对于商用的图表和可视化工具当然是Tableau，据Gartner魔力象限，2014年的测评，tableau可执行速度最快，整体市场表现也在前列。在Tableau官方网站可以免费下载到桌面试用版进行试用。

如果仅仅是提供常用的画图API接口，自己完全根据需要绘制SVG渲染图，对于这种场景你仍然可以选择Echart和Highcharts来实现，在官方网站也有制作SVG渲染图的例子。

当然还有一类即经常用于网管类，日志类监控分析的前端图表展示软件，在ELK日志分析系统 Logstash+ElasticSearch+Kibana4里面会使用Kibana4进行前端图表展现。

Grafana是另外一个基于JavaScript的前端展示工具，Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world。对于Grafana支持Graphite, Elasticsearch, Prometheus, InfluxDB, OpenTSDB and KairosDB各种数据采集源。

对于Grafana当前和类似InfluxDB时序数据库结合的很紧密，可以很容易是基于时序数据的可视化图表展示，包括当前在Kurbernetes里面用的很多的Prometheus监控方案，仍然是基于时序数据库和Grafana来实现资源性能监控。

Grafana的官方地址：https://grafana.com/

最后说下Processing，功能相当强大，但是要有一定的开发基础和学习门槛，Processing 在 2001 年诞生于麻省理工学院（MIT）的媒体实验室，主创者为 Ben Fry 和 Casey Reas，当然还有来自 Carnegie Mellon、洛杉矶的加利福尼亚大学以及迈阿密大学等的贡献。

具体例子可以参考：https://processing.org/examples/

数据可视化和图表仅仅是前端呈现的工具，对于数据可视化最重要的还是首先要搞清楚你当前有哪些数据，数据本身的结构和数据间关系是如何的？其次搞清楚数据呈现的场景和模式，其次才是呈现问题。

对IT资源拓扑图的可视化

对于ESB服务总线，特别是涉及到两级架构集成的时候，采用类似拓扑图的可视化思路来进行集成架构和部署架构图的可视化是一个可选的方案。基于拓扑图可视化为关键字搜索，搜索到两个可视化工具软件，虽然都是付费软件，但是对于拓扑图，部署架构，集成关系图等方面的展示能力还是相当强。

TWaver工具：http://www.servasoft.com/

TWaver关注于数据的图形展示，它是面向开发人员的，需要进行二次开发。

TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件，以及表格、树图、属性表、图表等丰富的通用图形界面组件，为电信运营支撑系统（OSS）的开发提供“一站式”的组件产品和解决方案，是快速设计、开发和部署OSS的利器。

可以看到TWaver本身的功能相对强大，完全可以胜任复杂的资源拓扑图的设计，但是如果仅仅用于拓扑图展示的话有点大材小用。

对于TWaver，实际上可以看到对于数据中心资源和资产的全三维可视化建模是另外一个做的相当好的地方。这个软件 可以实现数据中心内所有设备对象的虚拟仿真，以完全3D模式构建整个数据中心环境，并将数据中心内的监控子系统，如视频、动环、门禁等，纳入到可视化机房管理平台中来，实时分析查看监控信息。 软件采用B/S架构，无需安装任何插件即可在浏览器中流畅漫游数据中心三维场景,实现数据中心级、机房级、机柜级、设备级和端口级管理和监控。

类似下图：

Qunee工具：http://qunee.com/

Qunee是一套基于HTML5的网络图组件。其使用HTML5 Canvas技术，绘制清新、流畅的网络图，可用于社交网络图、拓扑图、流程图、地图等需求， JS组件封装，藏繁琐于简洁，轻松构建优雅的互联网应用与企业应用，让数据的在线可视化变得容易。

在网站上有详细的例子可以参考，可以看到Qunee相对来说轻量些，用于实现一些简单的网络拓扑，集成架构图展示完全可以满足去。

类似上图，可以很方便的通过Qunee提供的可视化设计工具实现。

基于这些可视化拓扑设计工具，结合ESB服务总线集成实际的集成场景来说，初步考虑可以应用的点包括如下。

1. 实现两级架构的拓扑图效果展示和接口服务集成监控。

布局原来一直太强调结合地图进行展示，实际上效果并不一定太好。这里可以直接自己定义布局模式，初步想法就是中心为集团，四边方框来线上各个省或子公司。形成完整的两级集团展示效果。这种展示方式也方便直接线上到大屏上去。

2. 对于当前ESB平台本身的资源和服务状态监控可视化

这套可视化工具很容易实现这点，我们只需要先可视化的设计出部署架构布局，然后再将实际对数据库，应用中间件资源，包括服务运行的各种状态信息，异常信息直接显示到整体部署逻辑架构图上即可。这样可以更加可视化的监控到资源当前的运行状态和异常发生情况。

3. 服务集成架构展示

在最早我们做自研ESB产品的时候，采用Flash实现了一个集成架构的展示效果，但是整体效果并不是很好。而通过这套可视化工具，可以用来实现这种集成架构的效果展示。同时可以展示出两级架构的集成效果。即可以分层展开效果。

集成架构不需要提前进行设计，而是需要在后台提取了集成关系后，自动进行拓扑生成和自动化布局。集成架构中的连线可以用来表示当前系统间的接口服务连通性和接口服务调用流量等信息。但是上图实际上离我们需要的集成架构图可视化设计仍然有具体，具体见后面集成架构图设计部分的一些思考。

4. 端到端流程监控可视化设计

基于服务间的集成关系和调用先后顺序来实现端到端的流程监控，这个我在博客前面多次提到，也一直在寻找比较好的前端设计工具来做。比如对我们已有的流程平台流程建模工具前端进行适度改进来支持等。

对于这类需求也可以用前面提到的工具来实现，先进行端到端监控流程图的设计，然后在进行运行展示。其中最主要的还是在运行态的各类信息，比如运行状态，数量，是否有异常等是否很容易叠加到已有的设计图上。只要能够解决这个问题，那么就能够很好的应用到端到端流程监控的可视化设计中。