在日常项目建设和实施过程中，经常会遇到类似数据可视化的实现场景。对于数据可视化已经从简单的统计图表展现，扩展到类似监控大屏，拓扑图，流程编排图，集成架构图等方面的呈现。而这些往往不是简单的使用图表就能够解决的。因此今天总结下对于数据可视化和图形绘制方面的工具整理。
1.数据可视化综述
下面对一些选择的思路做些简单的说明。首先可选的主流图表库包括了百度的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/
数据可视化和图表仅仅是前端呈现的工具，对于数据可视化最重要的还是首先要搞清楚你当前有哪些数据，数据本身的结构和数据间关系是如何的？其次搞清楚数据呈现的场景和模式，其次才是呈现问题。
2.对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. 服务集成架构展示
文章图片
集成架构不需要提前进行设计，而是需要在后台提取了集成关系后，自动进行拓扑生成和自动化布局。集成架构中的连线可以用来表示当前系统间的接口服务连通性和接口服务调用流量等信息。但是上图实际上离我们需要的集成架构图可视化设计仍然有具体，具体见后面集成架构图设计部分的一些思考。
4. 端到端流程监控可视化设计
基于服务间的集成关系和调用先后顺序来实现端到端的流程监控，对于这类需求也可以用前面提到的工具来实现，先进行端到端监控流程图的设计，然后在进行运行展示。其中最主要的还是在运行态的各类信息，比如运行状态，数量，是否有异常等是否很容易叠加到已有的设计图上。只要能够解决这个问题，那么就能够很好的应用到端到端流程监控的可视化设计中。
3.监控大屏的可视化
文章图片
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中，方便我们根据时间进行数据过滤。同时对于大屏我们需要配置定时刷新频率，基于该频率对展示内容进行动态刷新。
推荐阅读
- 数据可视化|基于ECharts数据可视化案例--世界疫情实时展示
- #|1 一文详细阐述UI设计颜色搭配，受益匪浅~
- QT|QT-数据可视化大屏1
- 大屏云|数据可视化大屏 - 大屏云极简使用手册
- 数据可视化|数据大屏 - guandata智能数据可视化分析
- 阿里云大数据认证——使用DataV制作实时销售数据可视化大屏-课堂笔记
- #|2 数据可视化大屏 - 布局
- Python数据分析|Seaborn可视化绘制散点图
- 可视化|用可视化探索数据特征的N种姿势