javascript 绘制曲线

下面的这段代码，每个div里面只能画一条曲线，能不能帮忙改一下，使得每个div里面可以画两条或更多条曲线，以便能看出曲线的对比。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" c />
<title>无标题文档</title>
<script>
var gov=new Object();
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}
var $ = function(elem) {
    if (arguments.length > 1) {
      for (var i = 0, elems = [], length = arguments.length; i < length; i++)
        elems.push($(arguments));
      return elems;
    }
    if (typeof elem == 'string') {
      return document.getElementById(elem);
    } else {
      return elem;
    }
  };
var period =  Class.create();
period.prototype = {
   initialize:function(value,time){
    this.value = value;      
    this.time = time;
   }
};
gov.Graphic = Class.create();
gov.Graphic.prototype={
initialize: function(data,elm,options){
  this.setOptions(options);
  this.entity=document.createElement("div");
  this.pointBox=$(elm);
  this.showPointGraphic(data);
},
setOptions: function(options) {
  this.options = {
   height:170,                 //绘图区域高度
   maxHeight:50,              //y轴最高数值
   barDistance:26,           //x轴坐标间距
   topDistance:0,             //上部填充
   bottomDistance:0,        //底部填充
   leftDistance:20,
   pointWidth:5,               //坐标点宽度
   pointHeight:5,             //坐标点高度
   pointColor:"#ff0000",     //坐标点颜色
   lineColor:"#ffd43a",       //连接线颜色
   valueWidth:20,            //y轴数值宽度
   valueColor:"#000",       //y轴数值颜色
   timeWidth:20,             //x轴数值宽度
   timeColor:"#000",       //x轴数值颜色
   disvalue:true,             //是否显示y轴数值
   distime:true              //是否显示x轴数值
  }
  Object.extend(this.options, options || {});
   },
showPointGraphic:function(data,obj)
{
   var This=this;
   var showPoints=new Array();
   var values=new Array();
   var times=new Array();
   This.points=data;
   This.count=data.value.length;
   for(var i=0;i<This.count;i++)
   {
    var showPoint=document.createElement("div");
                var spanValue=document.createElement("span");
                var spanTime=document.createElement("span");
    showPoint.height=This.points.value;
                showPoint.value=This.points.value;
                showPoint.time=This.points.time;
    
    showPoint.style.backgroundColor=this.options.pointColor;
    showPoint.style.f;
    showPoint.style.position="absolute";
    showPoint.style.zIndex ="999";
    showPoint.style.width=this.options.pointWidth+"px";
    showPoint.style.height=this.options.pointHeight+"px";
    showPoint.style.top=this.options.topDistance+"px";
                
    spanValue.style.position="absolute";
    spanValue.style.width=this.options.valueWidth+"px";
    spanValue.style.textAlign="center";
    spanValue.style.color=this.options.valueColor;
    spanValue.style.zIndex ="999";
                spanTime.style.position="absolute";
    spanTime.style.width=this.options.timeWidth+"px";
    spanTime.style.textAlign="center";
    spanTime.style.color=this.options.timeColor;
    var timeHeight=15;
    var valueHeight=21;
    if(!this.options.disvalue) {
     spanValue.style.display="none";
     valueHeight=this.options.pointHeight;
    }
    if(!this.options.distime) {
     spanTime.style.display="none";
     timeHeight=0;
    }
    var left;
    if(showPoints.length!=0){
     left=parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+this.options.barDistance;
    }
    else{
     left=this.options.leftDistance;
    }
    
    showPoint.style.left=left+"px";
                spanValue.style.left=left+parseInt((this.options.pointWidth-this.options.valueWidth)/2)+"px";
                spanTime.style.left=left+parseInt((this.options.pointWidth-this.options.timeWidth)/2)+"px";
            
    if(showPoint.height>this.options.maxHeight)
    {
     showPoint.height=this.options.maxHeight;
    }
    
          spanValue.innerHTML=showPoint.value;
    spanTime.innerHTML=showPoint.time;
                        
                showPoints.push(showPoint);
                values.push(spanValue);
                times.push(spanTime);
    This.entity.appendChild(showPoint);
    This.entity.appendChild(spanValue);
    This.entity.appendChild(spanTime);
    
    var percentage=showPoints.height/this.options.maxHeight||0;
    var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage;
    showPoints.style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px";
                values.style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px";
                times.style.top=this.options.height-this.options.bottomDistance-timeHeight+"px";
   }
   var _leng=showPoints.length
   for(var i=0;i<_leng;i++)
   {
    if(i>0)
     {
      This.drawLine(parseInt(showPoints[i-1].style.left),
             parseInt(showPoints[i-1].style.top),
             parseInt(showPoints.style.left),
             parseInt(showPoints.style.top)
             );
     }
   }
   This.Constructor.call(This);
  },
  drawLine:function(startX,startY,endX,endY)
  {
   var xDirection=(endX-startX)/Math.abs(endX-startX);
   var yDirection=(endY-startY)/Math.abs(endY-startY);
   var xDistance=endX-startX;
   var yDistance=endY-startY;
   var xPercentage=1/Math.abs(endX-startX);
   var yPercentage=1/Math.abs(endY-startY);
   if(Math.abs(startX-endX)>=Math.abs(startY-endY))
   {
    var _xnum=Math.abs(xDistance)
    for(var i=0;i<=_xnum;i++)
    {
     var point=document.createElement("div");
     point.style.position="absolute";
     point.style.backgroundColor=this.options.lineColor;
     point.style.f;
     point.style.width="1px";
     point.style.height="1px";       
     
     startX+=xDirection;
     point.style.left=startX+this.options.pointWidth/2+"px";
     startY=startY+yDistance*xPercentage;
     point.style.top=startY+this.options.pointHeight/2+"px";
     this.entity.appendChild(point);
    }
   }
   else
   {
    var _ynum=Math.abs(yDistance)
    for(var i=0;i<=_ynum;i++)
    {
     var point=document.createElement("div");
     point.style.position="absolute";
     point.style.backgroundColor=this.options.lineColor;
     point.style.f;
     point.style.width="1px";
     point.style.height="1px";       
     
     startY+=yDirection;
     point.style.top=startY+this.options.pointWidth/2+"px";
     startX=startX+xDistance*yPercentage;
     point.style.left=startX+this.options.pointHeight/2+"px";
     this.entity.appendChild(point);
    }
   }
  },
  Constructor:function()
  {
   this.entity.style.position="absolute";
   this.pointBox.innerHTML="";
   this.pointBox.appendChild(this.entity);
  }
}
window.onload=function(){
  var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据
   [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
   );
  var data1=new period([48,23,10,2,12,8,24,25,15,35,25,14,42,58,46,25,12,8,14,28,42],//y轴数据
   [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
   );
  new gov.Graphic(data,"box");
  new gov.Graphic(data1,"box1",{ pointColor:"#3366ff",lineColor:"#33ffff"});
}
</script>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0px;
padding:0px;
}
#box,#box1{
padding:13px 0px 10px;
padding-left:28px;
width:677px;
height:180px;
background:url(/articleimg/2009/03/6562/bg.gif) no-repeat;
}
</style></head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>

解决方案 »

  1.   

    我这里有一个画直线的例子（多条），你自己看看
    ！其实也就是采用绘制完毕之后清除起始值。重新绘制
    <html xmlns:v="http://www.blogjava.net/zhyiwww/">
    <head runat="server">
        <title>测试页面</title>
        <style type="text/css">
                v\:*   {behavior:url(#default#VML);}  
                input{cursor:hand}
        </style>   
        <script type="text/javascript">
            //封装获取对象
            var $ = function (el) {
            return (typeof el == 'object')?el:document.getElementById(el) ;
            };        
            //HashMap对象定义
            var hashMap = {  
                Set : function(key,value){this[key] = value},  
                Get : function(key){return this[key]},  
                Contains : function(key){return this.Get(key) == null?false:true},  
                Remove : function(key){delete this[key]}  
            }      
           // 你所点过的鼠标位置的数组，是点对象数组
           var disPoints = new Array();
           // 是否处于鼠标按下状态
           var  select = false;            
           // 记录鼠标按下点的位置 ，默认是(0,0)  
           var  downX = 0;  
           var  downY = 0;
           //定义线的编号，默认0
           var num = 0;
           //保存线的总值（包括2头的ID）
           var linevalue="";
           //定义的屏幕点对象
           var ScreenPoint = function(screenX,screenY){
                this.screenX = screenX;
                this.screenY = screenY;
                return this;
            };
            //画线函数
            var drawLine=function(id,startPoint,endPoint){
                var s="<v:line  id=" + id + " onclick='RemoveLine(this)' title='删除此关系' style='cursor:hand' from='" + startPoint.screenX + "," + startPoint.screenY + "' to= '" + endPoint.screenX + ","
                    + endPoint.screenY + "' style='position:absolute;left:0px;top:0px;'></v:line>";            
                var o = document.createElement(s);  
                // 这个方法，使在特定的位置添加对象，具体使用，请参考其它的资料
                document.body.insertAdjacentElement('BeforeEnd',o);                
                return o;
            };
            //获得元素在页面中的坐标位置
            function getElementPos(elementId) {
                var ua = navigator.userAgent.toLowerCase();
                var isOpera = (ua.indexOf('opera') != -1);
                var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
                var el = document.getElementById(elementId);
                if(el.parentNode === null || el.style.display == 'none') {
                     return false;
                }      
                var parent = null;
                var pos = [];     
                var box;     
                if(el.getBoundingClientRect)    //IE
                {         
                    box = el.getBoundingClientRect();
                    var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
                    var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
                    return {x:box.left + scrollLeft, y:box.top + scrollTop};
                }else if(document.getBoxObjectFor)    // gecko    
                {
                    box = document.getBoxObjectFor(el); 
                    var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; 
                    var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; 
                    pos = [box.x - borderLeft, box.y - borderTop];
                } else    // safari & opera    
                {
                    pos = [el.offsetLeft, el.offsetTop];  
                    parent = el.offsetParent;     
                    if (parent != el) { 
                        while (parent) {  
                            pos[0] += parent.offsetLeft; 
                            pos[1] += parent.offsetTop; 
                            parent = parent.offsetParent;
                        }  
                    }   
                    if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) { 
                        pos[0] -= document.body.offsetLeft;
                        pos[1] -= document.body.offsetTop;         
                    }    
                }              
                if (el.parentNode) { 
                    parent = el.parentNode;
                } else {
                     parent = null;
                }
                while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
                    pos[0] -= parent.scrollLeft;
                    pos[1] -= parent.scrollTop;
                    if (parent.parentNode) {
                        parent = parent.parentNode;
                    } else {
                        parent = null;
                    }
                }
                return {x:pos[0], y:pos[1]};
            }
            
        
    </script>
      

  2.   

        //传入2个对象进行画线
            var drawLineformobject=function(id,el1,el2){
                var mX1 = getElementPos(el1).x;
                var mY1 = getElementPos(el1).y;//alert(mX1);alert(mY1);
                //var beginPoint = new ScreenPoint(mX1,mY1);
                var mX2 = getElementPos(el2).x;
                var mY2 =getElementPos(el2).y;//alert(mX2);alert(mY2);
                //var endPoint = new ScreenPoint(mX2,mY2);
                var s="<v:line  id=" + id + " onclick='RemoveLine(this)' title='删除此关系' style='cursor:hand' from='" + mX1 + "," + mY1 + "' to= '" + mX2 + "," + mY2 + "' style='position:absolute;left:0px;top:0px;'></v:line>";            
                var o = document.createElement(s);  
                // 这个方法，使在特定的位置添加对象，具体使用，请参考其它的资料
                document.body.insertAdjacentElement('BeforeEnd',o);                
                return o;
            };        
           //获得数据库ID
            var GetId=function(v){
                  var a = v.indexOf('(')+1; 
                  var b = v.indexOf(')');
                  return v.substring(a,b);
            };
            //鼠标开始时确定起始点，开始画线
            var down=function(event,el){                
                // 取得你选取的最后一个点
                var lastPoint = disPoints[disPoints.length - 1];             
                // 判断是否是第一个点
                if(lastPoint == null){
                    // 鼠标按下点屏幕坐标
                    var mouseX1 = event.clientX;
                    var mouseY1 = event.clientY;                  
                    // 记录鼠标按下点的屏幕坐标
                    downX = mouseX1;
                    downY = mouseY1;
                    // 记录第一个点
                    lastPoint = new ScreenPoint(downX,downY);
                    disPoints[0] = lastPoint;
                    linevalue=GetId(el.nextSibling.childNodes[0].nodeValue);
                }                
                // 如果不是第一个点 取得当前鼠标点的位置
                var mouseX2 = event.clientX;
                var mouseY2 = event.clientY;               
                // 定义当前点
                var tmpPoint = new ScreenPoint(mouseX2,mouseY2);                                
                // 定义线的ID,用于，取得线的对象
                var lineID = "the_line_" + num;               
                // 在当前点，和最后一个点，两点画线
                line = drawLine(lineID,lastPoint,tmpPoint);                            
                // 鼠标按下，记录按下的状态
                select = true;
            };
            
            //鼠标抬起时确定终点
            var up=function(event,el){ 
                    // 取得鼠标抬起点的坐标，也就是确定点的坐标
                    var mouseX3 = event.clientX;
                    var mouseY3 = event.clientY;                 
                    // 最终确定的点的对象
                    var currentPoint = new ScreenPoint(mouseX3,mouseY3);                    
                    // 把此点数组请客，此点为起始点
                    disPoints[disPoints.length]=null;
                    select = false;
                    //保存值
                    if(linevalue!=""){
                        linevalue=linevalue+","+GetId(el.nextSibling.childNodes[0].nodeValue);
                        hashMap.Set("the_line_"+num,linevalue); 
                        $("SaveValues").value=hashMap;
                    }
                    //编号+1
                    num++;
                };
                
           //鼠标移动画线
            var move=function(event){                    
                    if(select){        
                        // 取得当前鼠标的位置坐标
                        var mouseX2 = event.clientX;
                        var mouseY2 = event.clientY;                       
                        // 把线，从最后一个点画到当前位置
                        line.to = mouseX2 + "," + mouseY2;            
                    }
                    //取消事件冒泡，否则不能响应鼠标的抬起事件
                    window.event.cancelBubble = true;
                    window.event.returnValue = false;    
                };       
        
            //删除线
           var RemoveLine=function(el){
                if(hashMap.Contains(el.id))   
                {   
                   hashMap.Remove(el.id);   
                }
                var p = el.parentNode;   
                p.removeChild(el);
           };
          
            //加载关系线
            var loaddrawLine=function(){
                var loadall = $("SaveValues").value.split(";");
                loadall.sort();
                for(var j=0;j<loadall.length;j++)
                {
                    if(loadall[j]!="")
                    {
                        var beginHtmlId="";var endHtmlId="";
                        var loadline=loadall[j].split(",");
                        if(loadline[0].substring(0,3)=="Req"){
                            beginHtmlId=getReqRefObjects(loadline[0]).id;
                        }else{
                            beginHtmlId=getTestcaseRefObjects(loadline[0]).id;
                        }
                        if(loadline[1].substring(0,3)=="Req"){
                            endHtmlId=getReqRefObjects(loadline[1]).id;
                        }else{
                            endHtmlId=getTestcaseRefObjects(loadline[1]).id;
                        }
                        //alert(beginHtmlId);alert(endHtmlId);return;
                        drawLineformobject('the_line_'+j,beginHtmlId,endHtmlId)//自动画线
                        //把自动加载的线保存到hashmap
                        var autoline=loadline[0]+","+loadline[1];
                        hashMap.Set("the_line_"+j,autoline);                                    
                    }
                }
                $("SaveValues").value=hashMap;  
            };
           
    </head>
    <body style="text-align: center;" onmousemove='move(event)'>
        <form id="form1" runat="server">
            <h3>
                关联关系操作页面</h3>
            <div style="width: 500px;">
                <div style="float: left; background-color: Gray;" id="reqPanel">
                    <asp:CheckBoxList ID="CBLReq" runat="server">
                    </asp:CheckBoxList>
                </div>
                <div style="float: right; background-color: ThreeDFace;" id="TestPanel">
                    <asp:CheckBoxList ID="CBLTestCase" runat="server">
                    </asp:CheckBoxList>
                </div>
            </div>
        </form>
    </body>
    </html>
      

  3.   

    枯井同学，你好：能不能把我贴的那段代码改一下，
    我没用过javascript，不知道要改什么地方啊。谢谢了