计算机系统应用 ｈｔｔｐ：／／ｗｗｗ．ｃ—Ｓ－ａ．ｏｒｇ．ｃｎ ２０１７年第２６卷第６期 采用ＥＣｈａｒｔｓ可视化技术实现的数据体系监控系统 冀 潇，李 杨 （中国电子科学研究院，北京１０００４１） 摘 要：针对如何将大量数据以可视化的形式呈现在用户面前，从而能够更加清晰的传达信息的问题，采用了 ＥＣｈａｒｔｓ可视化技术实现数据体系监控系统．详细描述了该数据体系监控系统的系统设计，并讲述了该系统的具 体实现，从而说明了使用ＥＣｈａｒｔｓ可视化技术以图形化的方式对数据信息进行展示的起着十分重要的作用． 关键词：ＥＣｈａｒｔｓ；可视化；编程语言；异步调用；监控 Ｒｅａｌｉｚａｔｉｏｎ ｏｆ Ｄａｔａ Ｈｉｅｒａｒｃｈｙ Ｍｏｎｉｔｏｒｉｎｇ Ｓｙｓｔｅｍ ｂｙ Ｕｓｉｎｇ ＥＣｈａｒｔｓ Ｖｉｓｕａｌｉｚａｔｉｏｎ 儿Ｘｉａｏ．ＬＩ Ｙａｎｇ （ＣｈｉｎａＡｃａｄｅｍｙｏｆＥｌｅｃｔｒｏｎｉｃｓ ａｎｄＩｎｆｏｒｍａｔｉｏｎＴｅｃｈｎｏｌｏｇｙ，Ｂｅｉｊｉｎｇ １０００４１，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：Ａｉｍｉｎｇ ａｔ ｓｏｌｖｉｎｇ ｔｈｅ ｐｒｏｂｌｅｍ ｏｆ ｈｏｗ ｔｏ ｓｈｏｗ ａ ｌａｒｇｅ ｎｕｍｂｅｒ ｏｆ ｄａｔａ ｉｎ ｇｒａｐｈｉｃａｌ ｆｏｒｍ，ＳＯ ａｓ ｔｏ ｃｏｎｖｅｙ ｉｎｆｏｒｍａｔｉｏｎ ｍｏｒｅ ｃｌｅａｒｌｙ，ｔｈｅ ＥＣｈａ￣ｓ ｖｉｓｕａｌｉｚａｔｉｏｎ ｔｅｃｈｎｏｌｏｇｙ ｉｓ ａｄｏｐｔｅｄ ｔｏ ｒｅａｌｉｚｅ Ｄａｔａ Ｍｏｎｉｔｏｒｉｎｇ Ｓｙｓｔｅｍ．Ｔｈｅ ｄｅｓｉｇｎ ｏｆ ｔｈｅ ｍｏｎｉｔｏｒｉｎｇ ｓｙｓｔｅｍ ｉｓ ｄｅｓｃｒｉｂｅｄ ｉｎ ｄｅｔａｉｌ ａｎｄ ｔｈｅ ｓｐｅｃｉｆｉｃ ｉｍｐｌｅｍｅｎｔａｔｉｏｎ ｉｓ ａｌｓｏ ｄｅｓｃｒｉｂｅｄ．Ｔｈｅｒｅｂｙ，ｉｔ ｉｓ ｖｅｒｙ ｉｍｐｏｒｔａｎｔ ｔｏ ｓｈｏｗ ｄａｔａ ｉｎｆｏｒｍａｔｉｏｎ ｉｎ ｇｒａｐｈｉｃ ｆｏｒｍ ｂｙ ｕｓｉｎｇ ＥＣｈａｒｔｓ ｖｉｓｕａｌｉｚａｔｉｏｎ ｔｅｃｈｎｏｌｏｇｙ． Ｋｅｙｗｏｒｄｓ：ＥＣｈａｒｔｓ；ｖｉｓｕａｌｉｚａｔｉｏｎ；ｐｒｏｇｒａｍｍｉｎｇ ｌａｎｇｕａｇｅ；ａｓｙｎｃｈｒｏｎｏｕｓ ｉｎｖｏｃａｔｉｏｎ；ｍｏｎｉｔｏｒ 随着科技的飞速进步和网络技术的快速发展，人 们对数据和信息获取、发布、接收量也在日益增多，相 对于大量的文本信息和数字信息，以图形图表的形式 心、面向服务”的设计思想，立足于满足未来数据广域 分布、海量存储、按需访问、集中管理的需求【３】，研发 出一种数据服务体系，能够在数据中心和数据访问节 点之间实现数据封装、同步、抽取、组织、维护等基 础服务，保证数据的可见性、可访问性和可理解性，使 用户能够无需关心分布结构、存储方式等物理细节， 实现数据的跨系统、跨领域、多层次共享． 数据服务体系以华北数据服务中心（北京）为主中 心，西北数据服务中心（西安）、西南数据服务中心（程 能够为用户提供更加直观形象的信息内容，能够加快 人们对信息的吸收、消化能力，增强理解性、降低认 知负担【ｌ１．因此将可视化技术应用于Ｗｅｂ环境下，必 然能够促进可视化技术在信息交互方面的普及和发展， 从而达到帮助人们更加迅速有效的认知、掌握并理解 信息的目的，成为目前流行的开发趋势【２】． 本文前端页面开发在使用ＪａｖａＳｃｒｉｐｔ语言做的基 础上，引入了ＥＣｈａ￣ｓ插件，结合Ａｊａｘ异步调用方式动 态读取数据库，将数据信息用可视化的图形界面展示 度）、华东数据服务中心（上海）、中南数据服务中心（海 口）为分中心的两级组网架构，进行数据服务体系系统 的构建，每一个数据服务中心下分别挂靠２～３个数据 访问节点，如所示图１．各数据服务中心作为数据服务 提供者，对用户按需提供数据服务． 该数据体系监控系统能够对各异地数据服务中心 在前台，实现了对数据体系监控系统的可视化开发工 作，并能够通过良好的界面达到与用户友好交互的目的． １系统开发背景 本数据体系监控系统是针对某数据服务体系开发 的一个监控系统．该数据服务体系系统按照“网络中 之间的跨域数据共享与访问的状态进行监控，从而掌 握整个数据服务体系各中心之间的数据传输方向、数 据传输时的网络负载值、运行状况等信息．而在未使 ①收稿时间：２Ｏ１６－０９－１８：收到修改稿￣ｆｎ］：２０１６．１０．２７［ｄｏｉ：１０．１５８８８／ｊ．ｃｎｋｉ．ｃｓａ．００５７８２］ ７２系统建设Ｓｙｓｔｅｍ Ｃｏｎｓｔｒｕｃｔｉｏｎ ２０１７年第２６卷第６期 ｈｔｔｐ：／／ｗｗｗ．ｃ—Ｓ—ａ．ｏｒｇ．ｃｎ 计算机系统应用 用ＥＣｈａｒｔｓ可视化技术Ｆ，当用户登录该数据体系监 控，禽询数据监控信息时，系统通过表格的形式将各 服务中心之间的数据传输详细信息展现在界面上．如 户端接收后冉由浏览器来直接执行解释工作．从代码 规范上来看，ＪａｖａＳｃｒｉｐｔ是一种直接嵌入在ｈｔｍｌ中的脚 本语言，其格式不像ｉａｖａ语言一样严格，语法相对自 图２、图３所示． 图１ 数据服务体系系统组成图 图２数据体系监控系统传输信息监控页面 Ｉｔ ’￥ 图３ 数据体系监控系统传输信息一览表 ２技术简介 ２．１ ＪａｖａＳｃｒｉｐｔ ＪａｖａＳｃｆｉｐｔ是Ｎｅｔ—ｓｃａｐｅ公司推出的一种基于对象 和事件驱动的解释性编程语言［ ．其代码在执行时， 首先无需经过编译等工作而是直接发送到客户端，客 由、格式相对松散，例如在使用某一变量前并不需要 对该变量进行严格的格式声明．它被大量使用在客户 端，主要解决的是客户端的交互问题，成为网页设计 岬静 黼ｌ蕾 蜘 Ｈ壮 的一项重要技术Ｌ５Ｊ． ２．２Ａｊａｘ Ａｊａｘ即”Ａｓｙｎｃｈｒｏｎｏｕｓ Ｊａｖａｓｃｒｉｐｔ Ａｎｄ ＸＭＬ”ｆ异步 Ｊａｖａｓｃｒｉｐｔ和ＸＭＬ），是指一种新兴的网页开发技术， 是－－￣ｅｏ建立在ＪａｖａＳｃｒｉｐｔ、ＸＨＴＭＬ和ＣＳＳ、ＤＯＭ、 ＨＭＬＨ Ｒｅｑｕｅｓｔ、ＸＭＬ等大量成熟技术基础之上的 一项综合技术，用于创建快速动态网页的技术［６］．如 果不使用Ａｊａｘ技术而采用以往的传统技术来更新网 页内容，则需要对整个页面进行重新加载，而采用 Ａｊａｘ技术就能够实现网页的异步更新，即通过很少量 的数据传递和交换，对需要更新的网页内容进行新数 据替换． ２．３ ＥＣｈａｒｔｓ ＥＣｈａｒｔｓ是Ｅｎｔｅｒｐｒｉｓｅ Ｃｈａｒｔｓ缩写，表示商业级数 据表图，它是一个基于ｈｔｍｌ５ Ｃａｎｖａｓ的图标库，可以 流畅的运行在ＰＣ和移动设备上，兼容当前绝大部分 浏览器（ＩＥ６／７／８／９／１０／１１，ｃｈｒｏｍｅ，ｆｉｒｅｆｏｘ，Ｓａｒａｒｉ等），底 层依赖轻量级的Ｃａｎｖａｓ类库ＺＲｅｎｄｅｒ，创建了坐标系、 图例、提示、工具箱等基础组件，能够提供直观、生 动、可交互、可高度个性化定制的数据可视化图表．创 新的拖拽计算、数据视图、值域漫游等特性大大增强 了用户体验，赋予了用户对数据进行挖掘、整合的能 力［ ． ３系统设计与实现 ３．１数据流设计 用户要获取数据信息生成系统所需的页面，需要 通过登录前台界面触发与后台的交互，通过Ｓｔｒｕｔｓ定 位到需要调用的Ａｃｔｉｏｎ类中的方法，并通过该类中的 方法读取数据传输信息，该信息包含了各服务中心之 间的数据传输起点、终点、方向、网络负载等，并以 Ｊｓｏｎ的格式返回至前台页面后，再通过ＥＣｈａｒｔｓ可视化 方法生成ＪＳＰ文件，并存放在指定的位置后，在前端 生成可视化界面展现给用户．其数据流模型图如图４ 所示． Ｓｙｓｔｅｍ Ｃｏｎｓｔｒｕｃｔｉｏｎ系统建设７３ 计算机系统应用 ｈｔｔｐ “ 通过Ｓｔｒｕｔｓ定位到 ．Ｃ—Ｓ—ａ．ｏｒｇ．ｃｎ ２０１７年第２６卷第６划 负面前端发起 数据请求 调用的Ａｃｔｉｏｎ。 通过Ａｊａｘ从后台调用 通过Ａｃｔｉｏｎ类 取数据 ｊａｖａ ｒ￣的Ａｃｔｉｏｎ类 库中的数据传输信息 Ｉｌ 卡｛ｌ父数 ｉ 息 Ｉ 为用，’・进行 前端负面展示 ｛ 酶 通过Ｅｃｈａｒｔｓ可视化力‘法 生成所需的ＪＳＰ文件 通过Ｊｓｏｎ的数据格』 返 前台的 图４页面获取数据信息生成系统数据流模型 ３．２利用ＥＣｈａｒｔｓ可视化技术的系统实现 ＪａｖａＳｃｒｉｐｔ作为一种主要的Ｗｅｂ客户端轻量级脚 本语言，主要用于实现动态网页效果以及与Ｗｅｂ访问 着问的简单交互．ＥＣｈａｒｔｓ作为一个图表库，能够根据 需求定制形象的可视化图表，有良好的交互性，能够 被应用到需要数据展现的各类应用场景中．在该数据 体系监控的应用过程中，采用Ａｊａｘ异步调用方式，通 过调用后台的ｉａｖａ代码读取所需的数据信息，返回至 前台页面后，使用ＥＣｈａｒｔｓ可视化插件，将数据传输信 息以图形化的方式呈现在用户面前． 其具体使用配置步骤为： （１）住ｈｔｍｌ文什中开辟一个如ｄｉｖ、ｓｐａｎ之类的 Ｄｏｍ元素。用来显示可视化的图表： （２１将ｅｃｈａｒｔｓ．ｊｓ文件引Ａ．￣ｌＪ＜ｓｃｒｉｐｔ＞标签中，并在 此标签中配置可视化图表的使用路径； （３）在＜ｓｃｒｉｐｔ＞标签内加载ｄｏｍ，初始化ＥＣｈａｒｔｓ图表，对回调函数中的ｏｐｔｉｏｎ做个性化数值设置 】． 具体的流程如图５所示． 图５数据信息读取与前台展现流程图 ７４系统建设Ｓｙｓｔｅｍ Ｃｏｎｓｔｒｕｃｔｉｏｎ 在ｉｎｄｅｘ．ｊｓｐ中，用户名 录后的ＪａｖａＳｃｒｉｐｔＩ＇匕码实 现了以下主要功能：对页 ‘畎进行初始化的过 采用Ａｊａｘ异步调用方式调｝ｆ】ｌｉｓｔＭａｐＤａｔａｌｎｆｏ后台代码， 读取数据库中的数据信息，牛成ｊｓｏｎ格式数据返Ｉ几Ｉ到 前台页面，存储在ｍａｐｄａｔａｌｎｆｏ返回值 中， ｍａｐｄａｔａｌｎｆｏ中包含了数抛信息 各数据服务中心之 间传输的起始点、终点、网络负载值等．具体代码如 下： ￥（ｄｏｃｕｍｅｎｔ）．ｒｅａｄｙ（ｆｕｎｃｔｉｏｎ（）｛ ｖａｒ ｖ＝｛｝；／／ＥＣｈａｒｔｓ要存储的数 服务中心信息 ／／的对象，初始化为 ｖａｒ ｔｘｔ：”；／／存储两个数据服务叶１心之问传送的信 ｝｝愚内容 ￥．ａｊａｘ（ｆ ｕｒｌ：”ｄａｔａ／ｌｉｓｔＭａｐｌｎｆｏ．ａｃｔｉｏｎ＂，／／使用ａｊａｘ调用 ／／后台的ｌｉｓｔＭａｐｌｎｆｏ代码，获取数据服 ／／务中心信息 ｔｙｐｅ：”ｐｏｓｔ”， ａｓｙｎｃ：ｆａｌｓｅ， ｃａｃｈｅ：ｆａｌｓｅ， ｄａｔａＴｙｐｅ：’＇ｊｓｏｎ”， Ｓｕｃｃｅｓｓ＂ｆｕｎｃｔｉｏｎ（ｄａｔａ）｛ ｍａｐｊｓｏｎ ｅｖａｌ（’（’＋ｄａｔａ．ｍａｐｄａｔａｌｎｆｏ＋’）’）； ／ 返回值ｍａｐｄａｔａｌｎｆｏ中包含 数据服务中心之间传 输的数据信息，以ｊｓｏｎ格式赋值给变最ｍａｐｊｓｏｎ ／ ｝ ｝）； Ｖ［’ｔｒｉｇｇｅｒ＇］＝’ｉｔｅｍ’； Ｖ【’ｆｏｒｍａｔｔｅｒ’】＝ｆｕｎｃｔｉｏｎ（ａ）｛ ／ ｍａｒｋ存储两个数据服务中心之间传送的信息 内容 并对此信息进行验 ，验 后赋： 变蕈ｔｘｔ＊／ ｆｏｒ（ｖａｒ ｉ＝０；ｉ＜ｍａｐｊ ｓｏｎ．１ｅｎｇｔｈ；ｉ＋＋）｛ ｉｆ（ａ［１］： ｍａｐｊｓｏｎ［ｉ］．ｍａｒｋ） ２０１７年第２６卷第６划 ｈｔｔｐ：／／ｗｗｗ．ｃ—Ｓ—ａ．ｏｒｇ．ｃｎ 汁锋机系统麻厂玎 ｔｘｔ＝ｍａｐｊｓｏｎ［ｉ］．ｉｎｆｏ； ｝ ｅｌｓｅ ｉｆ（ａ［１］＝＝ｍａｐｊｓｏｎ［ｉ］．ｂｅｇｉｎｌｌａ［１】 ｍａｐｊｓｏｎ［ｉ］．ｅｎｄ） ｔｘｔ：ａ【１］； ｝ ｒｅｉｎｒｎｔｘｔ； ｝ ｒｅｔｕｒｎ ｍａｐｄｅｔａｉｌ； ｝ 最终，用ＥＣｈａｒｔｓ可视化技术呈现出的数据信息 传输界面如图６所示．根据中心选， 策略从体系内的５ ｝ ｒｅｔｕｒｎ ｖ： 个数据中心ｌ１ 挑选华北数据服务中心（北京）作为 数 据中心，同时，主数据中心和其余４个数据中心之问 形成镜备像份的关系，当主数据中心失效后，系统自 ｝）； 接下来，对ＥＣｈａｒｔｓ中的ｏｐｔｉｏｎ对象进行设置，将 动从其余４个数据中心重新选出新的主数据中心继续 ｍａｐｄａｔａｌｎｆｏ取到的返Ｉ【１Ｊ值中包括了了华北数据服务 提供服务． 冈巾ｌ丁ｌ以直观的看到５个数据中心在地 中心（北京）、西北数据服务中心（ 安）、四南数据服务 图中所处的位置，它们之间的连线上动态闪烁点的运 ｃｆ，心（成都）、华东数据服务巾心（ 海）、ｒｆ１南数据服务 行轨迹能够一目了然的看到数据传输的方向，鼠标放 中心（海口）五个数据服务中心，对ｍａｒｋＰｏｉｎｔ对象里的 在连线上能够显示出节点问的传输内容，局部放大后 ｄａｔａ属性进行赋值，从而获取数据服务 点的名称和 的图如图７所示． 属性信息，用以进行前台界面的展示．具体代码如下： ｆｕｎｃｔｉｏｎ ｇｅｔＭａｐＰｏｉｎｔＤａｔａ（）｛ ｖａｔｐｏｉｎｔｓ＝盯；／／存储数据中心节点铝称 ｖａｒ ｐｏｉｎｔｎｕｍ＝ｍａｐｊｓｏｎ．１ｅｎｇｔｈ； ｆｏｒ（ｖａｒ ｉ＝０；ｉ＜ｐｏｉｎｔｎｕｍ；ｉ＋＋）｛ ／／数据中心起始点 ｐｏｉｎｔｓ．ｐｕｓｈ（｛ｎａｍｅ：ｍａｐｊｓｏｎ［ｉ］．ｂｅｇｉｎ｝）； ／／数据中心终Ｉ卜点 ｐｏｉｎｔｓ．ｐｕｓｈ（｛ｎａｍｅ：ｍａｐｊｓｏｎ［ｉ］．ｅｎｄ｛）； ｝ 图６数据体系监控系统界面展示 ｒｅｔｕｒｎ ｐｏｉｎｔｓ； ｝ 再将ｍａｐｄａｔａｌｎｆｏ中表示五个数据服务中心节点 之Ｉ＇ＨＪ的数据传输方向和网络负载的值进行设置，通过 对ｏｐｔｉｏｎ对象中的ｍａｒｋＬｉｎｅ对象里的ｄａｔａ属性进行赋 伉，用以进行前台界而的展示，具体代码如下： ｆｕｎｃｔｉｏｎ ｇｅｔＭａｐＤａｔａＬｉｎｅ（）｛ ｖａｒ ｍａｐｄｅｔａｉｌ＝［］；／／存储数据中心节点信息 ｉｆ（ｍａｐｊｓｏｎ．１ｅｎｇｔｈ！＝ｎｕｌ１）｛ ｏｆｒ（ｖａｒ ｉ＝０；ｉ＜ｍａｐｊｓｏｎ．１ｅｎｇｔｈ；ｉ＋＋）｛ 图７数据体系监控系统界面局部放大图 ｖａｒｔ＝［］； ／／数据中心起始点 本系统拥ｌ仃气象信息、水文信息、地理空间信息、 ｔ．ｐｕｓｈ（｛ｎａｍｅ：ｍａｐｊｓｏｎ［ｉ］．ｂｅｇｉｎ｝）； 电磁信息、环境信息等１２个数据访问节点，分别挂靠 ／＊ｅｎｄ为数据中心终止点，ｖａｌｕｅ为传输负载率 ／ 在五个不同的数据中心下，部署了相应的数据服务端 ｔ．ｐｕｓｈ（｛ｎａｍｅ：ｍａｐｊｓｏｎ［ｉ］．ｅｎｄ，ｖａｌｕｅ：ｍａｐｊｓｏｎ［ｉ］．ｖａｌｕｅ｝）； 软件集和数据服务总线服务端软件集，负责直接处理 ｍａｐｄｅｔａｉｌ．ｐｕｓｈ（ｔ）； 相关各个用户系统提出的数据服务请求，并按照管理 Ｓｙｓｔｅｍ Ｃｏｎｓｔｒｕｃｔｉｏｎ系统建设７５ 计算机系统应用 ｈｔｔｐ－／１ｗ￣．ｃ—ｓ—ａ．ｏｒｇ．（３１３ ２０１７年第２６卷第６期 策略接收和存储全局 享数据和相关局部共享数据． 其访问节点示意 如图８所示． 在该系统中，还能够用饼状图、柱状图、折线图、 力导向布局图等町视化方式对各数据服务中心的具体 监控信息进行展示．以华北数据服务中心（北京１为例 ４结语 综上所述，本文通过对数据体系监控系统的腱ｌ，Ｊ 与分析，可以看出，虽然 足用ＥＣｈａｒｔｓ町视化技术也 能够实现向用户展现数据监测的相关信息，ｆ【Ｉ采』｝】Ｊ ＥＣｈａ￣ｓ可视化技术后，图形化的表现形式更ＪＪｌｊ ｌｆ ｊ 然，也能够让用户更加清楚、形缘、 观的了斛剑所 奁询的信息，从而提升用户的体验感，Ｉ 此它 数 体系监控系统的开发中发挥了 要的作川． 参考文献 ｌ雷莹．基于Ｗｅｂ的可视化数据挖掘分析 台及Ｉ ’视化度臻 点击左侧导航栏或地图上的节点，可以进入该数据服 务中心的监控页面，在页面中间能够看到中心利用 率、数据容量、访问： 点请求数量以及所挂靠的访问 节点数量等信息，并能在页面左侧看到关于该数据服 务中心的属性信息和告警信息，如图９所示．具体实 现技术和代码不再赘述． 模型的研究与实现［硕： 学位论文］．北京：北京交通入 学 ２０１４． ２李伟波，鲍苏苏，李健壮．基于Ｗｅｂ医学图像町 化系统 用研究．计算机与现代化，２０１２，２０３（７）：９２—９５． ３汲汾．云计算中心基础设施管理系统的设计 实现ｆ硕ｌ：学 位论文１．天津：天津大学，２０ｌ２． ４包婧．ＪａｖａＳｃｒｉｐｔ并行化性能提升的研究 实现『硕 论文］．卜海：上海交通大学，２０１３． ５冀潇，李杨．ＪａｖａＳｃｒｉｐｔ与Ｊａｖａ在Ｗｅｂ开发【｛ｊ的应Ｈ】 ｊＩ 别． 化 图８数据访问节点示意图 通信技术，２０１３，４６（６）：１４５一ｌ４８． ６佟进．基ｆ Ａｊａｘ的定址网络爬虫系统的研究 实现［学化 论文】．北京：北京邮电大学，２０ｌ３， ７王锡良，卿光勇，武敬锋．基于ＨＴＭＬ５的数据 农 公０ ＿（ 象服务中的应用．电脑编程技ｓＳ＿￣－ｊ维护，２０１５，（１ ５）：７５—７６． ８赵捷，谭国强．基于新浪微博的数据挖掘及¨丁 化研究 技术与软件工程，２０１５，（１８）：１８１—１８２． 图９华北数据服务中心监控信息图 ７６系统建设Ｓｙｓｔｅｍ Ｃｏｎｓｔｒｕｃｔｉｏｎ
