数据可视化-监控大屏呈现和拓扑图绘制工具总结

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

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

数据可视化综述

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

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. 端到端流程监控可视化设计

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

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

集成架构图的可视化设计

对于集成架构图的绘制一直是我关注的一个点，也看了类似百度Echart，D3和HighChart等，基本都没有发现适合用来做类似集成架构图绘制的工具。同时集成架构图往往都不是自动绘制，而需要提前进行集成架构的图形布局设计，布局好后才能够用JS去绘制。

因此更多我们需要的是一个JS绘图工具库，能够汇总线条，矩阵，圆等基础图形形状即可。我们可以看下一个简单的集成架构图，经过设计排版后布局可能如下：

对于这类图可以看到实际上各类可视化图表库并不太容易实现。原来我们采用过Flash来进行集成架构图的绘制，但是Flash相对偏重不太合适。因此还是需要找一个JS绘图库来实现这种简单的集成架构图的绘制工作。

基于这个思路我们在网上找了下比较好的一些JS绘制工具库。

jsPlumb开源流程图绘制工具库

那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序，例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的，因此您可以绘制您可以想到的任何类型的图表。

该开源库的GitHub地址为：
https://github.com/wangduanduan/jsplumb-chinese-tutorial

在该地址也有详细的中文使用教程，根据教程的一些截图可以看到，该工具库很适合用来绘制我们上面的集成架构图，因为这种图本身也就是形状和线条的一些简单组合，而且来拖拽功能都不需要。

当然基于该工具库，我们也可以用来实现更加复杂的集成架构图，即将两个业务系统间的所有关键集成接口全部以连线的方式表示出来。这种集成架构图也是无法自动生成，需要首先进行整体部版设计，然后再通过jsPlumb工具库进行绘制即可。

如果要连接多条线条，需要整个节点作为source或者target， 并且将锚点设置成Continuous，那么锚点就会随着节点的位置改变而改变自己的位置。这个功能特性可以很方便我进行多线条设置。

注意在这个网址，
https://jsplumbtoolkit.com/community/doc/anchors.html， 这个工具库是存在License费用的，因此如果这个工具库用于商业用途，按道理会涉及到License的购买问题。

一篇关于该工具库的使用参考：
https://www.cnblogs.com/xcj26/p/9870734.html

另外一个用该工具库实现的流程设计器和表单设计器：
http://formdesign.leipi.org/

付费JS绘制工具库：GoJS

GoJS是一套基于JavaScript的付费图形绘制工具库，地址：
https://gojs.net/latest/index.html

这套工具库有免费版本，也有收费版本，收费版本比jsPlumb工具库来说就强大了很多，特别是动态Port图和动态分组图，这两个用来绘制我们集成架构图，应用架构图等都相当有用。

• Dynamic Ports：Dynamically add ports and custom link routing. USe data-bindings to save and load routes within the Model JSON.
• Dynamic Grouping：Use groups as containers and subgraphs, with group members bounds by their own rules and layouts.

所有Demo演示地址参考：
https://gojs.net/latest/samples/regrouping.html

JointJS工具库

这个也是常用的绘图工具库，地址在：https://www.jointjs.com/

这个库官方介绍的例子都感觉比较重，而实际其它搜索到的一些使用介绍来看，用于简单从集成架构图，流程图类绘制还是没有太大问题的。基本还是标准的新建画板，画布，然后进行各种图形的定义和绘制。

jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。由于这个工具库是基于SVG的，因此也不太推荐使用。

一篇使用参考：
https://segmentfault.com/a/1190000015972176

监控大屏的可视化

Quick V 是一套数据可视化大屏展示方案。在大数据时代，Quick V 将数据全面、直观地呈现在用户眼前，帮助管理者在面临业务复杂度的急剧变化时，即刻拥有海量有序的决策支持信息，满足会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。

参考：
http://www.uileader.com/quickui_display.html

大家可以先看下上面这个大屏可视化效果，感觉整体还是做的相当不错。这个工具本身商用收费，比较好的就是对于我们常见的大屏监控已经固化为各种模板，基本都可以直接使用。

基于百度Echart自己实现可配置的监控大屏

在前面我也谈到，实际上对于监控大屏实现，当前我们完全可以采用百度Echart来定制实现，而这篇文章主要想谈下如何对监控大屏可视化做到灵活可配置。

首先我们看到监控大屏可视化，实际上跟我们前面谈到的自定义报表相当类似，其核心仍然是单面板设计，多面板组合。基于这个思路我们逐一展开进行描述。

在讲自定义报表的时候，我们单面板设计数据集和实际的数据呈现是耦合在一起的，而实际上更好的思路是数据集和数据呈现进行分离。基于这个思路，逐一展开讲关键功能点实现。

数据集设计

数据源定义，对于数据源定义，最好也进行独立，一个报表前端呈现本身也可能涉及到多个数据源。数据集设计，即返回一个二维的数据集合，可以有多列。我们需要通过配置的方式来实现，即首先选择数据源，然后自定义Sql语句，然后返回具体的数据集对象。在sql过程中我们可以对字段标题名称等进行转义。

更加解耦的方法是数据集可以直接选择具体的WS服务，由服务返回一个二维的数据集对象。这种方式可以进一步实现报表平台和底层数据库的解耦。

单面板设计

单面板设计简单来说就是将前端的呈现方式，究竟是折线图，饼图还是雷达图等，和后端的数据集进行绑定。在这个过程中重点是要确认具体的图表呈现的一些关键配置，包括X，Y轴显示，图表名称，图例是否显示等关键配置，都需要在单面板设计的是配置完成。

单面板设计完成后，最好提供预览功能按钮，可以马上体验到单面板展示的效果。

大屏设计

对于大屏设计，实际上里面有几个关键点，首先就是大屏展示需要有一个CSS模板，这个模板决定了所有的单面板图表的配色风格，包括具体的底色，前端的色系选择等。选择模板就是确保最终的大屏展示各个单面板风格能够完全保持一致。

大屏版面设计，仍然采用标准的Grid布局模式即可，可以看到所有的大屏展示基本都采用Grid布局模式。每个单面板你唯一要确定的就是横向跨几行，纵向跨几列即可。类似上面的图，我们采用4*4Grid进行布局，中间的地图展示则是横向跨3行，纵向跨两列。

大屏整体的展示动态刷新能力

在以上设计完成后，我们整个大屏展示效果也就出来了。在该大屏设计中我们没有考虑动态查询功能。但是大屏监控仍然需要动态进行刷新。因此在设计大屏的时候需要具备动态刷新能力，为了考虑后续具备一定的扩展性，我们需要能够将关键的一些变量参数传递到图表展示中。

最关键的参数就是当前时间，当前的时间需要能够传递到每一个数据集Sql中，方便我们根据时间进行数据过滤。同时对于大屏我们需要配置定时刷新频率，基于该频率对展示内容进行动态刷新。