專利名稱：一種系統(tǒng)性能數(shù)據(jù)的處理方法和設備的制作方法
技術領域：
本發(fā)明涉及計算機領域，具體涉及一種系統(tǒng)性能數(shù)據(jù)的處理方法和設備。
背景技術：
在現(xiàn)有的B/S架構(gòu)中，客戶端查看系統(tǒng)性能數(shù)據(jù)大多采用兩種形式一種是客戶端從服務器端獲取性能數(shù)據(jù)，并在客戶端保留一定時間范圍內(nèi)的性能 數(shù)據(jù)(如CPU利用率)；用戶只能以數(shù)值的形式查看總體性能信息，無法和前一個時間點的 性能值做比較，這給用戶查看系統(tǒng)性能情況帶來了極大的不方便。如果客戶端采用flex技 術，可異步從服務器端獲取性能數(shù)據(jù)，并利用這些信息，在客戶端使用flex提供的圖形繪 制接口繪制圖形，但由于開發(fā)較為復雜且兼容性等問題，不容易進行推廣。第二種方式是在服務端形成性能曲線圖形，并保存為文件，如gif，jpeg等格式。 客戶端定時異步請求這個文件，用以模擬動態(tài)的性能曲線。但是，在網(wǎng)絡速度有限的情況 下，會出現(xiàn)失真的現(xiàn)象，不能動態(tài)的用圖形曲線描述系統(tǒng)性能的曲線圖采用性能曲線描述， 在頁面上動態(tài)直觀反映系統(tǒng)性能信息，給用戶帶來直觀的視覺效果。
發(fā)明內(nèi)容
本發(fā)明要解決的技術問題是提供一種系統(tǒng)性能數(shù)據(jù)的處理方法和設備，能動態(tài)、 直觀地反映系統(tǒng)性能情況。為了解決上述問題，本發(fā)明提供了一種系統(tǒng)性能數(shù)據(jù)的處理方法，包括添加坐標軸背景圖，通過層疊樣式表ess的屬性值設置該背景圖中坐標軸及坐標 點的參數(shù)；從服務器獲取不同時間點的系統(tǒng)性能數(shù)值；分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點，以該時間點的時間值作為該 坐標點div元素的橫坐標，該系統(tǒng)性能數(shù)值作為該坐標點div元素的縱坐標；瀏覽器在所述坐標軸背景圖上顯示各坐標點。優(yōu)選地，所述通過CSS的屬性值設置該背景圖中坐標軸及坐標點的參數(shù)的步驟中 還包括通過CSS的屬性值設置各相鄰的兩個坐標點之間的連接線的div參數(shù)值；所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟中還包括瀏覽器在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。優(yōu)選地，所述分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點的步驟后，瀏覽 器顯示所述坐標系及各坐標點的步驟前還包括在每兩個相鄰的坐標點之間新增多個坐標點，通過Bezier算法計算出新增的多 個坐標點各自的div參數(shù)值；所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟中還包括瀏覽器在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。
優(yōu)選地，所述從服務器獲取不同時間點的系統(tǒng)性能數(shù)值的步驟后還包括使用數(shù)組或隊列的形式保存所獲取的系統(tǒng)性能數(shù)值，及獲取該系統(tǒng)性能數(shù)值的時 間點的時間值。優(yōu)選地，所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟包括按照橫坐標從小往大的順序，對各坐標點進行分組，將橫坐標上相鄰的若干個坐 標點劃分為一組；定期刷新；所述瀏覽器每次刷新后在所述坐標軸背景圖上顯示一組坐標點，按照橫坐標從小 往大的順序依次顯示每一組的坐標點。本發(fā)明還提供了一種系統(tǒng)性能數(shù)據(jù)的處理設備，包括初始化模塊，用于添加坐標軸背景圖，通過層疊樣式表ess的屬性值設置該背景 圖中坐標軸及坐標點的參數(shù)；獲取模塊，用于從服務器獲取不同時間點的系統(tǒng)性能數(shù)值；設置模塊，用于分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點，以該時間點 的時間值作為該坐標點div元素的橫坐標，該系統(tǒng)性能數(shù)值作為該坐標點div元素的縱坐 標；瀏覽器，用于在所述坐標軸背景圖上顯示各坐標點。優(yōu)選地，所述初始化模塊還用于通過ess的屬性值設置各相鄰的兩個坐標點之間 的連接線的div參數(shù)值；所述瀏覽器還用于在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。優(yōu)選地，所述的設備還包括擬合模塊，用于在每兩個相鄰的坐標點之間新增多個坐標點，通過Bezier算法計 算出新增的多個坐標點各自的div參數(shù)值；所述瀏覽器還用于在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。優(yōu)選地，所述的設備還包括存儲模塊，用于使用數(shù)組或隊列的形式保存所獲取的系統(tǒng)性能數(shù)值，及獲取該系 統(tǒng)性能數(shù)值的時間點的時間值。優(yōu)選地，所述瀏覽器包括分組單元，用于按照橫坐標從小往大的順序，對各坐標點進行分組，將橫坐標上相 鄰的若干個坐標點劃分為一組；刷新單元，用于定期刷新；顯示單元，用于每次刷新后在所述坐標軸背景圖上顯示一組坐標點，按照橫坐標 從小往大的順序依次顯示每一組的坐標點。本發(fā)明的技術方案可以及時正確的顯示系統(tǒng)性能變化，符合w3c標準，可兼容所 有的主流web瀏覽器；本發(fā)明的優(yōu)化方案可以通過獲取每一時間點的性能值和前一段時間 的時間點的性能值共同繪制出性能曲線；本發(fā)明的又一優(yōu)化方案按時間分組進行顯示，能 夠?qū)崿F(xiàn)動態(tài)刷新。
圖1是實施例一的例子的流程示意圖；圖2是實施例一的例子中的坐標軸背景圖；圖3是實施例一的例子中生成坐標點后的示意圖；圖4是實施例一的例子中生成連接線后的示意圖；圖5是實施例一的例子中生成曲線初樣圖后的示意圖；圖6是實施例一的例子中生成整體光滑曲線后的示意圖。
具體實施例方式下面將結(jié)合附圖及實施例對本發(fā)明的技術方案進行更詳細的說明。需要說明的是，如果不沖突，本發(fā)明實施例以及實施例中的各個特征可以相互結(jié) 合，均在本發(fā)明的保護范圍之內(nèi)。另外，在附圖的流程圖示出的步驟可以在諸如一組計算機 可執(zhí)行指令的計算機系統(tǒng)中執(zhí)行，并且，雖然在流程圖中示出了邏輯順序，但是在某些情況 下，可以以不同于此處的順序執(zhí)行所示出或描述的步驟。實施例一，一種系統(tǒng)性能數(shù)據(jù)的處理方法，包括添加坐標軸背景圖，通過層疊樣式表ess的屬性值設置該背景圖中坐標軸及坐標 點的參數(shù)；從服務器獲取不同時間點的系統(tǒng)性能數(shù)值；分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點，以該時間點的時間值作為該 坐標點div元素的橫坐標，該系統(tǒng)性能數(shù)值作為該坐標點div元素的縱坐標；瀏覽器在所述坐標軸背景圖上顯示各坐標點。其中，獲取系統(tǒng)性能數(shù)值的步驟和添加坐標軸背景圖，設置該背景圖中坐標軸及 坐標點的參數(shù)的步驟順序不限，可以并行。所述通過ess創(chuàng)建坐標系的方案完全不同于C/S架構(gòu)的坐標系轉(zhuǎn)換方法以及flex 架構(gòu)的坐標系轉(zhuǎn)換方法。C/S架構(gòu)是將坐標系統(tǒng)的坐標進行一系列的映射，先映射到窗口工 作區(qū)的坐標，再映射到窗口的坐標系，最終映射為顯示器的坐標系統(tǒng)(原點左上角，X右向 為正，y軸下向為正)。flex采用的方式基本類似。本實施例中，坐標系的坐標只需要映射 成div元素position屬性的坐標值即可，不需要上述如此復雜的多層坐標系統(tǒng)映射。本實施例控制ess以實現(xiàn)每個點的樣式，同時控制div的坐標值，以確定每個點的 位置，從而可以在B/S架構(gòu)的系統(tǒng)中正確顯示不同時間點的系統(tǒng)性能數(shù)值，直觀方便。本實施例中，通過ess的屬性值所設置的坐標軸和坐標點的參數(shù)具體可以但不限 于包括以下參數(shù)中的任一種及其任意組合坐標點顏色、坐標點寬度、坐標點高度、χ軸值寬度，χ軸值大小、y軸值寬度、y軸 值大小、連接線顏色、連接線寬度等。本實施例中，所述通過ess的屬性值設置該背景圖中坐標軸及坐標點的參數(shù)的步 驟中還可以包括通過CSS的屬性值設置各相鄰的兩個坐標點之間的連接線的div參數(shù)值；所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟中還可以包括瀏覽器在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。
6
本實施例中，所述分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點的步驟后， 瀏覽器顯示所述坐標系及各坐標點的步驟前還可以包括在每兩個相鄰的坐標點之間新增多個坐標點，通過Bezier算法計算出新增的多 個坐標點各自的div參數(shù)值；所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟中還可以包括瀏覽器在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。 需要注意的是，瀏覽器顯示的各坐標點也包括新增的坐標點。
上述步驟里，增加坐標點后，相當于用大量短距離直線連接兩個根據(jù)系統(tǒng)性能數(shù) 值創(chuàng)建的坐標點，可生成接近平滑曲線圖形，逼近真實性能變化曲線，正確體現(xiàn)性能變化情 況；通過對坐標點和連接線的參數(shù)設置，完成對曲線樣式的設置。本實施例中，可以同步、也可以異步從服務器獲取不同時間點的系統(tǒng)性能數(shù)值。本實施例中，所述從服務器獲取不同時間點的系統(tǒng)性能數(shù)值的步驟后還可以包括使用數(shù)組或隊列的形式保存所獲取的系統(tǒng)性能數(shù)值，及獲取該系統(tǒng)性能數(shù)值的時 間點的時間值。本實施例中，所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟具體可以包 括按照橫坐標從小往大的順序，對各坐標點進行分組，將橫坐標上相鄰的若干個坐 標點劃分為一組；定期刷新；所述瀏覽器每次刷新后在所述坐標軸背景圖上顯示一組坐標點，按照橫坐標從小 往大的順序依次顯示每一組的坐標點。 下面用-
-個具體的例子進行說明；該例子如圖1所示，包括以下步驟
息數(shù)組，如下a、通過遠程異步通信方式獲取到系統(tǒng)在不同時間點的性能信,
Array (
[1=> array (^value=> 20，，time=> 101)，
[2=> array (^value=> 43，，time=> 102)，
[3=> array (^value=> 22，，time=> 103)，
[4=> array (^value=> 3，，time*=> 104)，
[5=> array (^value=> 13，，time=> 105)，
[6=> array (^value=> 46，，time=> 106)，
[7=> array (^value=> 11，，time=> 107)，
[8=> array (^value=> 18，，time=> 108)，
[9]=> array (value*=> 29，，time*=> 109)，
[10=> array (^value=> 37，'time=> 110)，
[11=> array (^value=> 16，'time=> 111)，
[12=> array (^value=>5，，time*=> 112)，
[13=> array (^value=> 17，'time=> 113)，
[14=> array (^value=> 31，'time=> 114)，
[15=> array (^value=> 33，，time=> 115)，
[16] = > array( 'value'=> 44，time，=> 116)，
[17] = > array( 'value'=> 39，time，=> 117)，
[18] = > array( 'value'=> 14，time，=> 118)，
[19] = > array( 'value'=> 28，time，=> 119)，
[20] = > array( 'value'=> 43，time，=> 120))
b、添加坐標軸背景圖，如圖2所示；
c、設置參數(shù)，定義options，詳細內(nèi)容如下
direction:0,/,/同步獲取信息時，頁面曲線動態(tài)方向
height:180，Il/繪圖區(qū)域高度
width:600,Il/繪圖區(qū)域?qū)挾?br>
maxHeight50,Il/y軸最高數(shù)值
min Height0,Il/y軸最低數(shù)值
barDistance26,Il/χ軸坐標間距
topDistance0,Il/上部填充
bottomDistance0,Il/底部填充
IeftDistance20,Il丨左部填充
pointffidth:7,Il/坐標點寬度
pointHeight7,Il丨坐標點高度
pointColor:“ #ff0000"，//坐標點顏色
IineColor:“ #ffd43a"，//連接線顏色
valueffidth:20,Il/y軸數(shù)值寬度
valueColor:“ #000"，//y軸數(shù)值顏色
timeffidth:20,Il/χ軸數(shù)值寬度
timeColor:“ #000"，//χ軸數(shù)值顏色
disvaluetrue,Il丨是否顯示y軸數(shù)值
distimetrue,Il丨是否顯示χ軸數(shù)值
bezierNum:3///進行bezier算法次數(shù)
d、根據(jù)a中獲取值和c中設置參數(shù)，生成坐標點div信息，x，y軸span信息
坐標點寬，坐標點高等，生成信息如下，界面上顯示見圖3 ；<div style = “ background-colorrgb (51,102,255) ；font-sizeOpx ； position:absolute ；z_index:999 ； wi dth7px ；height:7px ； top113. 16px ； left:20px ； “ X/div>//坐標點<span style = “ positionabsolute ；width:20px ；text-align:center ； colorrgb(0，0，0) ;z-index:999 ；left:14px ;top:99. 16px ； “ >13</span> //y 軸<span style = " position:absolute ；width:20px ；text-align:center ； color:rgb(0,0,0) ;left:14px ;top:155px ; 〃 >100</span> "x軸e、根據(jù)步驟a中獲取值和步驟c中設置參數(shù)，生成連接線信息如下，界面上顯示見 圖4;<div style = “ position!absolute ；background-colorrgb(51,255,255)；font-sizeOpt ；width:Ipx ；heightIpx ；top58. 5px ；left:77. 2581px ； “ ></div>建立了多個坐標點及其連接線后的顯示圖形如圖5所示。該例子中進行本步驟是為了展示生成新坐標點前的顯示圖形，實際應用時可以就 到本步驟或步驟d為止；也可以不進行本步驟，直接進行步驟f。f、根據(jù)Bezier算法，可以通過已知的坐標點x，y值計算的到新坐標點的x，y值， 進而生成逼近曲線的多個新坐標點；g、根據(jù)最新點坐標值，計算最新連接線信息，生成光滑曲線，形成圖形如圖6，定時 刷新，形成動態(tài)效果圖形；本例子中，可將時間值細分成間隔多組(如六1、4233、44......)，每次刷新只顯
示一組，順序顯示各組，能形成很明顯的動態(tài)效果。實施例二，一種系統(tǒng)性能數(shù)據(jù)的處理設備，包括初始化模塊，用于添加坐標軸背景圖，通過ess的屬性值設置該背景圖中坐標軸 及坐標點的參數(shù)；獲取模塊，用于從服務器獲取不同時間點的系統(tǒng)性能數(shù)值；設置模塊，用于分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點，以該時間點 的時間值作為該坐標點div元素的橫坐標，該系統(tǒng)性能數(shù)值作為該坐標點div元素的縱坐 標；瀏覽器，用于在所述坐標軸背景圖上顯示各坐標點。本實施例中，所述初始化模塊還可以用于通過ess的屬性值設置各相鄰的兩個坐 標點之間的連接線的div參數(shù)值；所述瀏覽器還可以用于在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。本實施例中，所述的設備還可以包括擬合模塊，用于在每兩個相鄰的坐標點之間新增多個坐標點，通過Bezier算法計 算出新增的多個坐標點各自的div參數(shù)值；所述瀏覽器還可以用于在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。本實施例中，所述的設備還可以包括存儲模塊，用于使用數(shù)組或隊列的形式保存所獲取的系統(tǒng)性能數(shù)值，及獲取該系 統(tǒng)性能數(shù)值的時間點的時間值。本實施例中，所述瀏覽器具體可以包括分組單元，用于按照橫坐標從小往大的順序，對各坐標點進行分組，將橫坐標上相 鄰的若干個坐標點劃分為一組；刷新單元，用于定期刷新；顯示單元，用于每次刷新后在所述坐標軸背景圖上顯示一組坐標點，按照橫坐標 從小往大的順序依次顯示每一組的坐標點。其它實現(xiàn)細節(jié)可參照實施例一。本領域普通技術人員可以理解上述方法中的全部或部分步驟可通過程序來指令 相關硬件完成，所述程序可以存儲于計算機可讀存儲介質(zhì)中，如只讀存儲器、磁盤或光盤 等?？蛇x地，上述實施例的全部或部分步驟也可以使用一個或多個集成電路來實現(xiàn)。相應 地，上述實施例中的各模塊/單元可以采用硬件的形式實現(xiàn)，也可以采用軟件功能模塊的形式實現(xiàn)。本發(fā)明不限制于任何特定形式的硬件和軟件的結(jié)合。 當然，本發(fā)明還可有其他多種實施例，在不背離本發(fā)明精神及其實質(zhì)的情況下，熟 悉本領域的技術人員當可根據(jù)本發(fā)明作出各種相應的改變和變形，但這些相應的改變和變 形都應屬于本發(fā)明的權利要求的保護范圍。
權利要求
一種系統(tǒng)性能數(shù)據(jù)的處理方法，包括添加坐標軸背景圖，通過層疊樣式表css的屬性值設置該背景圖中坐標軸及坐標點的參數(shù)；從服務器獲取不同時間點的系統(tǒng)性能數(shù)值；分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點，以該時間點的時間值作為該坐標點div元素的橫坐標，該系統(tǒng)性能數(shù)值作為該坐標點div元素的縱坐標；瀏覽器在所述坐標軸背景圖上顯示各坐標點。
2.如權利要求1所述的方法，其特征在于，所述通過ess的屬性值設置該背景圖中坐標 軸及坐標點的參數(shù)的步驟中還包括通過ess的屬性值設置各相鄰的兩個坐標點之間的連接線的div參數(shù)值； 所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟中還包括 瀏覽器在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。
3.如權利要求1所述的方法，其特征在于，所述分別為每個時間點的系統(tǒng)性能數(shù)值建 立一個坐標點的步驟后，瀏覽器顯示所述坐標系及各坐標點的步驟前還包括在每兩個相鄰的坐標點之間新增多個坐標點，通過Bezier算法計算出新增的多個坐 標點各自的div參數(shù)值；所述瀏覽器在所述坐標軸背景圖上顯示各坐標點的步驟中還包括 瀏覽器在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。
4.如權利要求1所述的方法，其特征在于，所述從服務器獲取不同時間點的系統(tǒng)性能 數(shù)值的步驟后還包括使用數(shù)組或隊列的形式保存所獲取的系統(tǒng)性能數(shù)值，及獲取該系統(tǒng)性能數(shù)值的時間點 的時間值。
5.如權利要求1到4中任一項所述的方法，其特征在于，所述瀏覽器在所述坐標軸背景 圖上顯示各坐標點的步驟包括按照橫坐標從小往大的順序，對各坐標點進行分組，將橫坐標上相鄰的若干個坐標點 劃分為一組； 定期刷新；所述瀏覽器每次刷新后在所述坐標軸背景圖上顯示一組坐標點，按照橫坐標從小往大 的順序依次顯示每一組的坐標點。
6.一種系統(tǒng)性能數(shù)據(jù)的處理設備，其特征在于，包括初始化模塊，用于添加坐標軸背景圖，通過層疊樣式表CSS的屬性值設置該背景圖中 坐標軸及坐標點的參數(shù)；獲取模塊，用于從服務器獲取不同時間點的系統(tǒng)性能數(shù)值；設置模塊，用于分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點，以該時間點的時 間值作為該坐標點div元素的橫坐標，該系統(tǒng)性能數(shù)值作為該坐標點div元素的縱坐標； 瀏覽器，用于在所述坐標軸背景圖上顯示各坐標點。
7.如權利要求6所述的設備，其特征在于所述初始化模塊還用于通過CSS的屬性值設置各相鄰的兩個坐標點之間的連接線的 div參數(shù)值；所述瀏覽器還用于在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。
8.如權利要求6所述的設備，其特征在于，還包括擬合模塊，用于在每兩個相鄰的坐標點之間新增多個坐標點，通過Bezier算法計算出 新增的多個坐標點各自的div參數(shù)值；所述瀏覽器還用于在所述坐標軸背景圖上顯示各相鄰坐標點之間的連接線。
9.如權利要求6所述的設備，其特征在于，還包括存儲模塊，用于使用數(shù)組或隊列的形式保存所獲取的系統(tǒng)性能數(shù)值，及獲取該系統(tǒng)性 能數(shù)值的時間點的時間值。
10.如權利要求6到9中任一項所述的設備，其特征在于，所述瀏覽器包括分組單元，用于按照橫坐標從小往大的順序，對各坐標點進行分組，將橫坐標上相鄰的 若干個坐標點劃分為一組； 刷新單元，用于定期刷新；顯示單元，用于每次刷新后在所述坐標軸背景圖上顯示一組坐標點，按照橫坐標從小 往大的順序依次顯示每一組的坐標點。
全文摘要
本發(fā)明公開了一種系統(tǒng)性能數(shù)據(jù)的處理方法及處理設備；方法包括添加坐標軸背景圖，通過層疊樣式表css的屬性值設置該背景圖中坐標軸及坐標點的參數(shù)；從服務器獲取不同時間點的系統(tǒng)性能數(shù)值；分別為每個時間點的系統(tǒng)性能數(shù)值建立一個坐標點，以該時間點的時間值作為該坐標點div元素的橫坐標，該系統(tǒng)性能數(shù)值作為該坐標點div元素的縱坐標；瀏覽器在所述坐標軸背景圖上顯示各坐標點。本發(fā)明能動態(tài)、直觀地反映系統(tǒng)性能情況。
文檔編號H04L29/08GK101986654SQ20101052044
公開日2011年3月16日 申請日期2010年10月20日 優(yōu)先權日2010年10月20日
發(fā)明者劉立忠, 吳慶民, 袁鵬飛 申請人:浪潮(北京)電子信息產(chǎn)業(yè)有限公司