专利名称：一种系统性能数据的处理方法和设备的制作方法
技术领域：
本发明涉及计算机领域，具体涉及一种系统性能数据的处理方法和设备。
背景技术：
在现有的B/S架构中，客户端查看系统性能数据大多采用两种形式一种是客户端从服务器端获取性能数据，并在客户端保留一定时间范围内的性能 数据(如CPU利用率)；用户只能以数值的形式查看总体性能信息，无法和前一个时间点的 性能值做比较，这给用户查看系统性能情况带来了极大的不方便。如果客户端采用flex技 术，可异步从服务器端获取性能数据，并利用这些信息，在客户端使用flex提供的图形绘 制接口绘制图形，但由于开发较为复杂且兼容性等问题，不容易进行推广。第二种方式是在服务端形成性能曲线图形，并保存为文件，如gif，jpeg等格式。 客户端定时异步请求这个文件，用以模拟动态的性能曲线。但是，在网络速度有限的情况 下，会出现失真的现象，不能动态的用图形曲线描述系统性能的曲线图采用性能曲线描述， 在页面上动态直观反映系统性能信息，给用户带来直观的视觉效果。
发明内容
本发明要解决的技术问题是提供一种系统性能数据的处理方法和设备，能动态、 直观地反映系统性能情况。为了解决上述问题，本发明提供了一种系统性能数据的处理方法，包括添加坐标轴背景图，通过层叠样式表ess的属性值设置该背景图中坐标轴及坐标 点的参数；从服务器获取不同时间点的系统性能数值；分别为每个时间点的系统性能数值建立一个坐标点，以该时间点的时间值作为该 坐标点div元素的横坐标，该系统性能数值作为该坐标点div元素的纵坐标；浏览器在所述坐标轴背景图上显示各坐标点。优选地，所述通过CSS的属性值设置该背景图中坐标轴及坐标点的参数的步骤中 还包括通过CSS的属性值设置各相邻的两个坐标点之间的连接线的div参数值；所述浏览器在所述坐标轴背景图上显示各坐标点的步骤中还包括浏览器在所述坐标轴背景图上显示各相邻坐标点之间的连接线。优选地，所述分别为每个时间点的系统性能数值建立一个坐标点的步骤后，浏览 器显示所述坐标系及各坐标点的步骤前还包括在每两个相邻的坐标点之间新增多个坐标点，通过Bezier算法计算出新增的多 个坐标点各自的div参数值；所述浏览器在所述坐标轴背景图上显示各坐标点的步骤中还包括浏览器在所述坐标轴背景图上显示各相邻坐标点之间的连接线。
优选地，所述从服务器获取不同时间点的系统性能数值的步骤后还包括使用数组或队列的形式保存所获取的系统性能数值，及获取该系统性能数值的时 间点的时间值。优选地，所述浏览器在所述坐标轴背景图上显示各坐标点的步骤包括按照横坐标从小往大的顺序，对各坐标点进行分组，将横坐标上相邻的若干个坐 标点划分为一组；定期刷新；所述浏览器每次刷新后在所述坐标轴背景图上显示一组坐标点，按照横坐标从小 往大的顺序依次显示每一组的坐标点。本发明还提供了一种系统性能数据的处理设备，包括初始化模块，用于添加坐标轴背景图，通过层叠样式表ess的属性值设置该背景 图中坐标轴及坐标点的参数；获取模块，用于从服务器获取不同时间点的系统性能数值；设置模块，用于分别为每个时间点的系统性能数值建立一个坐标点，以该时间点 的时间值作为该坐标点div元素的横坐标，该系统性能数值作为该坐标点div元素的纵坐 标；浏览器，用于在所述坐标轴背景图上显示各坐标点。优选地，所述初始化模块还用于通过ess的属性值设置各相邻的两个坐标点之间 的连接线的div参数值；所述浏览器还用于在所述坐标轴背景图上显示各相邻坐标点之间的连接线。优选地，所述的设备还包括拟合模块，用于在每两个相邻的坐标点之间新增多个坐标点，通过Bezier算法计 算出新增的多个坐标点各自的div参数值；所述浏览器还用于在所述坐标轴背景图上显示各相邻坐标点之间的连接线。优选地，所述的设备还包括存储模块，用于使用数组或队列的形式保存所获取的系统性能数值，及获取该系 统性能数值的时间点的时间值。优选地，所述浏览器包括分组单元，用于按照横坐标从小往大的顺序，对各坐标点进行分组，将横坐标上相 邻的若干个坐标点划分为一组；刷新单元，用于定期刷新；显示单元，用于每次刷新后在所述坐标轴背景图上显示一组坐标点，按照横坐标 从小往大的顺序依次显示每一组的坐标点。本发明的技术方案可以及时正确的显示系统性能变化，符合w3c标准，可兼容所 有的主流web浏览器；本发明的优化方案可以通过获取每一时间点的性能值和前一段时间 的时间点的性能值共同绘制出性能曲线；本发明的又一优化方案按时间分组进行显示，能 够实现动态刷新。
图1是实施例一的例子的流程示意图；图2是实施例一的例子中的坐标轴背景图；图3是实施例一的例子中生成坐标点后的示意图；图4是实施例一的例子中生成连接线后的示意图；图5是实施例一的例子中生成曲线初样图后的示意图；图6是实施例一的例子中生成整体光滑曲线后的示意图。
具体实施例方式下面将结合附图及实施例对本发明的技术方案进行更详细的说明。需要说明的是，如果不冲突，本发明实施例以及实施例中的各个特征可以相互结 合，均在本发明的保护范围之内。另外，在附图的流程图示出的步骤可以在诸如一组计算机 可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况 下，可以以不同于此处的顺序执行所示出或描述的步骤。实施例一，一种系统性能数据的处理方法，包括添加坐标轴背景图，通过层叠样式表ess的属性值设置该背景图中坐标轴及坐标 点的参数；从服务器获取不同时间点的系统性能数值；分别为每个时间点的系统性能数值建立一个坐标点，以该时间点的时间值作为该 坐标点div元素的横坐标，该系统性能数值作为该坐标点div元素的纵坐标；浏览器在所述坐标轴背景图上显示各坐标点。其中，获取系统性能数值的步骤和添加坐标轴背景图，设置该背景图中坐标轴及 坐标点的参数的步骤顺序不限，可以并行。所述通过ess创建坐标系的方案完全不同于C/S架构的坐标系转换方法以及flex 架构的坐标系转换方法。C/S架构是将坐标系统的坐标进行一系列的映射，先映射到窗口工 作区的坐标，再映射到窗口的坐标系，最终映射为显示器的坐标系统(原点左上角，X右向 为正，y轴下向为正)。flex采用的方式基本类似。本实施例中，坐标系的坐标只需要映射 成div元素position属性的坐标值即可，不需要上述如此复杂的多层坐标系统映射。本实施例控制ess以实现每个点的样式，同时控制div的坐标值，以确定每个点的 位置，从而可以在B/S架构的系统中正确显示不同时间点的系统性能数值，直观方便。本实施例中，通过ess的属性值所设置的坐标轴和坐标点的参数具体可以但不限 于包括以下参数中的任一种及其任意组合坐标点颜色、坐标点宽度、坐标点高度、χ轴值宽度，χ轴值大小、y轴值宽度、y轴 值大小、连接线颜色、连接线宽度等。本实施例中，所述通过ess的属性值设置该背景图中坐标轴及坐标点的参数的步 骤中还可以包括通过CSS的属性值设置各相邻的两个坐标点之间的连接线的div参数值；所述浏览器在所述坐标轴背景图上显示各坐标点的步骤中还可以包括浏览器在所述坐标轴背景图上显示各相邻坐标点之间的连接线。
6
本实施例中，所述分别为每个时间点的系统性能数值建立一个坐标点的步骤后， 浏览器显示所述坐标系及各坐标点的步骤前还可以包括在每两个相邻的坐标点之间新增多个坐标点，通过Bezier算法计算出新增的多 个坐标点各自的div参数值；所述浏览器在所述坐标轴背景图上显示各坐标点的步骤中还可以包括浏览器在所述坐标轴背景图上显示各相邻坐标点之间的连接线。 需要注意的是，浏览器显示的各坐标点也包括新增的坐标点。
上述步骤里，增加坐标点后，相当于用大量短距离直线连接两个根据系统性能数 值创建的坐标点，可生成接近平滑曲线图形，逼近真实性能变化曲线，正确体现性能变化情 况；通过对坐标点和连接线的参数设置，完成对曲线样式的设置。本实施例中，可以同步、也可以异步从服务器获取不同时间点的系统性能数值。本实施例中，所述从服务器获取不同时间点的系统性能数值的步骤后还可以包括使用数组或队列的形式保存所获取的系统性能数值，及获取该系统性能数值的时 间点的时间值。本实施例中，所述浏览器在所述坐标轴背景图上显示各坐标点的步骤具体可以包 括按照横坐标从小往大的顺序，对各坐标点进行分组，将横坐标上相邻的若干个坐 标点划分为一组；定期刷新；所述浏览器每次刷新后在所述坐标轴背景图上显示一组坐标点，按照横坐标从小 往大的顺序依次显示每一组的坐标点。 下面用-
-个具体的例子进行说明；该例子如图1所示，包括以下步骤
息数组，如下a、通过远程异步通信方式获取到系统在不同时间点的性能信,
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、设置参数，定义options，详细内容如下
direction:0,/,/同步获取信息时，页面曲线动态方向
height:180，Il/绘图区域高度
width:600,Il/绘图区域宽度
maxHeight50,Il/y轴最高数值
min Height0,Il/y轴最低数值
barDistance26,Il/χ轴坐标间距
topDistance0,Il/上部填充
bottomDistance0,Il/底部填充
IeftDistance20,Il丨左部填充
pointffidth:7,Il/坐标点宽度
pointHeight7,Il丨坐标点高度
pointColor:“ #ff0000"，//坐标点颜色
IineColor:“ #ffd43a"，//连接线颜色
valueffidth:20,Il/y轴数值宽度
valueColor:“ #000"，//y轴数值颜色
timeffidth:20,Il/χ轴数值宽度
timeColor:“ #000"，//χ轴数值颜色
disvaluetrue,Il丨是否显示y轴数值
distimetrue,Il丨是否显示χ轴数值
bezierNum:3///进行bezier算法次数
d、根据a中获取值和c中设置参数，生成坐标点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、根据步骤a中获取值和步骤c中设置参数，生成连接线信息如下，界面上显示见 图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、根据Bezier算法，可以通过已知的坐标点x，y值计算的到新坐标点的x，y值， 进而生成逼近曲线的多个新坐标点；g、根据最新点坐标值，计算最新连接线信息，生成光滑曲线，形成图形如图6，定时 刷新，形成动态效果图形；本例子中，可将时间值细分成间隔多组(如六1、4233、44......)，每次刷新只显
示一组，顺序显示各组，能形成很明显的动态效果。实施例二，一种系统性能数据的处理设备，包括初始化模块，用于添加坐标轴背景图，通过ess的属性值设置该背景图中坐标轴 及坐标点的参数；获取模块，用于从服务器获取不同时间点的系统性能数值；设置模块，用于分别为每个时间点的系统性能数值建立一个坐标点，以该时间点 的时间值作为该坐标点div元素的横坐标，该系统性能数值作为该坐标点div元素的纵坐 标；浏览器，用于在所述坐标轴背景图上显示各坐标点。本实施例中，所述初始化模块还可以用于通过ess的属性值设置各相邻的两个坐 标点之间的连接线的div参数值；所述浏览器还可以用于在所述坐标轴背景图上显示各相邻坐标点之间的连接线。本实施例中，所述的设备还可以包括拟合模块，用于在每两个相邻的坐标点之间新增多个坐标点，通过Bezier算法计 算出新增的多个坐标点各自的div参数值；所述浏览器还可以用于在所述坐标轴背景图上显示各相邻坐标点之间的连接线。本实施例中，所述的设备还可以包括存储模块，用于使用数组或队列的形式保存所获取的系统性能数值，及获取该系 统性能数值的时间点的时间值。本实施例中，所述浏览器具体可以包括分组单元，用于按照横坐标从小往大的顺序，对各坐标点进行分组，将横坐标上相 邻的若干个坐标点划分为一组；刷新单元，用于定期刷新；显示单元，用于每次刷新后在所述坐标轴背景图上显示一组坐标点，按照横坐标 从小往大的顺序依次显示每一组的坐标点。其它实现细节可参照实施例一。本领域普通技术人员可以理解上述方法中的全部或部分步骤可通过程序来指令 相关硬件完成，所述程序可以存储于计算机可读存储介质中，如只读存储器、磁盘或光盘 等。可选地，上述实施例的全部或部分步骤也可以使用一个或多个集成电路来实现。相应 地，上述实施例中的各模块/单元可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。本发明不限制于任何特定形式的硬件和软件的结合。 当然，本发明还可有其他多种实施例，在不背离本发明精神及其实质的情况下，熟 悉本领域的技术人员当可根据本发明作出各种相应的改变和变形，但这些相应的改变和变 形都应属于本发明的权利要求的保护范围。
权利要求
一种系统性能数据的处理方法，包括添加坐标轴背景图，通过层叠样式表css的属性值设置该背景图中坐标轴及坐标点的参数；从服务器获取不同时间点的系统性能数值；分别为每个时间点的系统性能数值建立一个坐标点，以该时间点的时间值作为该坐标点div元素的横坐标，该系统性能数值作为该坐标点div元素的纵坐标；浏览器在所述坐标轴背景图上显示各坐标点。
2.如权利要求1所述的方法，其特征在于，所述通过ess的属性值设置该背景图中坐标 轴及坐标点的参数的步骤中还包括通过ess的属性值设置各相邻的两个坐标点之间的连接线的div参数值； 所述浏览器在所述坐标轴背景图上显示各坐标点的步骤中还包括 浏览器在所述坐标轴背景图上显示各相邻坐标点之间的连接线。
3.如权利要求1所述的方法，其特征在于，所述分别为每个时间点的系统性能数值建 立一个坐标点的步骤后，浏览器显示所述坐标系及各坐标点的步骤前还包括在每两个相邻的坐标点之间新增多个坐标点，通过Bezier算法计算出新增的多个坐 标点各自的div参数值；所述浏览器在所述坐标轴背景图上显示各坐标点的步骤中还包括 浏览器在所述坐标轴背景图上显示各相邻坐标点之间的连接线。
4.如权利要求1所述的方法，其特征在于，所述从服务器获取不同时间点的系统性能 数值的步骤后还包括使用数组或队列的形式保存所获取的系统性能数值，及获取该系统性能数值的时间点 的时间值。
5.如权利要求1到4中任一项所述的方法，其特征在于，所述浏览器在所述坐标轴背景 图上显示各坐标点的步骤包括按照横坐标从小往大的顺序，对各坐标点进行分组，将横坐标上相邻的若干个坐标点 划分为一组； 定期刷新；所述浏览器每次刷新后在所述坐标轴背景图上显示一组坐标点，按照横坐标从小往大 的顺序依次显示每一组的坐标点。
6.一种系统性能数据的处理设备，其特征在于，包括初始化模块，用于添加坐标轴背景图，通过层叠样式表CSS的属性值设置该背景图中 坐标轴及坐标点的参数；获取模块，用于从服务器获取不同时间点的系统性能数值；设置模块，用于分别为每个时间点的系统性能数值建立一个坐标点，以该时间点的时 间值作为该坐标点div元素的横坐标，该系统性能数值作为该坐标点div元素的纵坐标； 浏览器，用于在所述坐标轴背景图上显示各坐标点。
7.如权利要求6所述的设备，其特征在于所述初始化模块还用于通过CSS的属性值设置各相邻的两个坐标点之间的连接线的 div参数值；所述浏览器还用于在所述坐标轴背景图上显示各相邻坐标点之间的连接线。
8.如权利要求6所述的设备，其特征在于，还包括拟合模块，用于在每两个相邻的坐标点之间新增多个坐标点，通过Bezier算法计算出 新增的多个坐标点各自的div参数值；所述浏览器还用于在所述坐标轴背景图上显示各相邻坐标点之间的连接线。
9.如权利要求6所述的设备，其特征在于，还包括存储模块，用于使用数组或队列的形式保存所获取的系统性能数值，及获取该系统性 能数值的时间点的时间值。
10.如权利要求6到9中任一项所述的设备，其特征在于，所述浏览器包括分组单元，用于按照横坐标从小往大的顺序，对各坐标点进行分组，将横坐标上相邻的 若干个坐标点划分为一组； 刷新单元，用于定期刷新；显示单元，用于每次刷新后在所述坐标轴背景图上显示一组坐标点，按照横坐标从小 往大的顺序依次显示每一组的坐标点。
全文摘要
本发明公开了一种系统性能数据的处理方法及处理设备；方法包括添加坐标轴背景图，通过层叠样式表css的属性值设置该背景图中坐标轴及坐标点的参数；从服务器获取不同时间点的系统性能数值；分别为每个时间点的系统性能数值建立一个坐标点，以该时间点的时间值作为该坐标点div元素的横坐标，该系统性能数值作为该坐标点div元素的纵坐标；浏览器在所述坐标轴背景图上显示各坐标点。本发明能动态、直观地反映系统性能情况。
文档编号H04L29/08GK101986654SQ20101052044
公开日2011年3月16日 申请日期2010年10月20日 优先权日2010年10月20日
发明者刘立忠, 吴庆民, 袁鹏飞 申请人:浪潮(北京)电子信息产业有限公司