页面展示类似于任务管理器CPU使用记录的动态图

北方蛮子 发布于 2013/01/07 15:21
阅读 902
收藏 0

那个,对于这个问题我没有什么好的思路

最后的方法就是那jqPlot画图

然后使用定时器刷新

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">


<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Simple Test</title>
  <!--[if IE]><script language="javascript" type="text/javascript" src="./excanvas.js"></script><![endif]-->
  <link rel="stylesheet" type="text/css" href="./jquery.jqplot.css" />
  <script language="javascript" type="text/javascript" src="./jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="./jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="./plugins/jqplot.categoryAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="./plugins/jqplot.highlighter.js"></script>
  <script type="text/javascript" language="javascript">
  
$(function(){
run();   
var i = 1 ; 
var n = 1;         //加载页面时启动定时器  
       var interval;  
           function run() {  
              interval = setInterval(chat, "1000");  
           }  
           function chat() { 
           if(i>4){
            n=0;
           }
           if(i<1){
           n=1;
           }
           if(n==1){ 
               i++;
             }else{
             i--;
             } 
               
line1 = [[1+i,3+i], [2+i,7+i], [3+i,2+i], [4+i,9+i], [5+i,16+i], [6+i,8+i], [7+i,12+i]];
line2 = [[1,4], [2,5], [3,4], [4,8], [5,13], [6,7], [7,17]];


     //详细配置
plot = $.jqplot('chart', [line1,line2], {


title: '一周销量情况',                          //图表表头标题
axes: { 
xaxis: { min: 0, max: 8},       //准确控制x轴最大值及最小值
yaxis: { min: 0, max: 20, numberTicks: 5},    //准确控制y轴最大值及最小值,间隔个数
xaxis: {
ticks:['周日', '周一', '周二', '周三', '周四','周五','周六'],
renderer: $.jqplot.CategoryAxisRenderer
}
},             
//series: [{ color: '#5FAB78'}],                    //定义趋势线颜色   
highlighter: { 
lineWidthAdjust: 50, //当鼠标移动到放大的数据点上时,设置增大的数据点的宽度,目前仅适用于非实心数据点 
sizeAdjust: 10, // 当鼠标移动到数据点上时,数据点扩大的增量增量 
showTooltip: true, // 是否显示提示信息栏 
tooltipLocation: 'nw', // 提示信息显示位置(英文方向的首写字母): n, ne, e, se, s, sw, w, nw. 
tooltipAxes: 'xy', // 提示信息框显示数据点那个坐标轴上的值,目前有横/纵/横纵三种方式,值分别为 x, y or xy. 
tooltipSeparator: ',' // 提示信息栏不同值之间的间隔符号 

});        
           }  

     });
  </script>
  </head>
  <body>
   <span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
  </body>
</html>
这个就是看看行不行,结果发现

有两个问题:

1:动是可以动,但是感觉一卡一卡的

2:在IE下面过不了一会儿页面就崩溃了

我上网查了一下,貌似是IE内存积累,但是以前没接触过这种问题

请问有什么方法

当然要是有其他的画图思路就更好了,我觉得这个方法还是有缺陷

加载中
0
z
zhongxh
内存泄漏是一方面,闪烁是另一方面,可以了解一下“无闪烁刷新”,或者Ajax,server push/comet这些知识。
0
mallon
mallon
html5 canvas不会内存泄漏,如果要兼容IE,就用excanvas
返回顶部
顶部