HTML5在工作量管理系統(tǒng)中的應(yīng)用

摘 要 工作量管理在高校管理工作中必不可少，本文主要介紹工作量圖表的跨平臺(tái)顯示，以便于用戶利用PC和智能客戶端進(jìn)行管理。具體實(shí)現(xiàn)采用基于HTML5的圖表組件—icharjs，此組件體積小，支持跨平臺(tái)，以此設(shè)計(jì)的系統(tǒng)是一種高效便捷的工作量管理系統(tǒng)。

【關(guān)鍵詞】工作量管理 圖表 跨平臺(tái)

1 高等學(xué)校工作量管理現(xiàn)狀及其成因分析

目前工作量管理現(xiàn)狀如下：在統(tǒng)計(jì)工作量時(shí)，雖然很多教師每年填寫(xiě)工作量表格，但是問(wèn)題層出不窮，效果依舊不理想；高校在年度聘后管理和職稱(chēng)評(píng)定時(shí)也需要教師近五年的工作量，教師每年都需要到學(xué)院辦公室查詢(xún)工作量。究其原因就是多數(shù)高校對(duì)于工作量的統(tǒng)計(jì)和查詢(xún)工作完全停留在全紙質(zhì)階段，管理及查詢(xún)十分不方便，與當(dāng)前的互聯(lián)網(wǎng)時(shí)代嚴(yán)重脫節(jié)。如何進(jìn)行行之有效的工作量管理是值得思考和解決的問(wèn)題。

2 構(gòu)建工作量管理方式的解決方案與方法

教師工作量管理工作是每個(gè)學(xué)校都需要完成的工作，據(jù)此設(shè)計(jì)的系統(tǒng)從宏觀角度來(lái)說(shuō)，總計(jì)用戶不在少數(shù)；從學(xué)校要求角度來(lái)看，教師需要通過(guò)系統(tǒng)來(lái)添加、修改和查詢(xún)工作量，分析以上需求，系統(tǒng)設(shè)計(jì)考慮跨平臺(tái)（Windows、IOS、Android）應(yīng)用，以適應(yīng)當(dāng)前PC聯(lián)網(wǎng)管理及智能客戶端管理的需求。通常解決方案是采用B/S模式，但有些插件并不能在多平臺(tái)通用。這些都是系統(tǒng)設(shè)計(jì)時(shí)要考慮的問(wèn)題。

下面就介紹一下解決上述問(wèn)題的解決技術(shù)與實(shí)現(xiàn)方法。

2.1 HTML5

計(jì)算機(jī)技術(shù)中能夠?qū)崿F(xiàn)網(wǎng)頁(yè)圖表的框架有很多，比如charts4j，它是基于Google Chart API的一個(gè)開(kāi)源輕量級(jí)框架， 不適合于國(guó)內(nèi)使用；ACharEngine也是一種制作圖表的框架，但其只是安卓系統(tǒng)上制作圖表的框架；相較于上述兩個(gè)框架， ichartjs是純JS實(shí)現(xiàn)的圖表式報(bào)表框架，是一款基于HTML5的輕量級(jí)圖形庫(kù)，致力于提供簡(jiǎn)單、直觀、可交互的體驗(yàn)級(jí)圖表組件，是WEB/APP圖表展示方面的解決方案。無(wú)論是Windows平臺(tái)，還是lOS或Android平臺(tái)，ichartjs都能在不改動(dòng)任何代碼的前提下提供統(tǒng)一的視圖。Icharjs可以實(shí)現(xiàn)多種圖，如餅圖、柱形圖、環(huán)形圖等，用戶可以根據(jù)需要來(lái)改其源碼從而實(shí)現(xiàn)自己所需要的功能。

2.2應(yīng)用icharjs實(shí)現(xiàn)2D柱形圖

在HTML5出現(xiàn)之前，為了在Browser（B）上顯示圖表，通常需要Server（S）端預(yù)先生成圖表。如果希望在服務(wù)器端動(dòng)態(tài)生成圖表，則需要通過(guò)其他的服務(wù)器組件來(lái)參與完成。 ichartjs 是一個(gè)利用html5 canvas 的一個(gè)圖表類(lèi)組件，編程風(fēng)格類(lèi)似ExtJs ，它可以在頁(yè)面上根據(jù)配置的數(shù)據(jù)動(dòng)態(tài)的生成需要的圖形。icharjs的環(huán)境構(gòu)建簡(jiǎn)單，只要將ichart.js加入html頁(yè)面的head標(biāo)簽中即可完成。

本文利用ichartjs以2D柱形圖為例表示工作量統(tǒng)計(jì)結(jié)果在PC及手機(jī)客戶端的設(shè)計(jì)方法與最終效果。在下面的例子中具體實(shí)現(xiàn)了某教師近五年工作量的圖表，首先定義一組準(zhǔn)備顯示的數(shù)據(jù)作為公共部分。本系統(tǒng)初期先將數(shù)據(jù)固定顯示，最終系統(tǒng)會(huì)通過(guò)webView的api來(lái)實(shí)現(xiàn)javascript調(diào)用動(dòng)態(tài)傳遞數(shù)據(jù)來(lái)更新圖表。無(wú)論是通過(guò)android聯(lián)網(wǎng)，還是是通過(guò)webservice獲取服務(wù)端的數(shù)據(jù)，只要數(shù)據(jù)打包成json格式即可，因?yàn)閕chartjs規(guī)定的數(shù)據(jù)源統(tǒng)一采用json對(duì)象方式。其次，定義繪制圖表的函數(shù)，即可將圖表顯示出來(lái)。此函數(shù)與Javascript中的onload事件類(lèi)似，在會(huì)頁(yè)面或圖像加載完成后立即發(fā)生。

在PC瀏覽器上的顯示效果如圖1所示。

在android模擬器端采用的運(yùn)行環(huán)境是myeclipse2014及google chrome，模擬結(jié)果為如圖2所示。

3 總結(jié)

本文根據(jù)高校教務(wù)管理部門(mén)及教師個(gè)人對(duì)于工作量管理的需求，提出采用基于HTML5的圖表組件ichartjs繪制工作量管理系統(tǒng)中的圖表，在理論上闡述了ichartjs的基本原理，通過(guò)實(shí)驗(yàn)，驗(yàn)證了本文方法能過(guò)完成工作量的跨平臺(tái)管理。由于ichartjs可以繪制多種圖表，也為工作量管理系統(tǒng)在日后的繼續(xù)完善和擴(kuò)展中提供了良好的基礎(chǔ)。

參考文獻(xiàn)

[1]唐彬.利用HTML5實(shí)現(xiàn)網(wǎng)頁(yè)圖表的研究[J].微型電腦應(yīng)用，2012（10）.

作者簡(jiǎn)介

王婷（1982-），女，吉林省白城市人。碩士研究生學(xué)歷。主要研究方向?yàn)閳D形圖像處理、計(jì)算機(jī)應(yīng)用。

作者單位

白城師范學(xué)院 吉林省白城市 137000endprint

摘 要 工作量管理在高校管理工作中必不可少，本文主要介紹工作量圖表的跨平臺(tái)顯示，以便于用戶利用PC和智能客戶端進(jìn)行管理。具體實(shí)現(xiàn)采用基于HTML5的圖表組件—icharjs，此組件體積小，支持跨平臺(tái)，以此設(shè)計(jì)的系統(tǒng)是一種高效便捷的工作量管理系統(tǒng)。

【關(guān)鍵詞】工作量管理 圖表 跨平臺(tái)

1 高等學(xué)校工作量管理現(xiàn)狀及其成因分析

目前工作量管理現(xiàn)狀如下：在統(tǒng)計(jì)工作量時(shí)，雖然很多教師每年填寫(xiě)工作量表格，但是問(wèn)題層出不窮，效果依舊不理想；高校在年度聘后管理和職稱(chēng)評(píng)定時(shí)也需要教師近五年的工作量，教師每年都需要到學(xué)院辦公室查詢(xún)工作量。究其原因就是多數(shù)高校對(duì)于工作量的統(tǒng)計(jì)和查詢(xún)工作完全停留在全紙質(zhì)階段，管理及查詢(xún)十分不方便，與當(dāng)前的互聯(lián)網(wǎng)時(shí)代嚴(yán)重脫節(jié)。如何進(jìn)行行之有效的工作量管理是值得思考和解決的問(wèn)題。

2 構(gòu)建工作量管理方式的解決方案與方法

教師工作量管理工作是每個(gè)學(xué)校都需要完成的工作，據(jù)此設(shè)計(jì)的系統(tǒng)從宏觀角度來(lái)說(shuō)，總計(jì)用戶不在少數(shù)；從學(xué)校要求角度來(lái)看，教師需要通過(guò)系統(tǒng)來(lái)添加、修改和查詢(xún)工作量，分析以上需求，系統(tǒng)設(shè)計(jì)考慮跨平臺(tái)（Windows、IOS、Android）應(yīng)用，以適應(yīng)當(dāng)前PC聯(lián)網(wǎng)管理及智能客戶端管理的需求。通常解決方案是采用B/S模式，但有些插件并不能在多平臺(tái)通用。這些都是系統(tǒng)設(shè)計(jì)時(shí)要考慮的問(wèn)題。

下面就介紹一下解決上述問(wèn)題的解決技術(shù)與實(shí)現(xiàn)方法。

2.1 HTML5

計(jì)算機(jī)技術(shù)中能夠?qū)崿F(xiàn)網(wǎng)頁(yè)圖表的框架有很多，比如charts4j，它是基于Google Chart API的一個(gè)開(kāi)源輕量級(jí)框架， 不適合于國(guó)內(nèi)使用；ACharEngine也是一種制作圖表的框架，但其只是安卓系統(tǒng)上制作圖表的框架；相較于上述兩個(gè)框架， ichartjs是純JS實(shí)現(xiàn)的圖表式報(bào)表框架，是一款基于HTML5的輕量級(jí)圖形庫(kù)，致力于提供簡(jiǎn)單、直觀、可交互的體驗(yàn)級(jí)圖表組件，是WEB/APP圖表展示方面的解決方案。無(wú)論是Windows平臺(tái)，還是lOS或Android平臺(tái)，ichartjs都能在不改動(dòng)任何代碼的前提下提供統(tǒng)一的視圖。Icharjs可以實(shí)現(xiàn)多種圖，如餅圖、柱形圖、環(huán)形圖等，用戶可以根據(jù)需要來(lái)改其源碼從而實(shí)現(xiàn)自己所需要的功能。

2.2應(yīng)用icharjs實(shí)現(xiàn)2D柱形圖

在HTML5出現(xiàn)之前，為了在Browser（B）上顯示圖表，通常需要Server（S）端預(yù)先生成圖表。如果希望在服務(wù)器端動(dòng)態(tài)生成圖表，則需要通過(guò)其他的服務(wù)器組件來(lái)參與完成。 ichartjs 是一個(gè)利用html5 canvas 的一個(gè)圖表類(lèi)組件，編程風(fēng)格類(lèi)似ExtJs ，它可以在頁(yè)面上根據(jù)配置的數(shù)據(jù)動(dòng)態(tài)的生成需要的圖形。icharjs的環(huán)境構(gòu)建簡(jiǎn)單，只要將ichart.js加入html頁(yè)面的head標(biāo)簽中即可完成。

本文利用ichartjs以2D柱形圖為例表示工作量統(tǒng)計(jì)結(jié)果在PC及手機(jī)客戶端的設(shè)計(jì)方法與最終效果。在下面的例子中具體實(shí)現(xiàn)了某教師近五年工作量的圖表，首先定義一組準(zhǔn)備顯示的數(shù)據(jù)作為公共部分。本系統(tǒng)初期先將數(shù)據(jù)固定顯示，最終系統(tǒng)會(huì)通過(guò)webView的api來(lái)實(shí)現(xiàn)javascript調(diào)用動(dòng)態(tài)傳遞數(shù)據(jù)來(lái)更新圖表。無(wú)論是通過(guò)android聯(lián)網(wǎng)，還是是通過(guò)webservice獲取服務(wù)端的數(shù)據(jù)，只要數(shù)據(jù)打包成json格式即可，因?yàn)閕chartjs規(guī)定的數(shù)據(jù)源統(tǒng)一采用json對(duì)象方式。其次，定義繪制圖表的函數(shù)，即可將圖表顯示出來(lái)。此函數(shù)與Javascript中的onload事件類(lèi)似，在會(huì)頁(yè)面或圖像加載完成后立即發(fā)生。

在PC瀏覽器上的顯示效果如圖1所示。

在android模擬器端采用的運(yùn)行環(huán)境是myeclipse2014及google chrome，模擬結(jié)果為如圖2所示。

3 總結(jié)

本文根據(jù)高校教務(wù)管理部門(mén)及教師個(gè)人對(duì)于工作量管理的需求，提出采用基于HTML5的圖表組件ichartjs繪制工作量管理系統(tǒng)中的圖表，在理論上闡述了ichartjs的基本原理，通過(guò)實(shí)驗(yàn)，驗(yàn)證了本文方法能過(guò)完成工作量的跨平臺(tái)管理。由于ichartjs可以繪制多種圖表，也為工作量管理系統(tǒng)在日后的繼續(xù)完善和擴(kuò)展中提供了良好的基礎(chǔ)。

參考文獻(xiàn)

[1]唐彬.利用HTML5實(shí)現(xiàn)網(wǎng)頁(yè)圖表的研究[J].微型電腦應(yīng)用，2012（10）.

作者簡(jiǎn)介

王婷（1982-），女，吉林省白城市人。碩士研究生學(xué)歷。主要研究方向?yàn)閳D形圖像處理、計(jì)算機(jī)應(yīng)用。

作者單位

白城師范學(xué)院 吉林省白城市 137000endprint

摘 要 工作量管理在高校管理工作中必不可少，本文主要介紹工作量圖表的跨平臺(tái)顯示，以便于用戶利用PC和智能客戶端進(jìn)行管理。具體實(shí)現(xiàn)采用基于HTML5的圖表組件—icharjs，此組件體積小，支持跨平臺(tái)，以此設(shè)計(jì)的系統(tǒng)是一種高效便捷的工作量管理系統(tǒng)。

【關(guān)鍵詞】工作量管理 圖表 跨平臺(tái)

1 高等學(xué)校工作量管理現(xiàn)狀及其成因分析

目前工作量管理現(xiàn)狀如下：在統(tǒng)計(jì)工作量時(shí)，雖然很多教師每年填寫(xiě)工作量表格，但是問(wèn)題層出不窮，效果依舊不理想；高校在年度聘后管理和職稱(chēng)評(píng)定時(shí)也需要教師近五年的工作量，教師每年都需要到學(xué)院辦公室查詢(xún)工作量。究其原因就是多數(shù)高校對(duì)于工作量的統(tǒng)計(jì)和查詢(xún)工作完全停留在全紙質(zhì)階段，管理及查詢(xún)十分不方便，與當(dāng)前的互聯(lián)網(wǎng)時(shí)代嚴(yán)重脫節(jié)。如何進(jìn)行行之有效的工作量管理是值得思考和解決的問(wèn)題。

2 構(gòu)建工作量管理方式的解決方案與方法

教師工作量管理工作是每個(gè)學(xué)校都需要完成的工作，據(jù)此設(shè)計(jì)的系統(tǒng)從宏觀角度來(lái)說(shuō)，總計(jì)用戶不在少數(shù)；從學(xué)校要求角度來(lái)看，教師需要通過(guò)系統(tǒng)來(lái)添加、修改和查詢(xún)工作量，分析以上需求，系統(tǒng)設(shè)計(jì)考慮跨平臺(tái)（Windows、IOS、Android）應(yīng)用，以適應(yīng)當(dāng)前PC聯(lián)網(wǎng)管理及智能客戶端管理的需求。通常解決方案是采用B/S模式，但有些插件并不能在多平臺(tái)通用。這些都是系統(tǒng)設(shè)計(jì)時(shí)要考慮的問(wèn)題。

下面就介紹一下解決上述問(wèn)題的解決技術(shù)與實(shí)現(xiàn)方法。

2.1 HTML5

計(jì)算機(jī)技術(shù)中能夠?qū)崿F(xiàn)網(wǎng)頁(yè)圖表的框架有很多，比如charts4j，它是基于Google Chart API的一個(gè)開(kāi)源輕量級(jí)框架， 不適合于國(guó)內(nèi)使用；ACharEngine也是一種制作圖表的框架，但其只是安卓系統(tǒng)上制作圖表的框架；相較于上述兩個(gè)框架， ichartjs是純JS實(shí)現(xiàn)的圖表式報(bào)表框架，是一款基于HTML5的輕量級(jí)圖形庫(kù)，致力于提供簡(jiǎn)單、直觀、可交互的體驗(yàn)級(jí)圖表組件，是WEB/APP圖表展示方面的解決方案。無(wú)論是Windows平臺(tái)，還是lOS或Android平臺(tái)，ichartjs都能在不改動(dòng)任何代碼的前提下提供統(tǒng)一的視圖。Icharjs可以實(shí)現(xiàn)多種圖，如餅圖、柱形圖、環(huán)形圖等，用戶可以根據(jù)需要來(lái)改其源碼從而實(shí)現(xiàn)自己所需要的功能。

2.2應(yīng)用icharjs實(shí)現(xiàn)2D柱形圖

在HTML5出現(xiàn)之前，為了在Browser（B）上顯示圖表，通常需要Server（S）端預(yù)先生成圖表。如果希望在服務(wù)器端動(dòng)態(tài)生成圖表，則需要通過(guò)其他的服務(wù)器組件來(lái)參與完成。 ichartjs 是一個(gè)利用html5 canvas 的一個(gè)圖表類(lèi)組件，編程風(fēng)格類(lèi)似ExtJs ，它可以在頁(yè)面上根據(jù)配置的數(shù)據(jù)動(dòng)態(tài)的生成需要的圖形。icharjs的環(huán)境構(gòu)建簡(jiǎn)單，只要將ichart.js加入html頁(yè)面的head標(biāo)簽中即可完成。

本文利用ichartjs以2D柱形圖為例表示工作量統(tǒng)計(jì)結(jié)果在PC及手機(jī)客戶端的設(shè)計(jì)方法與最終效果。在下面的例子中具體實(shí)現(xiàn)了某教師近五年工作量的圖表，首先定義一組準(zhǔn)備顯示的數(shù)據(jù)作為公共部分。本系統(tǒng)初期先將數(shù)據(jù)固定顯示，最終系統(tǒng)會(huì)通過(guò)webView的api來(lái)實(shí)現(xiàn)javascript調(diào)用動(dòng)態(tài)傳遞數(shù)據(jù)來(lái)更新圖表。無(wú)論是通過(guò)android聯(lián)網(wǎng)，還是是通過(guò)webservice獲取服務(wù)端的數(shù)據(jù)，只要數(shù)據(jù)打包成json格式即可，因?yàn)閕chartjs規(guī)定的數(shù)據(jù)源統(tǒng)一采用json對(duì)象方式。其次，定義繪制圖表的函數(shù)，即可將圖表顯示出來(lái)。此函數(shù)與Javascript中的onload事件類(lèi)似，在會(huì)頁(yè)面或圖像加載完成后立即發(fā)生。

在PC瀏覽器上的顯示效果如圖1所示。

在android模擬器端采用的運(yùn)行環(huán)境是myeclipse2014及google chrome，模擬結(jié)果為如圖2所示。

3 總結(jié)

本文根據(jù)高校教務(wù)管理部門(mén)及教師個(gè)人對(duì)于工作量管理的需求，提出采用基于HTML5的圖表組件ichartjs繪制工作量管理系統(tǒng)中的圖表，在理論上闡述了ichartjs的基本原理，通過(guò)實(shí)驗(yàn)，驗(yàn)證了本文方法能過(guò)完成工作量的跨平臺(tái)管理。由于ichartjs可以繪制多種圖表，也為工作量管理系統(tǒng)在日后的繼續(xù)完善和擴(kuò)展中提供了良好的基礎(chǔ)。

參考文獻(xiàn)

[1]唐彬.利用HTML5實(shí)現(xiàn)網(wǎng)頁(yè)圖表的研究[J].微型電腦應(yīng)用，2012（10）.

作者簡(jiǎn)介

王婷（1982-），女，吉林省白城市人。碩士研究生學(xué)歷。主要研究方向?yàn)閳D形圖像處理、計(jì)算機(jī)應(yīng)用。

作者單位

白城師范學(xué)院 吉林省白城市 137000endprint