	资讯中心	网站运营	平面设计	网站设计	网络技术	网络编程	网页特效	下载中心

您现在的位置：文章频道 → 网页特效 → 图形特效 → 文章内容

封装js绘制曲线图

作者：佚名文章来源：本站整理发布时间：2010-1-6 0:36:22 []

减小字体增大字体

参考网上的绘图代码，自己封装了一个绘图类，给大家做一个参考。
引用方法:
new gov.Graphic(par1,par2,par3);
par1 为绘图数据
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轴数据
);
par2 为绘图的容器层id
par3 为绘图样式参数，可选参数
默认值：
{
       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轴数值
}

以下是程序代码

<!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" content="text/html; charset=gb2312" />
<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[i]));
      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[i];
                showPoint.value=This.points.value[i];
                showPoint.time=This.points.time[i];
    
    showPoint.style.backgroundColor=this.options.pointColor;
    showPoint.style.fontSize="0px";
    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[i].height/this.options.maxHeight||0;
    var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage;
    showPoints[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px";
                values[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px";
                times[i].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[i].style.left),
             parseInt(showPoints[i].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.fontSize="0";
     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.fontSize="0";
     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(/html/UploadPic/2010-1/2010160454966205.jpg) no-repeat;
}
</style></head>
 <body>
 <div id="box"></div>
 <div id="box1"></div>
 </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章评论

（评论内容只代表网友观点，与本站立场无关！）

您现在的位置：文章频道 → 网页特效 → 图形特效 → 文章内容

文章评论

最近更新

推荐文章

浏览排行