基于AngularJS的健康大數(shù)據(jù)用戶接口設(shè)計與實現(xiàn)

李曉琳　王勇

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

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

DOI：10.11907/rjdk.171255

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

如今，隨著生活與環(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ù)，簡化了數(shù)據(jù)采集流程，生動展示了健康相關(guān)的大數(shù)據(jù)。

1 技術(shù)綜述

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

1.1 AngularJS工作原理

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

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

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

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

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

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

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

根據(jù)前文提到的CARD信息可視化模型，數(shù)據(jù)可視化過程分為以下7個階段：獲取、分析、過濾、挖掘、表示、修飾、交互。這7個階段可以歸納為原始數(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ù)本身可隨時間變化的特點(diǎn)[7]。以基本信息類中的個人信息為例，將數(shù)據(jù)根據(jù)表述的主題進(jìn)行重新分析，再將每個小的主題組合成幾個較大類的主題。以此類推，可以將932條數(shù)據(jù)元定位到確定的位置。

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

2.2 AngularJS框架搭建

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

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

（1）通過ng-route實現(xiàn)路由轉(zhuǎn)換。Angular中的路由服務(wù)可以通過配置URL與templateURL指定該路徑對應(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上。每個控制器的作用域中都有一個MYMscope，這是一個JS對象，可以在該作用域下創(chuàng)建數(shù)據(jù)模型，進(jìn)行雙向數(shù)據(jù)綁定，也可以通過MYMhttpProvider服務(wù)從后臺獲取數(shù)據(jù)。

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

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

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

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

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 結(jié)語

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

參考文獻(xiàn)：

[1] 董英茹.簡談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è)計與實現(xiàn)[D].南京：南京大學(xué)，2014.

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

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

[6] 楊彥波，劉濱，祁明月.信息可視化研究綜述[J].河北科技大學(xué)學(xué)報，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模式的界面自動生成[J].計算機(jī)工程與設(shè)計，2007，28（19）：4793-4795.

（責(zé)任編輯：黃 健）endprint