基于AngularJS的健康大數據用戶接口設計與實現

李曉琳　王勇

摘 要：健康大數據具有數據量大、連續性強等特點，如果仍然采用傳統方式開發健康大數據平臺的用戶接口，會導致代碼冗余、開發周期長等問題。根據CARD信息可視化模型，以及面向主題的原則，對《WS365-2011城鄉居民健康檔案基本數據集》進行數據可視化分析?；贏ngularJS框架，以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]?！禬S365-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張表格，從用戶基本信息、健康體檢、疾病控制、疾病管理、兒童保健、婦女保健以及醫療服務幾大類規定了健康相關數據?！缎l生信息數據元值域代碼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.

（責任編輯：黃 ?。〆ndprint