基于动态可配置的数据可视化展示系统

王萍

摘要 为了更好的帮助人们利用数据资源，洞察数据的真正含义，从而帮助人们分析商业模式的有效性、市场的发展趋势、信息化建设的成效、安全风险态势等，数据可视化系统成为必不可少的工具。各种数据中心、展示中心、监控中心、应急响应中心都需要通过大屏幕对数据进行呈现。为了提升可视化系统的灵活性、扩展性，本文阐述了一套支持灵活拖拽布局，数据可动态配置的系统实现方案。

【关键词】数据可视化 动态配置 可扩展

随着大数据技术的快速发展，各行业越来越多的通过数据分析的方法来进行态势的监控和预测，而抽象的数据结果不利于人们的理解，因此需要通过各种统计图表、动态地图等方式来展示数据背后的价值，最后通过监控展示大屏将结果呈现给用户。作为一种通用的数据可视化系统工具，需要满足不同行业、不同类型数据的可视化展示需求，并且展示的内容还需要根据使用数据的人员角色不同适应灵活的变化，因此就需要系统的设计满足不同风格、不同布局、不同数据源的灵活配置，以减少因为需求变化而引发的定制开发。

1 术语定义

可视化组件：可视化组件包括文字组件、图形化组件两种类型。文字组件显示独立的数字、文本，图形化组件是能够反映一组数据结果的独立的饼图、柱状图、曲线图、仪表图、地图等。

视图模板：视图模板是指带有一定样式风格，定义了展示分辨率，布局划分的展示框架。

视图：视图是一个完整的可浏览的监控页面，由多个文字组件和图形化组件和数据结合，呈现给用户最终的展示结果。

屏幕：展示大屏，由多块显示屏拼接而成，多块显示屏可以进行拆分接收多路输入。

2 设计思想

低耦合：系统采用低耦合设计原则，通过分层的系统架构设计将页面和组件分离、组件和数据分离。

可复用：系统通过抽象化的设计，通过模板化、组件化实现功能可复用。

可配置：系统通过视图配置、数据源配置、组件参数配置等策略的设置来提升系统使用的灵活性。

可扩展：系统通过标准接口的定义，可插装的构件设计满足对新需求的扩展性。

易用性：系统通过可视化的配置，可拖拽的操作提升用户与系统交互过程的易用性。

3 系统设计

3.1 系统架构

本系统采用分层的架构设计，分为屏幕层、视图层、组件层、接口层、和数据服务层。

3.1.1 屏幕层

屏幕層对应真实的物理屏幕，屏幕层可以通过url的配置进行与视图的映射。根据实际的使用场景可以将屏幕映射到一个视图进行整体展示，也可以将大屏拆分成多个子屏幕映射到不同的视图url，且屏幕展示的内容可以根据实际的使用需求进行动态的轮询切换。

3.1.2 视图层

视图层预置了不同风格、适用于不同数据展示的视图模板，视图模板将展示页面拆分成不同的区域，例如标题区、统计计数区、图表区、列表区等，可以通过拖拽布局、参数编辑的方式将组件拖拽到不同的区域进行视图配置。

3.1.3 组件层

组件层集成了大量的图表组件、文字组件、地图组件、列表组件、以及根据需求定制的其它组件等，这些组件形成组件库，组件可以进行扩展，将符合接口规范的组件插装到组件库中。在视图配置时可以从组件区选择适合展示数据结果的组件拖拽到视图中，组件是组成视图的基本元素。

3.1.4 接口层

接口层通过标准通讯接口的定义，将组件和数据解耦。将生成组件图形所需要的数据定义为标准的Json格式，由数据服务层提供数据的获取和组装服务，通过Restful接口调用返回给组件进行数据展示。

3.1.5 数据服务层

数据服务层实现数据的获取、计算和组装。数据服务层可以适配多种类型的数据源，且适配的接口可以根据数据源的增加进行动态扩展。连接的数据源可以是大数据环境，关系数据库例如Mysql、Oracle、SqlServer等，Nosql数据库例如Mongodb、HBase、Redis等，文件如Excel、csv等。数据服务层根据页面的展示需求对数据进行统计查询、内存计算，再将计算结果组装成组件展示需要的Json格式通过服务接口返回给页面。

3.2 系统主要功能

3.2.1 视图创建

视图管理可以创建一个展示视图实例，视图包括名称、描述信息的填写，为视图选择模板，保存后系统进入对该视图的编辑页面。

3.2.2 视图编辑

视图编辑页面分为视图预览区、组件选择区、参数配置区，视图预览区是根据用户选择的模板生成的框架页面，用户可以从组件选择区拖拽组件到视图预览区，在视图预览区选中一个组件，可以在参数配置区配置数据源，数据源分为接口方式、数据库连接方式、文本方式等。可以配置数据筛选条件，数据展示的维度，展示参数等。配置好后可以在预览区看到图表的生成效果。文本组件支持双击进行文字编辑，实时动态刷新的数字显示可以配置页面参数接收后台推送的数据。

3.2.3 视图管理

视图管理提供一个列表可以查看所有己创建的视图，包括视图创建时间、创建人、视图实例的名称、描述、状态等信息。可以选择某个视图进行重新编辑，可以删除已经创建的视图。

3.2.4 组件库

组件库集成了多种开源的图表组件，包含常用的饼图、柱图、曲线图、热力图、地图等，系统自身还提供了可自由配置展示列的列表组件，可设置定时器的轮播组件，可嵌入页面的超链接组件，为可视化展示提供更大的灵活性。

3.2.5 用户管理

用户管理为每个使用系统的人员创建一个账号，用户通过用户名、密码方式登录系统进行功能使用。

3.2.6 权限管理

每个登录系统的用户只能查看自己创建的视图，仅能对自己创建的视图进行管理操作。

3.3 系统核心数据袁设计

视图实例表用于存储用户创建的视图实例，视图表引用关联的视图模板，视图模板表存储内置的多种样式和布局的模板初始化数据，视图与组件实例关系表存放每个视图引用的组件关联关系。组件实例表根据不同的组件分类创建了图表实例表、地图实例表、文本实例表、表格实例表、连接实例表等，这些实例表存储了用户配置的具体的组件展示的参数、映射的数据源、数据筛选条件等。组件元素表存放基础组件库，组件类型表存放定义的组件分类，如图2所示。

3.4 系统接口设计

为了适应多种外部系统作为数据源提供展示数据，系统使用了RESTful API作为第三方系统或本系统后台提供web服务的标准接口，每个服务端接口提供一个HTTP请求的链接，请求返回数据格式使用JSON，JSON是一种轻量级的数据交换格式，可通过页面脚本语言解析，这样就可以完成数据结果与页面组件展示的映射。

为了数据展示的实时性，很多数据是由服务器端实时采集计算生成的，当服务器端有新数据产生时需要立刻推送给展示端进行呈现，例如实时攻击展示、实时风险变化、实时状态监控等应用场景，系统采用了WebSocketAPI技术。WebSocker协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工（full-duplex）通信一一允许服务器主动发送信息给客户端。

4 结论

本系统实现了一个灵活可配置的数据可视化展示系统，该系统适用于数据中心、安全运营中心、智慧城市监控中心、电商营销中心等各行业监控大屏的数据可视化展示。本系统设计充分考虑了低耦合性、可复用性、可扩展性、易用性，通过界面的拖拽、参数的配置即可连接到不同的数据源进行图形化的呈现，为管理决策、控制指挥、实时态势的掌握提供了易用的工具。本系统目前还未支持通过与图表组件的交互实现数据详情的钻取查看，仍可继续完善。