一種基于插件的動態(tài)圖表加載方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及計(jì)算機(jī)領(lǐng)域中的數(shù)據(jù)可視化技術(shù)領(lǐng)域，具體地說是一種基于插件的動態(tài)圖表加載方法。
【背景技術(shù)】
[0002]數(shù)據(jù)可視化，是關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究。是將大型數(shù)據(jù)集中的數(shù)據(jù)以圖形圖像形式表示，并利用數(shù)據(jù)分析和開發(fā)工具發(fā)現(xiàn)其中未知信息的處理過程。它是一個處于不斷演變之中的概念，其邊界在不斷地擴(kuò)大。主要指的是技術(shù)上較為高級的技術(shù)方法，而這些技術(shù)方法允許利用圖形、圖像處理、計(jì)算機(jī)視覺以及用戶界面，通過表達(dá)、建模以及對立體、表面、屬性以及動畫的顯示，對數(shù)據(jù)加以可視化解釋。與立體建模之類的特殊技術(shù)方法相比，數(shù)據(jù)可視化所涵蓋的技術(shù)方法要廣泛得多。數(shù)據(jù)可視化作為計(jì)算機(jī)領(lǐng)域的一種重要技術(shù)越來越受到人們的關(guān)注?？梢暬瘓D表怎樣進(jìn)行友好的數(shù)據(jù)展示、怎樣進(jìn)行動態(tài)的數(shù)據(jù)加載就顯得越來越重要。
【發(fā)明內(nèi)容】
[0003]本發(fā)明的技術(shù)任務(wù)是提供一種基于插件的動態(tài)圖表加載方法。
[0004]本發(fā)明的技術(shù)任務(wù)是按以下方式實(shí)現(xiàn)的，該基于插件的動態(tài)圖表加載方法是:在日期控件中修改代碼使日期改變后能被監(jiān)測到，并且能把日期數(shù)據(jù)傳到后臺中；在后臺中對日期數(shù)據(jù)進(jìn)行處理，把日期數(shù)據(jù)轉(zhuǎn)換成時間戳，然后以此為條件查詢體檢數(shù)據(jù)庫，把查詢出的數(shù)據(jù)轉(zhuǎn)換成圖表能夠識別的數(shù)據(jù)返回前臺，最終在可視化圖表中顯示出來。
[0005]該基于插件的動態(tài)圖表加載方法步驟如下:
步驟I)通過daterangepicker插件選擇日期，在日期插件代碼中編寫onChange O函數(shù)，onChange ()中調(diào)用 putData()函數(shù)；
步驟2)日期改變后，觸發(fā)該函數(shù)然后把日期傳輸?shù)胶笈_中去；
步驟3)傳輸?shù)胶笈_的日期保存到sess1n中，并通過此日期來查詢體檢數(shù)據(jù)庫；
步驟4)把符合條件的數(shù)據(jù)保存到List中，并把保存的數(shù)據(jù)轉(zhuǎn)換成json數(shù)據(jù)；
步驟5)轉(zhuǎn)換成json的體檢數(shù)據(jù)通過ajax技術(shù)傳到前臺putDataO函數(shù)中；
步驟6)最后把符合選擇日期的數(shù)據(jù)通過函數(shù)展現(xiàn)到圖表中去以實(shí)現(xiàn)圖表的動態(tài)刷新；
步驟7)當(dāng)點(diǎn)擊其它頁面時，后臺會自動獲取保存到sess1n中的日期數(shù)據(jù)，然后重復(fù)上述步驟3)-步驟6)，把數(shù)據(jù)展示到可視化圖表中。
[0006]所述的步驟2)中日期通過ajax技術(shù)傳輸?shù)胶笈_中去。
[0007]本發(fā)明的一種基于插件的動態(tài)圖表加載方法和現(xiàn)有技術(shù)相比，具有設(shè)計(jì)合理、使用方便的特點(diǎn)，該方法將數(shù)據(jù)實(shí)現(xiàn)可視化圖表的展示，并能進(jìn)行動態(tài)的數(shù)據(jù)加載。
【附圖說明】
[0008]附圖1為一種基于插件的動態(tài)圖表加載方法的流程框圖。
【具體實(shí)施方式】
[0009]實(shí)施例1:
該基于插件的動態(tài)圖表加載方法是:在日期控件中修改代碼使日期改變后能被監(jiān)測至IJ，并且能把日期數(shù)據(jù)傳到后臺中；在后臺中對日期數(shù)據(jù)進(jìn)行處理，把日期數(shù)據(jù)轉(zhuǎn)換成時間戳，然后以此為條件查詢體檢數(shù)據(jù)庫，把查詢出的數(shù)據(jù)轉(zhuǎn)換成圖表能夠識別的數(shù)據(jù)返回前臺，最終在可視化圖表中顯示出來。
[0010]該基于插件的動態(tài)圖表加載方法步驟如下:
步驟I)通過daterangepicker插件選擇日期，在日期插件代碼中編寫onChange O函數(shù)，onChange ()中調(diào)用 putDataO 函數(shù)；onChange: funct1n O {putDataO ；putDatalO ;
}
步驟2)日期改變后，觸發(fā)該函數(shù)然后把日期通過ajax技術(shù)傳輸?shù)胶笈_中去； data:{weightDate: $(〃#datelnterval〃).val()}
步驟3)傳輸?shù)胶笈_的日期保存到sess1n中，并通過此日期來查詢體檢數(shù)據(jù)庫； request.getSess1n0.setAttribute (〃dl〃，weightD[0]) request.getSess1n().setAttribute(〃d2〃，weightD[I])
String sql = "select * from health where addtime>=〃+timeStempl+〃 andaddtime〈〃+timeStemp2+〃 and uid=〃+uid
步驟4)把符合條件的數(shù)據(jù)保存到List中，并把保存的數(shù)據(jù)轉(zhuǎn)換成json數(shù)據(jù)；
String result = gson.tojson(resultList)
步驟5)轉(zhuǎn)換成json的體檢數(shù)據(jù)通過ajax技術(shù)傳到前臺putDataO函數(shù)中； success: funct1n(data){
Il定義一個數(shù)組
categories =[]; dl =[]， d2 =[]， d3 =[]，
//迭代，把異步獲取的數(shù)據(jù)放到數(shù)組中 $.each (data, funct1n(n, item){ categories, push(item, categories); dl.push (item, datal); d2.push (item.data2); d3.push (item.data3);
I)；
Il設(shè)置數(shù)據(jù) chart, series[0].setData(dl);
chart.xAxis[0].setCategories(categories);
for (var n=0;n<=dl.length;n++){
chart, series[0].data[n].extral=d2[n];chart, series[0].data[n].extra2=d3[n];
}
}，
步驟6)最后把符合選擇日期的數(shù)據(jù)通過函數(shù)展現(xiàn)到圖表中去以實(shí)現(xiàn)圖表的動態(tài)刷新；
步驟7)當(dāng)點(diǎn)擊其它頁面時，后臺會自動獲取保存到sess1n中的日期數(shù)據(jù)，然后重復(fù)上述步驟3)-步驟6)，把數(shù)據(jù)展示到可視化圖表中。
[0011]通過上面【具體實(shí)施方式】，所述技術(shù)領(lǐng)域的技術(shù)人員可容易的實(shí)現(xiàn)本發(fā)明。但是應(yīng)當(dāng)理解，本發(fā)明并不限于上述的幾種【具體實(shí)施方式】。在公開的實(shí)施方式的基礎(chǔ)上，所述技術(shù)領(lǐng)域的技術(shù)人員可任意組合不同的技術(shù)特征，從而實(shí)現(xiàn)不同的技術(shù)方案。
【主權(quán)項(xiàng)】
1.一種基于插件的動態(tài)圖表加載方法，其特征在于，該方法是:在日期控件中修改代碼使日期改變后能被監(jiān)測到，并且能把日期數(shù)據(jù)傳到后臺中；在后臺中對日期數(shù)據(jù)進(jìn)行處理，把日期數(shù)據(jù)轉(zhuǎn)換成時間戳，然后以此為條件查詢體檢數(shù)據(jù)庫，把查詢出的數(shù)據(jù)轉(zhuǎn)換成圖表能夠識別的數(shù)據(jù)返回前臺，最終在可視化圖表中顯示出來。2.根據(jù)權(quán)利要求1所述的一種基于插件的動態(tài)圖表加載方法，其特征在于，該基于插件的動態(tài)圖表加載方法步驟如下: 步驟I)通過daterangepicker插件選擇日期，在日期插件代碼中編寫onChange O函數(shù)，onChange ()中調(diào)用 putData()函數(shù)； 步驟2)日期改變后，觸發(fā)該函數(shù)然后把日期傳輸?shù)胶笈_中去； 步驟3)傳輸?shù)胶笈_的日期保存到sess1n中，并通過此日期來查詢體檢數(shù)據(jù)庫； 步驟4)把符合條件的數(shù)據(jù)保存到List中，并把保存的數(shù)據(jù)轉(zhuǎn)換成json數(shù)據(jù)； 步驟5)轉(zhuǎn)換成json的體檢數(shù)據(jù)通過ajax技術(shù)傳到前臺putDataO函數(shù)中； 步驟6)最后把符合選擇日期的數(shù)據(jù)通過函數(shù)展現(xiàn)到圖表中去以實(shí)現(xiàn)圖表的動態(tài)刷新； 步驟7)當(dāng)點(diǎn)擊其它頁面時，后臺會自動獲取保存到sess1n中的日期數(shù)據(jù)，然后重復(fù)上述步驟3)-步驟6)，把數(shù)據(jù)展示到可視化圖表中。3.根據(jù)權(quán)利要求1所述的一種基于插件的動態(tài)圖表加載方法，其特征在于，所述的步驟2)中日期通過ajax技術(shù)傳輸?shù)胶笈_中去。
【專利摘要】本發(fā)明公開了一種基于插件的動態(tài)圖表加載方法，該方法是：在日期控件中修改代碼使日期改變后能被監(jiān)測到，并且能把日期數(shù)據(jù)傳到后臺中；在后臺中對日期數(shù)據(jù)進(jìn)行處理，把日期數(shù)據(jù)轉(zhuǎn)換成時間戳，然后以此為條件查詢體檢數(shù)據(jù)庫，把查詢出的數(shù)據(jù)轉(zhuǎn)換成圖表能夠識別的數(shù)據(jù)返回前臺，最終在可視化圖表中顯示出來。本發(fā)明的一種基于插件的動態(tài)圖表加載方法和現(xiàn)有技術(shù)相比，具有設(shè)計(jì)合理、使用方便的特點(diǎn)，該方法將可視化圖表實(shí)現(xiàn)友好的數(shù)據(jù)展示，并能進(jìn)行動態(tài)的數(shù)據(jù)加載。
【IPC分類】G06F9/445
【公開號】CN105094928
【申請?zhí)枴緾N201510558442
【發(fā)明人】陳洪鑫, 鄭亮, 于治樓
【申請人】浪潮集團(tuán)有限公司
【公開日】2015年11月25日
【申請日】2015年9月6日