一哥们问我如何用JS绘制曲线图,被我嗤之以鼻, 随后搜索了一下, 竟然发现JS居然真的可以弄,虽然效果想对简单,但是这可是实打实的JS only啊…由此可见, 学习一途,任重道远…
文章来自:
这是代码:
无标题文档
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
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.οnlοad=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 >
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¬humb=yes) no-repeat;
}