李晓琳　王勇

摘 要：健康大数据具有数据量大、连续性强等特点，如果仍然采用传统方式开发健康大数据平台的用户接口，会导致代码冗余、开发周期长等问题。根据CARD信息可视化模型，以及面向主题的原则，对《WS365-2011城乡居民健康档案基本数据集》进行数据可视化分析。基于AngularJS框架，以controller為核心，以directive实现视图复用，以ui-route服务实现路由控制，设计并搭建了一个前端模块化系统，从而将视图、数据模型以及行为分离。同时，通过Angular中的指令方式引入并使用了Echarts，其中添加了用户交互效果。结果表明，该方式增强了模块的复用性，简化了开发流程，降低了维护成本，提高了可维护性。

关键词：健康大数据平台；用户接口；前端模块化；AngularJS；数据可视化

DOI：10.11907/rjdk.171255

中图分类号：TP319 文献标识码：A 文章编号：1672-7800（2017）009-0120-03

Abstract：Healthy informationincludes large amount of continuity data， which will cause code redundancy， long development cycle etc. Problems if developer still using traditional method to develop user interface for healthy information system. According to card information visualization model， and topic oriented principle， the developer analysis the WS365-2011 urban and rural residents health records basic data set. The developer designed and built a front-end modular system， based on AngularJS framework.To achieve MVC framework， and separate view， data model， and user behavior， developer using controller as a core to maintain user behavior， directive system to make views reuse， and ui-route service to achieve routing control. The system also leaded to echarts through the way of directive in angularJS， which added users interaction. The results show that this approach has enhanced the reusability of modules， simplifiesthe development process， reduce the maintenance cost， also improved the maintainability.

Key Words：healthy information； user interface； front-end modular； AngularJS； data visualization

0 引言

如今，随着生活与环境压力的不断增大，人们开始越来越多地关注自身的健康问题。然而，目前与健康相关的大数据中，主要存在以下问题：①内容不完整，缺少连续性；②内容、形式缺乏统一标准；③信息系统之间相互独立，重复采集健康数据的现象普遍[1-2]。《WS365-2011城乡居民健康档案基本数据集》完善了健康体检数据，《卫生信息数据元值域代码WS364》规定了每条数据的内容。本文基于AngularJS的MVC框架以及Ecarts数据可视化技术，简化了数据采集流程，生动展示了健康相关的大数据。

1 技术综述

近年来，由于互联网迅速发展，信息量激增，为了满足开发者对开发周期以及模块化开发的需求，前端开发领域逐渐向模块化开发转变，各种前端MVC框架也应运而生。前端MVC框架以模型为中心，将行为、模型、视图分离，开发者必须遵从框架的各种规则，最终实现模块化开发。AngularJS通过以HTML模板作为交互模块的方式，简化了前端对于数据和模型的交互流程。这一整套协作机制能够增强模块复用性，大大提高了开发效率。

1.1 AngularJS工作原理

AngularJS是由Google创建的一种JS框架，它能够扩展应用程序中的HTML词汇，从而在Web应用程序中使用HTML声明动态内容，支持快速测试、路由管理与基于MVC的模块化开发[3]。此外，AngularJS拥有良好的指令系统，可进行双向数据绑定，并基于MVC框架，便于开发者进行模块化开发[4]。AngularJS通过依赖注入向控制器注入所需的模块和数据，再采用数据双向绑定将控制器中的数据发送到前台，形成人们需要的视图。

AngularJS实现了“单页面应用（SPA，Single Page Application）”。SPA指整个系统均起始于一个页面，在此页面上集成了系统中的所有模块[5]。在此基础上，服务器仅需提供数据即可，不需要再进行页面解析生成工作，从而减轻了服务器压力。SPA将AJAX的无刷新机制发挥到了极致，用户可以享受到像单机程序一样的流畅体验。此外，Angular中的NgRoute服务可以通过配置相对路径，实现在一个页面中调配所需的页面资源，而无需通过页面之间的跳转实现页面内容转换。指令系统可以实现视图复用，控制器与过滤器可实现数据模型的制作与数据双向绑定。endprint

1.2 数据可视化

随着大数据时代的到来，海量的信息、多样的数据类型，以及医疗数据的时效性与隐私性[2]，使原本静态的数据展示方式已无法满足人们需要。如图1所示，根据CARD信息可视化模型，信息可视化过程可以分为数据预处理、绘制、显示和交互3个阶段，从而将源数据转换为便于用户理解的视图[6]。

基于前端的数据可视化类库有很多，核心都脱离不了Canvas与SVG，二者都是浏览器绘图的基础。各个框架都对其进行了底层封装与特效制作、性能优化。Echarts是基于Canvas类库Zrender开发的数据可视化类库，目前是GitHub上star数目最多的开源项目。Echarts提供了各种不同的高维度大数据展示方式，且类型丰富，常规的有折线图、柱状图、饼图、散点图等，专业类图有雷达图、K线图、和弦图、力导向布局图、热力图等。

2 健康监测大数据前端模块设计与实现

2.1 数据模型设计

根据前文提到的CARD信息可视化模型，数据可视化过程分为以下7个阶段：获取、分析、过滤、挖掘、表示、修饰、交互。这7个阶段可以归纳为原始数据转换、数据视觉转换以及界面交互3部分。本文采用的数据集为《WS365-2011城乡居民健康档案基本数据集》，如图2所示。此数据集分为20张表格，从用户基本信息、健康体检、疾病控制、疾病管理、儿童保健、妇女保健以及医疗服务几大类规定了健康相关数据。《卫生信息数据元值域代码WS364》则规定了相关字段的值。

在城乡居民健康档案基本数据集中，共有932条数据元。本文依据面向主题的原则[4]，逐一将数据元整合并重新展示。利用数据可视化技术，展现出数据本身可随时间变化的特点[7]。以基本信息类中的个人信息为例，将数据根据表述的主题进行重新分析，再将每个小的主题组合成几个较大类的主题。以此类推，可以将932条数据元定位到确定的位置。

通过分析《WS365-2011城乡居民健康档案基本数据集》可以看出，不是每个元数据都需要以图表形式进行展示。经过分析计算，有25个元数据需要被展示在图表上。因此，经过可视化数据分析，需要以数组的形式获取这25个数据，并且经过AngularJS中的控制器，将数据合成为Echarts所需的格式。

2.2 AngularJS框架搭建

本系统总体基于AngularJS框架，采用了MVC设计思想。MVC将用户界面、模型层与流程控制分开，在开发过程中具有更好的可修改性与可扩展性[8]。如图3所示，根据MVC框架，系統主要分为Service、Controller、View三个层次，其中View主要负责页面的显示与交互，将Controller中的数据展示在页面上；Service的作用是进行路由控制，通过http的方式从数据库中获取数据，传递给Controller；Controller中存放用户所需的数据，由于数据量庞大，Controller会根据页面与数据显示分解成不同的Controller，从而降低整个Controller模块的耦合度。

在本系统中，开发人员主要用到了Angular中的以下功能：

（1）通过ng-route实现路由转换。Angular中的路由服务可以通过配置URL与templateURL指定该路径对应的模板文件位置，其中.otherwise（）方法用来指定默认访问路径。

MYMurlRouterProvider.otherwise（"/index_healthy_records_attribute"）；

MYMstateProvider.state（"index"，{

url：'/index：pageName'，

views：{

''：{

templateUrl："tpls/common/home.html"

}，

'navbar@index'：{

templateUrl："tpls/common/navbar.html"

}，

'main@index'：{

templateUrl："tpls/common/main.html"

}，

"footer@index"：{

templateUrl："tpls/common/footer.html"

}

}

}）

（2）通过Controller写入数据模型。Controller的作用是提供数据模型，将数据模型绑定在控制器的MYMscope上。每个控制器的作用域中都有一个MYMscope，这是一个JS对象，可以在该作用域下创建数据模型，进行双向数据绑定，也可以通过MYMhttpProvider服务从后台获取数据。

（3）通过directive实现视图复用。AngularJs中的指令具有强大功能，用户需要利用指令实现修改DOM、绑定事件。开发者通过自定义directive可以指定自定义模板，并对模板元素进行数据绑定，获取其属性等。通过自定义指令，在View模块中可以直接以元素、属性、样式类以及注释的方式使用该指令。因为指令的强大功能，使开发者避免了大量重复工作，将系统中的数据按照其显示的内容进行组件化的分类抽象，即可实现视图与功能的复用[1]。

2.3 Echarts图表模块分析与实现

Echarts是由百度前端可视化团队开发的一个开源的商业级图表库，底层依赖轻量级的Canvas类库Zrender，提供可进行高度个性化定制的数据可视化图表。创新的部分如拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力[6]。它可兼容目前的大部分浏览器（IE6-11、Chrome、FireFox、Safari等）。不同于传统的视觉呈现，Echarts还提供了数据区域缩放、数据视图、动态类型切换、散点图等功能。与D3.js、HighCharts相比，Echarts封装了更多、更好的交互功能，并且可以更好地支持多种版本的浏览器。endprint

在网上关于Echarts的使用是将Echarts作为第三方脚本导入，然后调用相应方法即可。但由于Angular是基于模块化的前端框架，因此需要将Echarts封装成一个模块，以供其它模块组件使用。将Echarts库引入本项目中后，开发者将Echarts封装成一个指令ng-echarts，View模块可以直接以元素的方式使用。此外，还定义了ec-config与ec-option属性用来绑定图表的类别与设置。

angular.module（'ng-echarts'，[]）

.directive（'ngEcharts'，[function（）{

return {

//利用directive的方式自定义元素对象

link： function（scope，element，attrs，ctrl）{

function refreshChart（）{...}；

scope.MYMwatch（…）；

//图表原生option

scope.MYMwatch（…）；

}，

scope：{

option：'=ecOption'，

config：'=ecConfig'

}，

restrict：'EA'}

}]）；

3 结语

通过分析《WS365-2011城乡居民健康档案基本数据集》，依据CARD信息可视化模型对数据字段进行分组整合，再基于AngularJS的MVC框架搭建前端框架，通过Angular控制器进行数据模型定义以及数据双向绑定，并通过路由服务将模板与路径进行绑定，从而实现前端的模块化开发[9]。此外，本文联合了Echarts图表进行数据呈现，利用Echarts实现了图表类型转换、数据视图、图标放大等多种交互功能，提升了用户体验。后续将对数据分析和挖掘工作作进一步分析与整合，在平台中提供更细致的数据分析与更多样化的交互体验。

参考文献：

[1] 董英茹.简谈AngularJS在下一代Web开发中的应用[J].软件工程师，2015（5）：30-31.

[2] 颜延，秦兴彬，樊建平，等.医疗健康大数据研究综述[J].科研信息化技术与应用，2014，5（6）：3-16.

[3] 冯晨超.基于AngularJS的物品和用户查询模块的设计与实现[D].南京：南京大学，2014.

[4] 格林，夏德瑞.用AngularJS开发下一代Web应用[J].中国科技信息，2013（23）：90.

[5] 詹义，朴勇梅，周胜.采用AngularJS构建知识管理系统数据分析平台[J].互联网天地，2016（11）：68-72.

[6] 杨彦波，刘滨，祁明月.信息可视化研究综述[J].河北科技大学学报，2014，35（1）：91-102.

[7] KEIM D A. Information visualization and visual data mining[J]. IEEE Transactions on Visualization & Computer Graphics，2002，8（1）：1-8.

[8] 于春娜，王晨升，杨光，等.Web前端MVC框架的意义研究[J].产业与科技论坛，2014（1）：52-53.

[9] 郭愛平，张立群，罗莉.基于MVC模式的界面自动生成[J].计算机工程与设计，2007，28（19）：4793-4795.

（责任编辑：黄 健）endprint