李曉琳　王勇

摘 要：健康大數(shù)據(jù)具有數(shù)據(jù)量大、連續(xù)性強(qiáng)等特點(diǎn)，如果仍然采用傳統(tǒng)方式開發(fā)健康大數(shù)據(jù)平臺(tái)的用戶接口，會(huì)導(dǎo)致代碼冗余、開發(fā)周期長(zhǎng)等問題。根據(jù)CARD信息可視化模型，以及面向主題的原則，對(duì)《WS365-2011城鄉(xiāng)居民健康檔案基本數(shù)據(jù)集》進(jìn)行數(shù)據(jù)可視化分析?；贏ngularJS框架，以controller為核心，以directive實(shí)現(xiàn)視圖復(fù)用，以u(píng)i-route服務(wù)實(shí)現(xiàn)路由控制，設(shè)計(jì)并搭建了一個(gè)前端模塊化系統(tǒng)，從而將視圖、數(shù)據(jù)模型以及行為分離。同時(shí)，通過Angular中的指令方式引入并使用了Echarts，其中添加了用戶交互效果。結(jié)果表明，該方式增強(qiáng)了模塊的復(fù)用性，簡(jiǎn)化了開發(fā)流程，降低了維護(hù)成本，提高了可維護(hù)性。

關(guān)鍵詞：健康大數(shù)據(jù)平臺(tái)；用戶接口；前端模塊化；AngularJS；數(shù)據(jù)可視化

DOI：10.11907/rjdk.171255

中圖分類號(hào)：TP319 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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 引言

如今，隨著生活與環(huán)境壓力的不斷增大，人們開始越來越多地關(guān)注自身的健康問題。然而，目前與健康相關(guān)的大數(shù)據(jù)中，主要存在以下問題：①內(nèi)容不完整，缺少連續(xù)性；②內(nèi)容、形式缺乏統(tǒng)一標(biāo)準(zhǔn)；③信息系統(tǒng)之間相互獨(dú)立，重復(fù)采集健康數(shù)據(jù)的現(xiàn)象普遍[1-2]?！禬S365-2011城鄉(xiāng)居民健康檔案基本數(shù)據(jù)集》完善了健康體檢數(shù)據(jù)，《衛(wèi)生信息數(shù)據(jù)元值域代碼WS364》規(guī)定了每條數(shù)據(jù)的內(nèi)容。本文基于AngularJS的MVC框架以及Ecarts數(shù)據(jù)可視化技術(shù)，簡(jiǎn)化了數(shù)據(jù)采集流程，生動(dòng)展示了健康相關(guān)的大數(shù)據(jù)。

1 技術(shù)綜述

近年來，由于互聯(lián)網(wǎng)迅速發(fā)展，信息量激增，為了滿足開發(fā)者對(duì)開發(fā)周期以及模塊化開發(fā)的需求，前端開發(fā)領(lǐng)域逐漸向模塊化開發(fā)轉(zhuǎn)變，各種前端MVC框架也應(yīng)運(yùn)而生。前端MVC框架以模型為中心，將行為、模型、視圖分離，開發(fā)者必須遵從框架的各種規(guī)則，最終實(shí)現(xiàn)模塊化開發(fā)。AngularJS通過以HTML模板作為交互模塊的方式，簡(jiǎn)化了前端對(duì)于數(shù)據(jù)和模型的交互流程。這一整套協(xié)作機(jī)制能夠增強(qiáng)模塊復(fù)用性，大大提高了開發(fā)效率。

1.1 AngularJS工作原理

AngularJS是由Google創(chuàng)建的一種JS框架，它能夠擴(kuò)展應(yīng)用程序中的HTML詞匯，從而在Web應(yīng)用程序中使用HTML聲明動(dòng)態(tài)內(nèi)容，支持快速測(cè)試、路由管理與基于MVC的模塊化開發(fā)[3]。此外，AngularJS擁有良好的指令系統(tǒng)，可進(jìn)行雙向數(shù)據(jù)綁定，并基于MVC框架，便于開發(fā)者進(jìn)行模塊化開發(fā)[4]。AngularJS通過依賴注入向控制器注入所需的模塊和數(shù)據(jù)，再采用數(shù)據(jù)雙向綁定將控制器中的數(shù)據(jù)發(fā)送到前臺(tái)，形成人們需要的視圖。

AngularJS實(shí)現(xiàn)了“單頁(yè)面應(yīng)用（SPA，Single Page Application）”。SPA指整個(gè)系統(tǒng)均起始于一個(gè)頁(yè)面，在此頁(yè)面上集成了系統(tǒng)中的所有模塊[5]。在此基礎(chǔ)上，服務(wù)器僅需提供數(shù)據(jù)即可，不需要再進(jìn)行頁(yè)面解析生成工作，從而減輕了服務(wù)器壓力。SPA將AJAX的無刷新機(jī)制發(fā)揮到了極致，用戶可以享受到像單機(jī)程序一樣的流暢體驗(yàn)。此外，Angular中的NgRoute服務(wù)可以通過配置相對(duì)路徑，實(shí)現(xiàn)在一個(gè)頁(yè)面中調(diào)配所需的頁(yè)面資源，而無需通過頁(yè)面之間的跳轉(zhuǎn)實(shí)現(xiàn)頁(yè)面內(nèi)容轉(zhuǎn)換。指令系統(tǒng)可以實(shí)現(xiàn)視圖復(fù)用，控制器與過濾器可實(shí)現(xiàn)數(shù)據(jù)模型的制作與數(shù)據(jù)雙向綁定。endprint

1.2 數(shù)據(jù)可視化

隨著大數(shù)據(jù)時(shí)代的到來，海量的信息、多樣的數(shù)據(jù)類型，以及醫(yī)療數(shù)據(jù)的時(shí)效性與隱私性[2]，使原本靜態(tài)的數(shù)據(jù)展示方式已無法滿足人們需要。如圖1所示，根據(jù)CARD信息可視化模型，信息可視化過程可以分為數(shù)據(jù)預(yù)處理、繪制、顯示和交互3個(gè)階段，從而將源數(shù)據(jù)轉(zhuǎn)換為便于用戶理解的視圖[6]。

基于前端的數(shù)據(jù)可視化類庫(kù)有很多，核心都脫離不了Canvas與SVG，二者都是瀏覽器繪圖的基礎(chǔ)。各個(gè)框架都對(duì)其進(jìn)行了底層封裝與特效制作、性能優(yōu)化。Echarts是基于Canvas類庫(kù)Zrender開發(fā)的數(shù)據(jù)可視化類庫(kù)，目前是GitHub上star數(shù)目最多的開源項(xiàng)目。Echarts提供了各種不同的高維度大數(shù)據(jù)展示方式，且類型豐富，常規(guī)的有折線圖、柱狀圖、餅圖、散點(diǎn)圖等，專業(yè)類圖有雷達(dá)圖、K線圖、和弦圖、力導(dǎo)向布局圖、熱力圖等。

2 健康監(jiān)測(cè)大數(shù)據(jù)前端模塊設(shè)計(jì)與實(shí)現(xiàn)

2.1 數(shù)據(jù)模型設(shè)計(jì)

根據(jù)前文提到的CARD信息可視化模型，數(shù)據(jù)可視化過程分為以下7個(gè)階段：獲取、分析、過濾、挖掘、表示、修飾、交互。這7個(gè)階段可以歸納為原始數(shù)據(jù)轉(zhuǎn)換、數(shù)據(jù)視覺轉(zhuǎn)換以及界面交互3部分。本文采用的數(shù)據(jù)集為《WS365-2011城鄉(xiāng)居民健康檔案基本數(shù)據(jù)集》，如圖2所示。此數(shù)據(jù)集分為20張表格，從用戶基本信息、健康體檢、疾病控制、疾病管理、兒童保健、婦女保健以及醫(yī)療服務(wù)幾大類規(guī)定了健康相關(guān)數(shù)據(jù)。《衛(wèi)生信息數(shù)據(jù)元值域代碼WS364》則規(guī)定了相關(guān)字段的值。

在城鄉(xiāng)居民健康檔案基本數(shù)據(jù)集中，共有932條數(shù)據(jù)元。本文依據(jù)面向主題的原則[4]，逐一將數(shù)據(jù)元整合并重新展示。利用數(shù)據(jù)可視化技術(shù)，展現(xiàn)出數(shù)據(jù)本身可隨時(shí)間變化的特點(diǎn)[7]。以基本信息類中的個(gè)人信息為例，將數(shù)據(jù)根據(jù)表述的主題進(jìn)行重新分析，再將每個(gè)小的主題組合成幾個(gè)較大類的主題。以此類推，可以將932條數(shù)據(jù)元定位到確定的位置。

通過分析《WS365-2011城鄉(xiāng)居民健康檔案基本數(shù)據(jù)集》可以看出，不是每個(gè)元數(shù)據(jù)都需要以圖表形式進(jìn)行展示。經(jīng)過分析計(jì)算，有25個(gè)元數(shù)據(jù)需要被展示在圖表上。因此，經(jīng)過可視化數(shù)據(jù)分析，需要以數(shù)組的形式獲取這25個(gè)數(shù)據(jù)，并且經(jīng)過AngularJS中的控制器，將數(shù)據(jù)合成為Echarts所需的格式。

2.2 AngularJS框架搭建

本系統(tǒng)總體基于AngularJS框架，采用了MVC設(shè)計(jì)思想。MVC將用戶界面、模型層與流程控制分開，在開發(fā)過程中具有更好的可修改性與可擴(kuò)展性[8]。如圖3所示，根據(jù)MVC框架，系統(tǒng)主要分為Service、Controller、View三個(gè)層次，其中View主要負(fù)責(zé)頁(yè)面的顯示與交互，將Controller中的數(shù)據(jù)展示在頁(yè)面上；Service的作用是進(jìn)行路由控制，通過http的方式從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)，傳遞給Controller；Controller中存放用戶所需的數(shù)據(jù)，由于數(shù)據(jù)量龐大，Controller會(huì)根據(jù)頁(yè)面與數(shù)據(jù)顯示分解成不同的Controller，從而降低整個(gè)Controller模塊的耦合度。

在本系統(tǒng)中，開發(fā)人員主要用到了Angular中的以下功能：

（1）通過ng-route實(shí)現(xiàn)路由轉(zhuǎn)換。Angular中的路由服務(wù)可以通過配置URL與templateURL指定該路徑對(duì)應(yīng)的模板文件位置，其中.otherwise（）方法用來指定默認(rèn)訪問路徑。

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寫入數(shù)據(jù)模型。Controller的作用是提供數(shù)據(jù)模型，將數(shù)據(jù)模型綁定在控制器的MYMscope上。每個(gè)控制器的作用域中都有一個(gè)MYMscope，這是一個(gè)JS對(duì)象，可以在該作用域下創(chuàng)建數(shù)據(jù)模型，進(jìn)行雙向數(shù)據(jù)綁定，也可以通過MYMhttpProvider服務(wù)從后臺(tái)獲取數(shù)據(jù)。

（3）通過directive實(shí)現(xiàn)視圖復(fù)用。AngularJs中的指令具有強(qiáng)大功能，用戶需要利用指令實(shí)現(xiàn)修改DOM、綁定事件。開發(fā)者通過自定義directive可以指定自定義模板，并對(duì)模板元素進(jìn)行數(shù)據(jù)綁定，獲取其屬性等。通過自定義指令，在View模塊中可以直接以元素、屬性、樣式類以及注釋的方式使用該指令。因?yàn)橹噶畹膹?qiáng)大功能，使開發(fā)者避免了大量重復(fù)工作，將系統(tǒng)中的數(shù)據(jù)按照其顯示的內(nèi)容進(jìn)行組件化的分類抽象，即可實(shí)現(xiàn)視圖與功能的復(fù)用[1]。

2.3 Echarts圖表模塊分析與實(shí)現(xiàn)

Echarts是由百度前端可視化團(tuán)隊(duì)開發(fā)的一個(gè)開源的商業(yè)級(jí)圖表庫(kù)，底層依賴輕量級(jí)的Canvas類庫(kù)Zrender，提供可進(jìn)行高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的部分如拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力[6]。它可兼容目前的大部分瀏覽器（IE6-11、Chrome、FireFox、Safari等）。不同于傳統(tǒng)的視覺呈現(xiàn)，Echarts還提供了數(shù)據(jù)區(qū)域縮放、數(shù)據(jù)視圖、動(dòng)態(tài)類型切換、散點(diǎn)圖等功能。與D3.js、HighCharts相比，Echarts封裝了更多、更好的交互功能，并且可以更好地支持多種版本的瀏覽器。endprint

在網(wǎng)上關(guān)于Echarts的使用是將Echarts作為第三方腳本導(dǎo)入，然后調(diào)用相應(yīng)方法即可。但由于Angular是基于模塊化的前端框架，因此需要將Echarts封裝成一個(gè)模塊，以供其它模塊組件使用。將Echarts庫(kù)引入本項(xiàng)目中后，開發(fā)者將Echarts封裝成一個(gè)指令ng-echarts，View模塊可以直接以元素的方式使用。此外，還定義了ec-config與ec-option屬性用來綁定圖表的類別與設(shè)置。

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

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

return {

//利用directive的方式自定義元素對(duì)象

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

function refreshChart（）{...}；

scope.MYMwatch（…）；

//圖表原生option

scope.MYMwatch（…）；

}，

scope：{

option：'=ecOption'，

config：'=ecConfig'

}，

restrict：'EA'}

}]）；

3 結(jié)語(yǔ)

通過分析《WS365-2011城鄉(xiāng)居民健康檔案基本數(shù)據(jù)集》，依據(jù)CARD信息可視化模型對(duì)數(shù)據(jù)字段進(jìn)行分組整合，再基于AngularJS的MVC框架搭建前端框架，通過Angular控制器進(jìn)行數(shù)據(jù)模型定義以及數(shù)據(jù)雙向綁定，并通過路由服務(wù)將模板與路徑進(jìn)行綁定，從而實(shí)現(xiàn)前端的模塊化開發(fā)[9]。此外，本文聯(lián)合了Echarts圖表進(jìn)行數(shù)據(jù)呈現(xiàn)，利用Echarts實(shí)現(xiàn)了圖表類型轉(zhuǎn)換、數(shù)據(jù)視圖、圖標(biāo)放大等多種交互功能，提升了用戶體驗(yàn)。后續(xù)將對(duì)數(shù)據(jù)分析和挖掘工作作進(jìn)一步分析與整合，在平臺(tái)中提供更細(xì)致的數(shù)據(jù)分析與更多樣化的交互體驗(yàn)。

參考文獻(xiàn)：

[1] 董英茹.簡(jiǎn)談AngularJS在下一代Web開發(fā)中的應(yīng)用[J].軟件工程師，2015（5）：30-31.

[2] 顏延，秦興彬，樊建平，等.醫(yī)療健康大數(shù)據(jù)研究綜述[J].科研信息化技術(shù)與應(yīng)用，2014，5（6）：3-16.

[3] 馮晨超.基于AngularJS的物品和用戶查詢模塊的設(shè)計(jì)與實(shí)現(xiàn)[D].南京：南京大學(xué)，2014.

[4] 格林，夏德瑞.用AngularJS開發(fā)下一代Web應(yīng)用[J].中國(guó)科技信息，2013（23）：90.

[5] 詹義，樸勇梅，周勝.采用AngularJS構(gòu)建知識(shí)管理系統(tǒng)數(shù)據(jù)分析平臺(tái)[J].互聯(lián)網(wǎng)天地，2016（11）：68-72.

[6] 楊彥波，劉濱，祁明月.信息可視化研究綜述[J].河北科技大學(xué)學(xué)報(bào)，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].產(chǎn)業(yè)與科技論壇，2014（1）：52-53.

[9] 郭愛平，張立群，羅莉.基于MVC模式的界面自動(dòng)生成[J].計(jì)算機(jī)工程與設(shè)計(jì)，2007，28（19）：4793-4795.

（責(zé)任編輯：黃 ?。〆ndprint