JS绘制曲线图

一哥们问我如何用JS绘制曲线图,被我嗤之以鼻, 随后搜索了一下, 竟然发现JS居然真的可以弄,虽然效果想对简单,但是这可是实打实的JS only啊…由此可见, 学习一途,任重道远…

 

文章来自:http://bbs.blueidea.com/thread-2894005-1-1.html

 

这是代码:

<!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>
   1:  
   2: var gov=new Object();
   3: var Class = {
   4:   create: function() {
   5:     return function() {
   6:       this.initialize.apply(this, arguments);
   7:     }
   8:   }
   9: }
  10: Object.extend = function(destination, source) {
  11:   for (var property in source) {
  12:     destination[property] = source[property];
  13:   }
  14:   return destination;
  15: }
  16:  var $ = function(elem) {
  17:     if (arguments.length > 1) {
  18:       for (var i = 0, elems = [], length = arguments.length; i < length; i++)
  19:         elems.push($(arguments[i]));
  20:       return elems;
  21:     }
  22:     if (typeof elem == 'string') {
  23:       return document.getElementById(elem);
  24:     } else {
  25:       return elem;
  26:     }
  27:   };
  28: var period =  Class.create();
  29: period.prototype = {
  30:             initialize:function(value,time){
  31:                 this.value = value;               
  32:                 this.time = time;
  33:             }
  34: };
  35: gov.Graphic = Class.create();
  36: gov.Graphic.prototype={
  37:     initialize: function(data,elm,options){
  38:         this.setOptions(options);
  39:         this.entity=document.createElement("div");
  40:         this.pointBox=$(elm);
  41:         this.showPointGraphic(data);
  42:     },
  43:     setOptions: function(options) {
  44:         this.options = {
  45:             height:170,                 //绘图区域高度
  46:             maxHeight:50,              //y轴最高数值
  47:             barDistance:26,           //x轴坐标间距
  48:             topDistance:0,             //上部填充
  49:             bottomDistance:0,        //底部填充
  50:             leftDistance:20,
  51:             pointWidth:5,               //坐标点宽度
  52:             pointHeight:5,             //坐标点高度
  53:             pointColor:"#ff0000",     //坐标点颜色
  54:             lineColor:"#ffd43a",       //连接线颜色
  55:             valueWidth:20,            //y轴数值宽度
  56:             valueColor:"#000",       //y轴数值颜色
  57:             timeWidth:20,             //x轴数值宽度
  58:             timeColor:"#000",       //x轴数值颜色
  59:             disvalue:true,             //是否显示y轴数值
  60:             distime:true              //是否显示x轴数值
  61:         }
  62:         Object.extend(this.options, options || {});
  63:       },
  64:     showPointGraphic:function(data,obj)
  65:     {
  66:             var This=this;
  67:             var showPoints=new Array();
  68:             var values=new Array();
  69:             var times=new Array();
  70:             This.points=data;
  71:             This.count=data.value.length;
  72:             for(var i=0;i<This.count;i++)
  73:             {
  74:                 var showPoint=document.createElement("div");
  75:                 var spanValue=document.createElement("span");
  76:                 var spanTime=document.createElement("span");
  77:                 showPoint.height=This.points.value[i];
  78:                 showPoint.value=This.points.value[i];
  79:                 showPoint.time=This.points.time[i];
  80:                 
  81:                 showPoint.style.backgroundColor=this.options.pointColor;
  82:                 showPoint.style.fontSize="0px";
  83:                 showPoint.style.position="absolute";
  84:                 showPoint.style.zIndex ="999";
  85:                 showPoint.style.width=this.options.pointWidth+"px";
  86:                 showPoint.style.height=this.options.pointHeight+"px";
  87:                 showPoint.style.top=this.options.topDistance+"px";
  88:                 
  89:                 spanValue.style.position="absolute";
  90:                 spanValue.style.width=this.options.valueWidth+"px";
  91:                 spanValue.style.textAlign="center";
  92:                 spanValue.style.color=this.options.valueColor;
  93:                 spanValue.style.zIndex ="999";
  94:                 spanTime.style.position="absolute";
  95:                 spanTime.style.width=this.options.timeWidth+"px";
  96:                 spanTime.style.textAlign="center";
  97:                 spanTime.style.color=this.options.timeColor;
  98:                 var timeHeight=15;
  99:                 var valueHeight=21;
 100:                 if(!this.options.disvalue) {
 101:                     spanValue.style.display="none";
 102:                     valueHeight=this.options.pointHeight;
 103:                 }
 104:                 if(!this.options.distime) {
 105:                     spanTime.style.display="none";
 106:                     timeHeight=0;
 107:                 }
 108:                 var left;
 109:                 if(showPoints.length!=0){
 110:                     left=parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+this.options.barDistance;
 111:                 }
 112:                 else{
 113:                     left=this.options.leftDistance;
 114:                 }
 115:                 
 116:                 showPoint.style.left=left+"px";
 117:                 spanValue.style.left=left+parseInt((this.options.pointWidth-this.options.valueWidth)/2)+"px";
 118:                 spanTime.style.left=left+parseInt((this.options.pointWidth-this.options.timeWidth)/2)+"px";
 119:                                                 
 120:                 if(showPoint.height>this.options.maxHeight)
 121:                 {
 122:                     showPoint.height=this.options.maxHeight;
 123:                 }
 124:                 
 125:                 spanValue.innerHTML=showPoint.value;
 126:                 spanTime.innerHTML=showPoint.time;
 127:                         
 128:                 showPoints.push(showPoint);
 129:                 values.push(spanValue);
 130:                 times.push(spanTime);
 131:                 This.entity.appendChild(showPoint);
 132:                 This.entity.appendChild(spanValue);
 133:                 This.entity.appendChild(spanTime);
 134:                 
 135:                 var percentage=showPoints[i].height/this.options.maxHeight||0;
 136:                 var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage;
 137:                 showPoints[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px";
 138:                 values[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px";
 139:                 times[i].style.top=this.options.height-this.options.bottomDistance-timeHeight+"px";
 140:             }
 141:             var _leng=showPoints.length
 142:             for(var i=0;i<_leng;i++)
 143:             {
 144:                 if(i>0)
 145:                     {
 146:                         This.drawLine(parseInt(showPoints[i-1].style.left),
 147:                                                     parseInt(showPoints[i-1].style.top),
 148:                                                     parseInt(showPoints[i].style.left),
 149:                                                     parseInt(showPoints[i].style.top)
 150:                                                     );
 151:                     }
 152:             }
 153:             This.Constructor.call(This);
 154:         },
 155:         drawLine:function(startX,startY,endX,endY)
 156:         {
 157:             var xDirection=(endX-startX)/Math.abs(endX-startX);
 158:             var yDirection=(endY-startY)/Math.abs(endY-startY);
 159:             var xDistance=endX-startX;
 160:             var yDistance=endY-startY;
 161:             var xPercentage=1/Math.abs(endX-startX);
 162:             var yPercentage=1/Math.abs(endY-startY);
 163:             if(Math.abs(startX-endX)>=Math.abs(startY-endY))
 164:             {
 165:                 var _xnum=Math.abs(xDistance)
 166:                 for(var i=0;i<=_xnum;i++)
 167:                 {
 168:                     var point=document.createElement("div");
 169:                     point.style.position="absolute";
 170:                     point.style.backgroundColor=this.options.lineColor;
 171:                     point.style.fontSize="0";
 172:                     point.style.width="1px";
 173:                     point.style.height="1px";                            
 174:                     
 175:                     startX+=xDirection;
 176:                     point.style.left=startX+this.options.pointWidth/2+"px";
 177:                     startY=startY+yDistance*xPercentage;
 178:                     point.style.top=startY+this.options.pointHeight/2+"px";
 179:                     this.entity.appendChild(point);
 180:                 }
 181:             }
 182:             else
 183:             {
 184:                 var _ynum=Math.abs(yDistance)
 185:                 for(var i=0;i<=_ynum;i++)
 186:                 {
 187:                     var point=document.createElement("div");
 188:                     point.style.position="absolute";
 189:                     point.style.backgroundColor=this.options.lineColor;
 190:                     point.style.fontSize="0";
 191:                     point.style.width="1px";
 192:                     point.style.height="1px";                            
 193:                     
 194:                     startY+=yDirection;
 195:                     point.style.top=startY+this.options.pointWidth/2+"px";
 196:                     startX=startX+xDistance*yPercentage;
 197:                     point.style.left=startX+this.options.pointHeight/2+"px";
 198:                     this.entity.appendChild(point);
 199:                 }
 200:             }
 201:         },
 202:         Constructor:function()
 203:         {
 204:             this.entity.style.position="absolute";
 205:             this.pointBox.innerHTML="";
 206:             this.pointBox.appendChild(this.entity);
 207:         }
 208: }
 209:     window.onload=function(){
 210:         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轴数据
 211:             [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
 212:             );
 213:         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轴数据
 214:             [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
 215:             );
 216:         new gov.Graphic(data,"box");
 217:         new gov.Graphic(data1,"box1",{ pointColor:"#3366ff",lineColor:"#33ffff"});
 218:     }
</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(http://bbs.blueidea.com/attachment.php?aid=103850&k=b1e7b11ca8792f4adcdbea9955e6828a&t=1225441140&noupdate=yes&nothumb=yes) no-repeat;
}
</style></head>
    <body>
    <div id="box"></div>
    <div id="box1"></div>
    </body>
</html>
posted @ 2011-09-20 22:33  lei1016cn  阅读(6775)  评论(0)    收藏  举报