周 航 馬 曾 賈瑞鳳

(海軍潛艇學(xué)院 青島 266199)

D3js庫(kù)在OA管理系統(tǒng)中狀態(tài)數(shù)據(jù)可視化的應(yīng)用*

周 航 馬 曾 賈瑞鳳

(海軍潛艇學(xué)院 青島 266199)

辦公自動(dòng)化(OA)系統(tǒng)旨在通過(guò)信息技術(shù),為使用者提供簡(jiǎn)潔、高效的任務(wù)布置與人員狀態(tài)管理平臺(tái)。但現(xiàn)有電子表格式的工作計(jì)劃表不易閱讀,管理者在時(shí)間軸上不易掌握工作的整體進(jìn)度。論文基于D3js庫(kù),應(yīng)用數(shù)據(jù)可視化方法,將工作計(jì)劃的時(shí)間和文本數(shù)據(jù)轉(zhuǎn)換為具有形狀和顏色屬性的圖形信息,并根據(jù)數(shù)據(jù)特征和管理需求提出了一種適于日歷型應(yīng)用的數(shù)據(jù)可視化布局模式。并設(shè)計(jì)了B/S模式與D3js庫(kù)相結(jié)合的OA系統(tǒng)結(jié)構(gòu),為管理者提供直觀、可交互的信息平臺(tái)。

數(shù)據(jù)可視化; 辦公自動(dòng)化; D3js庫(kù); B/S模式; 可縮放矢量繪圖

1 引言

辦公自動(dòng)化(Office Automatic,OA)技術(shù)對(duì)提高事務(wù)管理效率具有重要的意義。美國(guó)Microsoft公司的Office Outlook軟件和IBM公司的Lotus Note軟件[1]等平臺(tái),都具有日程管理、事務(wù)規(guī)劃等功能。但上述軟件突出了通過(guò)郵件系統(tǒng)協(xié)同各部門之間工作流的能力,而對(duì)非協(xié)作任務(wù)部署的易用性和可視化能力支持不足。數(shù)據(jù)可視化技術(shù)[2～3]是將數(shù)字和文本等信息進(jìn)行可視化處理,利用視覺(jué)對(duì)圖形、顏色的快速感知,為用戶提供更高效的信息獲取方式。當(dāng)前針對(duì)多種可視化工具進(jìn)行了研究,例如在.NET平臺(tái)使用的ILOG Diagrammer控件[3]可將圖形演示集成到.NET窗體中,能夠繪制甘特圖、流程圖等布局;而采用可縮放矢量圖形(Scalable Vector Graphics,SVG)庫(kù)在電力行業(yè)的應(yīng)用[4],實(shí)現(xiàn)了在Java平臺(tái)上對(duì)電網(wǎng)運(yùn)行數(shù)據(jù)的感知和交互。辦公局域網(wǎng)更適于實(shí)現(xiàn)B/S(Browser/Server,瀏覽器/服務(wù)器)模式的系統(tǒng)結(jié)構(gòu),文獻(xiàn)[5]設(shè)計(jì)了SVG與B/S結(jié)合的一種運(yùn)行監(jiān)控系統(tǒng)。但SVG復(fù)雜的語(yǔ)法對(duì)于OA系統(tǒng)開(kāi)發(fā)和復(fù)用成本較高,相關(guān)文獻(xiàn)對(duì)適合OA系統(tǒng)的數(shù)據(jù)布局方式也罕有研究。

數(shù)據(jù)驅(qū)動(dòng)文檔腳本(Data-Driven Documents JavaScript,D3js)庫(kù)[6～7]是一種依托Web瀏覽器的數(shù)據(jù)圖表繪制函數(shù)庫(kù),并已在消費(fèi)數(shù)據(jù)分析[8]、地理信息系統(tǒng)[9]等方面得到了應(yīng)用。其繪圖機(jī)制建立在SVG庫(kù)之上,具有無(wú)級(jí)縮放、可交互特性,語(yǔ)法上則更為簡(jiǎn)潔直觀,函數(shù)采用類似jQuery的連綴調(diào)用[10]形式。本文將B/S模式與D3js庫(kù)結(jié)合,提出了一種按照日期序列表示人員工作狀態(tài)的日歷型數(shù)據(jù)可視化布局模式,并設(shè)計(jì)了相應(yīng)的數(shù)據(jù)可視化方法。通過(guò)實(shí)例分析,說(shuō)明本方法使管理者可以直觀、高效地了解人員動(dòng)態(tài)。

2 基于B/S和D3js的總體框架

設(shè)計(jì)B/S結(jié)構(gòu)的OA辦公系統(tǒng)架構(gòu),將系統(tǒng)分為Web瀏覽器端和Http服務(wù)器端兩個(gè)部分,如圖1所示。兩者通過(guò)TCP/IP網(wǎng)絡(luò)連接,各處理模塊按照信息流相繼執(zhí)行,完成數(shù)據(jù)編輯、存儲(chǔ)和展示。

圖1 使用D3js腳本的B/S模式系統(tǒng)架構(gòu)

在服務(wù)器端,具有完成工作狀態(tài)數(shù)據(jù)的顯示邏輯模塊和編輯邏輯模塊,其數(shù)據(jù)從SQL數(shù)據(jù)庫(kù)的“人員表”和“任務(wù)表”中采集。其中,顯示邏輯根據(jù)預(yù)設(shè)或用戶新設(shè)的任務(wù)查詢時(shí)段,從任務(wù)表中獲取任務(wù)條目,并實(shí)現(xiàn)從任務(wù)條目到便于顯示的任務(wù)數(shù)據(jù)集的預(yù)處理。

在瀏覽器端,實(shí)現(xiàn)了對(duì)任務(wù)數(shù)據(jù)的查詢、編輯和可視化展示。將使用者角色分為兩類:用戶和管理員。對(duì)管理員角色賦予相應(yīng)的權(quán)限,可對(duì)數(shù)據(jù)進(jìn)行編輯修改。而用戶角色主要使用顯示頁(yè)面,通過(guò)設(shè)定查詢時(shí)段和圖形顏色查看人員狀態(tài)的可視化表示。

3 數(shù)據(jù)庫(kù)存儲(chǔ)模型與數(shù)據(jù)預(yù)處理

數(shù)據(jù)是可視化的對(duì)象。先定義影響可視化布局模式的任務(wù)數(shù)據(jù)含義,再通過(guò)特定的數(shù)據(jù)預(yù)處理方法得到便于在B/S架構(gòu)傳輸?shù)臄?shù)據(jù)區(qū)。

3.1 SQL數(shù)據(jù)表定義

SQL數(shù)據(jù)庫(kù)是一種關(guān)系型數(shù)據(jù)庫(kù),將系統(tǒng)需表示的數(shù)據(jù)劃分為數(shù)據(jù)表并建立表間關(guān)系。因此,分別定義了存儲(chǔ)人員信息的“人員表”和存儲(chǔ)人員任務(wù)信息的“任務(wù)表”。初始系統(tǒng)應(yīng)建立包含所有相關(guān)人員信息的“人員表”,此時(shí)“任務(wù)表”為空。隨著任務(wù)的分配,在任務(wù)表中添加相應(yīng)的記錄條目。任務(wù)表?xiàng)l目記錄了每人每項(xiàng)任務(wù)的信息,其字段定義如表1所示。

表1 SQL任務(wù)表的字段定義

按照上述字段的每個(gè)條目,包含了任務(wù)信息及執(zhí)行該任務(wù)的人員信息。任務(wù)信息主要包括任務(wù)的起止時(shí)間、任務(wù)級(jí)別和說(shuō)明信息。在定義起止時(shí)間時(shí),將一天分為5個(gè)時(shí)段:上下午各2時(shí)段及晚間1時(shí)段。而任務(wù)級(jí)別則表示該任務(wù)的緊迫或困難程度。

3.2 數(shù)據(jù)預(yù)處理及數(shù)據(jù)區(qū)定義

通過(guò)查詢SQL數(shù)據(jù)庫(kù)的任務(wù)表,得到的用于可視化的基礎(chǔ)數(shù)據(jù)為任務(wù)記錄條目的集合,并不適于直接圖形展現(xiàn),需對(duì)任務(wù)條目集進(jìn)行預(yù)處理。為提供用戶有關(guān)人員狀態(tài)的全面信息,設(shè)計(jì)了如下四類待展示數(shù)據(jù): 1) 姓名數(shù)組,獲取全部人員的姓名文本; 2) 日期數(shù)組,按照設(shè)定的區(qū)間計(jì)算得到日歷信息; 3) 狀態(tài)數(shù)組,與日歷數(shù)組對(duì)應(yīng),按每人每天5個(gè)時(shí)段構(gòu)建二維數(shù)組,記錄任務(wù)級(jí)別信息; 4) 說(shuō)明數(shù)組,與狀態(tài)數(shù)組對(duì)應(yīng)的每個(gè)時(shí)段相應(yīng)任務(wù)的說(shuō)明文本。狀態(tài)和說(shuō)明數(shù)組為二維數(shù)組,通過(guò)遍歷查詢?nèi)蝿?wù)表得到的條目集合,對(duì)數(shù)組中對(duì)應(yīng)位進(jìn)行賦值操作。

為了從服務(wù)器端向?yàn)g覽器端傳遞可視化基礎(chǔ)數(shù)據(jù),按照上述數(shù)組定義了四個(gè)hidden類型的input控件,并設(shè)定其運(yùn)行在服務(wù)器端。該控件的value屬性作為數(shù)據(jù)存儲(chǔ)空間,分別存放相應(yīng)的數(shù)組數(shù)據(jù)。定義方法如下:

〈div〉 〈%-- 提供給D3js的繪圖數(shù)據(jù) --%〉

〈input id="NameList" type="hidden" runat="server" /〉

……

〈/div〉

當(dāng)控件的runat屬性設(shè)定為server時(shí),服務(wù)器端代碼可對(duì)該控件進(jìn)行賦值。網(wǎng)頁(yè)端通過(guò)讀取控件的value屬性,實(shí)現(xiàn)可視化數(shù)據(jù)在服務(wù)器端與瀏覽器端的傳遞。

4 基于D3js的數(shù)據(jù)展示方法

瀏覽器端調(diào)用相應(yīng)的input控件獲取數(shù)據(jù)后,可通過(guò)設(shè)定的D3js腳本進(jìn)行圖形繪制。

4.1 瀏覽器端顯示區(qū)域設(shè)計(jì)

在Web頁(yè)面的布局中,一般使用基于〈div〉標(biāo)簽的頁(yè)面定位技術(shù)。在設(shè)計(jì)可視化的展示頁(yè)面時(shí),將頁(yè)面分為兩個(gè)部分,即參數(shù)設(shè)定區(qū)和數(shù)據(jù)繪圖區(qū)。在參數(shù)設(shè)定區(qū),通過(guò)〈div〉和〈table〉標(biāo)簽的組合使用定位了相應(yīng)的文本(Label)控件、按鈕(Bottom)控件、下拉列表(DropDownList)控件和顏色選擇控件,實(shí)現(xiàn)了繪圖的時(shí)段選擇和顏色選擇。其中顏色選擇控件結(jié)合了input控件和具有簡(jiǎn)潔界面的Simple-Color.js第三方腳本實(shí)現(xiàn)顏色的可視化選擇。在參數(shù)設(shè)定區(qū)下方,定義了用于包含D3js繪圖區(qū)的〈div〉標(biāo)簽,如圖2所示。

D3js繪圖區(qū)包括四個(gè)部分:縱向的姓名列表、橫向的日歷列表、狀態(tài)顯示區(qū)和隨鼠標(biāo)移動(dòng)的任務(wù)提示框。狀態(tài)顯示區(qū)使用一個(gè)具有特定顏色的矩形框,表示某人在對(duì)應(yīng)時(shí)段的工作狀態(tài)。如圖2中的示例,矩形的布局規(guī)則為:以五個(gè)具有黑色邊框的相鄰矩形表示工作日中的時(shí)段,以具有白色邊框的五個(gè)相鄰矩形表示休息日中的時(shí)段;一周中的相鄰天以較小空間隔開(kāi),而周之間有較大“周間隔”空間;每個(gè)矩形在橫向?qū)?yīng)一名人員,在縱向?qū)?yīng)一個(gè)時(shí)段。

圖2 Web頁(yè)面的數(shù)據(jù)顯示區(qū)域設(shè)計(jì)

當(dāng)鼠標(biāo)移動(dòng)到矩形內(nèi)部時(shí),頁(yè)面在鼠標(biāo)旁顯示一個(gè)提示框,內(nèi)有相應(yīng)的任務(wù)說(shuō)明文本。當(dāng)鼠標(biāo)移開(kāi)后,提示框消失。同時(shí),包括日期序列和狀態(tài)顯示區(qū)的區(qū)域具有可縮放特征,便于用戶在不同時(shí)間粒度全面了解任務(wù)分配的整體或局部情況。上述頁(yè)面提供了用戶具有互動(dòng)性、易于辨識(shí)的圖形化數(shù)據(jù)展示區(qū)。

4.2 數(shù)據(jù)展示方法設(shè)計(jì)

D3js庫(kù)是一種JavaScript腳本庫(kù),其運(yùn)行在瀏覽器端。因此,在可視化代碼的初始階段需從服務(wù)器端獲取待可視化數(shù)據(jù)。先讀取2.2節(jié)定義的input控件的value屬性,由于value屬性的字符串,對(duì)于二維數(shù)組在賦值前需轉(zhuǎn)換為一維數(shù)組,則上述代碼在讀取時(shí)通過(guò)分號(hào)截?cái)?還原為二維數(shù)組。如:

//數(shù)據(jù)1:姓名數(shù)組

var dataset = document.getElementById("Data_No1").value.split(";");

D3js基于文檔對(duì)象模型(Document Object Model,DOM)接口將數(shù)據(jù)與文檔元素綁定,通過(guò)編輯和繪制文檔以展示數(shù)據(jù)。其文檔即是超文本標(biāo)記語(yǔ)言(Hyper Text Markup Language,HTML)文檔,實(shí)現(xiàn)了數(shù)據(jù)與網(wǎng)頁(yè)元素的互操作。

按照?qǐng)D2的展示布局,使用D3js設(shè)計(jì)了顯示區(qū)的HTML文檔樹(shù)形結(jié)構(gòu),如圖3。首先,使用d3.select("#Div_ID")選擇繪圖區(qū)的〈div〉節(jié)點(diǎn),并通過(guò)append()函數(shù)添加SVG繪圖區(qū)。在〈svg〉節(jié)點(diǎn)下,分別創(chuàng)建不需縮放的用于顯示姓名列表的圖形集合〈g〉節(jié)點(diǎn)和可縮放區(qū)域的〈g〉節(jié)點(diǎn)。通過(guò)selectAll()函數(shù)分別創(chuàng)建空白圖形集,并綁定待可視化的數(shù)據(jù)數(shù)組。最后,使用append()函數(shù)在圖形集中添加與數(shù)組長(zhǎng)度對(duì)應(yīng)的圖形元素。另外,在頂層〈div〉節(jié)點(diǎn)下創(chuàng)建了用于顯示任務(wù)說(shuō)明的提示框〈div〉,并進(jìn)行了說(shuō)明數(shù)組。

圖3 基于DOM的D3js繪圖樹(shù)形結(jié)構(gòu)

實(shí)現(xiàn)了上述數(shù)據(jù)與圖形的綁定后,還需設(shè)定圖形元素的屬性實(shí)現(xiàn)圖形的布局,如字形字號(hào)、顏色、位置及大小等。根據(jù)人員狀態(tài)數(shù)據(jù)的特點(diǎn)和便于用戶理解的需求,設(shè)計(jì)了一種二維的具有顏色特征的矩形集合布局模式。在狀態(tài)顯示區(qū)中的矩形,其顏色對(duì)應(yīng)于狀態(tài)數(shù)組中的數(shù)據(jù)值。通過(guò)無(wú)名函數(shù)function(d)獲取矩形對(duì)應(yīng)的數(shù)據(jù)值d,并據(jù)此設(shè)置顏色。將顏色值賦予矩形的填充(fill)屬性。示例代碼如下:

.attr("fill", function (d) { //設(shè)置顏色

var mycolor = 0;

switch (d) {

case "0": //空閑

mycolor = green; break;

......

}

return mycolor;

})

在布局中,矩形的另一個(gè)關(guān)鍵屬性為位置坐標(biāo)。矩形的y坐標(biāo)易于確定,對(duì)應(yīng)同一人的一行矩形的y坐標(biāo)相同。而x坐標(biāo)按照布局模式,需考慮同一天內(nèi)、天與天間及周與周間等因素。使用無(wú)名函數(shù)function(d,i)獲取矩形對(duì)應(yīng)的數(shù)組序號(hào)i。示例代碼如下:

.attr("x", function (d, i) {//設(shè)置矩形的x坐標(biāo)

var myStep = parseInt(i / 5) * dayStep; //計(jì)算每天五個(gè)時(shí)段的間隔

myStep += parseInt((i + dofweek * 5) / 35) * dayStep * weekStep; //計(jì)算每周七天的間隔

return i * rectWidth + myStep;

})

代碼中,常量dayStep為天間隔,常量weekStep為周間隔,常量rectWidth為矩形寬度,變量dofweek為數(shù)組起始日的星期序號(hào)(星期一至日為0～6)。

4.3 人機(jī)交互方法設(shè)計(jì)

可交互的數(shù)據(jù)顯示區(qū)不僅可以進(jìn)行圖形的靜態(tài)展示,還能夠響應(yīng)用戶的動(dòng)作并進(jìn)行相應(yīng)的圖形變換。根據(jù)用戶讀取人員狀態(tài)時(shí)的需求,設(shè)計(jì)了狀態(tài)顯示區(qū)的橫向縮放和任務(wù)說(shuō)明的浮動(dòng)提示框兩類交互功能。D3js通過(guò)on()函數(shù)設(shè)定網(wǎng)頁(yè)元素的事件和處理函數(shù)。

為了實(shí)現(xiàn)狀態(tài)顯示區(qū)的縮放,先創(chuàng)建一個(gè)縮放行為:

var zoom = d3.behavior.zoom()//創(chuàng)建一個(gè)縮放行為

.scaleExtent([0.3, 3])//設(shè)置縮放的范圍

.on("zoom", function (d) {

d3.select(this).attr("transform",

"scale(" + d3.event.scale + " 1)"); //縮放僅x軸

});

縮放的尺度為0.3倍到3倍,縮放行為中定義了縮放(zoom)事件,其處理函數(shù)設(shè)定transform屬性為尺度變換(scale)。其中d3.event.scale的值為用戶交互時(shí),鼠標(biāo)滾輪指定的縮放值。將縮放行為與實(shí)現(xiàn)縮放的繪圖區(qū)綁定,即在相應(yīng)的〈g〉元素后調(diào)用call()函數(shù),實(shí)現(xiàn)縮放行為

var g = svg.append("g").call(zoom); //建立縮放畫(huà)布

對(duì)于提示框,先設(shè)定了其〈div〉的透明度(opacity)屬性的初始值為0,即不可見(jiàn)。之后,使用on()函數(shù)設(shè)定了兩個(gè)事件:鼠標(biāo)移入(mouseover)事件和鼠標(biāo)移出(mouseout)事件。在mouseover事件中,使用html()函數(shù)輸出對(duì)應(yīng)的任務(wù)說(shuō)明文本,并設(shè)定其opacity為1即可顯示提示框。在mouseout事件中,再將opacity屬性設(shè)為0,實(shí)現(xiàn)鼠標(biāo)移出矩形時(shí),提示框隱去。

5 實(shí)驗(yàn)案例

本系統(tǒng)設(shè)計(jì)為B/S模式,在服務(wù)器端的Windows平臺(tái)上安裝了互聯(lián)網(wǎng)信息服務(wù)(Internet Information Services,IIS)7.0組件用于發(fā)布網(wǎng)站。在瀏覽器端,因?yàn)镾VG僅支持IE9及以上瀏覽器,選擇Windows7與IE9軟件。開(kāi)發(fā)環(huán)境使用VS2010的C#、SQL2008與.NET 4.0平臺(tái)。

圖4 具有浮動(dòng)提示框的數(shù)據(jù)D3js展示區(qū)

圖5 時(shí)間尺度放大后的概覽圖

如圖4所示的部分界面,對(duì)具有13人的工作組在3.1到3.12的2周內(nèi)分配了相應(yīng)的任務(wù),根據(jù)任務(wù)級(jí)別的不同顯示不同的顏色。當(dāng)鼠標(biāo)指向一個(gè)色塊時(shí),顯示浮動(dòng)的當(dāng)前狀態(tài)提示框。在窗口的頂端為繪圖參數(shù)區(qū),有“時(shí)段選擇”和“顏色選擇”及控制按鈕。

通過(guò)鼠標(biāo)滾輪放大繪圖區(qū)的時(shí)間尺度,使每個(gè)矩形縮小顯示了3.1到3.19的3周內(nèi)的任務(wù)安排,便于使用者了解更長(zhǎng)時(shí)間段的任務(wù)分配情況,如圖5。通過(guò)上述數(shù)據(jù)的可視化展示和交互行為,為使用者提供了一個(gè)易于理解、可交互的顯示界面。

6 結(jié)語(yǔ)

針對(duì)文本、數(shù)值數(shù)據(jù)不便于使用者理解,造成信息系統(tǒng)使用效率不高的問(wèn)題,設(shè)計(jì)了一種B/S模式的基于D3js庫(kù)的數(shù)據(jù)可視化方法,該方法具有可交互的特性。并根據(jù)人員任務(wù)狀態(tài)數(shù)據(jù)的特點(diǎn),提出了一種適于日歷型數(shù)據(jù)的二維矩形排列的可視化布局模式。本系統(tǒng)中,通過(guò)隱藏的input控件在服務(wù)器與瀏覽器間傳遞數(shù)據(jù),利用D3js在網(wǎng)頁(yè)的〈svg〉節(jié)點(diǎn)下創(chuàng)建了可縮放的繪圖區(qū)〈g〉,并通過(guò)設(shè)定〈div〉的透明度opacity屬性實(shí)現(xiàn)了浮動(dòng)的文本提示框。通過(guò)實(shí)例說(shuō)明,本文為用戶提供了一種易于理解、可交互的顯示界面的設(shè)計(jì)方法。

[1] 劉紫玉,王巧玲,梁普選.基于B/S模式的機(jī)關(guān)辦公自動(dòng)化系統(tǒng)實(shí)現(xiàn)[J].計(jì)算機(jī)應(yīng)用研究,2004(12):218-220. LIU Ziyu, WANG Qiaoling, LIANG Puxuan. Achievement of One Organ Office Automation System Based on B/S Structure[J]. Application Research of Computers,2004(12):218-220.

[2] 張婉,王磊,譚昌勇.Windows環(huán)境下基于Qt的SEGY格式地震數(shù)據(jù)可視化[J].計(jì)算機(jī)與數(shù)字工程,2008,220(2):10-12. ZHANG Wan, WANG Lei, TANG Changyong. Visualization of Earthquake Data in SEGY Format Based on Qt of Windows System[J]. Computer & Digital Engineering,2008,220(2):10-12.

[3] 洪陸合,蔡建立,吳順祥.基于第三方控件的數(shù)據(jù)可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)工程與設(shè)計(jì),2010,31(13):3096-3099. HONG Luhe, CAI Jianli, WU Shunxiang. Design and Implementation of Data Visualization System Based on Third-Party Control[J]. Computer Engineering and Design,2010,31(13):3096-3099.

[4] 賴曉文,陳啟鑫,夏清,等.基于SVG技術(shù)的電力系統(tǒng)可視化平臺(tái)集成與方法庫(kù)開(kāi)發(fā)[J].電力系統(tǒng)自動(dòng)化,2012,36(16):76-81. LAI Xiaowen, CHEN Qixin, XIA Qing, et al. Development of Power System Visualization Platform and M ethods Library Based on SVG Technology[J]. Automation of Electric Power Systems,2012,36(16):76-81.

[5] 金豐,王瀛洲,焦嵩嗚.DCS監(jiān)控畫(huà)面的Web發(fā)布實(shí)現(xiàn)[J].計(jì)算機(jī)仿真,2013,30(6):296-299. JIN Feng, WANG Yingzhou, JIAO Songming. Realization Scheme of DCS Monitoring Web Technology[J]. Computer Simulation,2013,30(6):296-299.

[6] Bostock M, Ogievetsky V, HEER J. D3: Data-driven Documents[J]. IEEE Transactions on Visualization and Computer Graphics,2011,17(12):2301-2309.

[7] 呂之華.精通D3.js:交互式數(shù)據(jù)可視化高級(jí)編程[M].北京:電子工業(yè)出版社,2015:1-3,58. LV Zhihua. D3.js Mastery: Professional Interactive Data Visualization[M]. Beijing: Publishing House of Electronics Industry,2015:1-3,58.

[8] SHUICHI T, NOBORU N. Visualization-based medical expenditure analysis support system[C]//the 37th IEEE Engineering in Medicine and Biology Society(EMBC), Milan: IEEE,2015:1600-1603.

[9] 蔚元方,鄭秋生,李向東.基于D3的地圖信息可視化研究[J].中原工學(xué)院學(xué)報(bào),2015,26(4):59-64. YU Yuanfang, ZHENG Qiusheng, LI Xiangdong. Research on Map Information Visualization Based on D3[J]. Journal of Zhongyuan University of Technology,2015,26(4):59-64.

[10] 趙增敏,李惠敏.基于jQuery框架的Ajax應(yīng)用開(kāi)發(fā)[J].制造業(yè)自動(dòng)化,2012,34(10):18-20. ZHAO Zengmin, LI Huimin. Ajax Application Development Based on jQuery Framework[J]. Manufacturing Automation,2012,34(10):18-20.

Application of D3js in Data Visualization Method of Working Status in OA System

ZHOU Hang MA Zeng JIA Ruifeng

(Navy Submarine Academy, Qingdao 266199)

The office automatic (OA) system provides a simple and efficient management platform of staff and tasks using information technology. But the current list or table pattern of schedule is hard to read, and the manager is difficult to handle the entire progress of work. This paper converts the information of time and text of working schedule to graphs with shape and color properties using the data visualization method based on D3js library. According to data features and management demands, the layout of graph elements of data is proposed for the application with calendar data. The system framework combines the Browser/Server structure and D3js library, which provides an understandable and interactive information system.

data visualization, office automation, Data-Driven Documents JavaScript, Browser/Server pattern, scalable vector graphics Class Number TP311

2016年10月3日,

2016年11月24日

周航,男,博士,助教,研究方向:軟件工程。馬曾,女,碩士,講師,研究方向:系統(tǒng)仿真。賈瑞鳳,女,碩士,講師,研究方向:系統(tǒng)仿真。

TP311

10.3969/j.issn.1672-9722.2017.04.024