一哥们问我如何用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.length142: 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: else183: {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;
677px;
height:180px;
background:url(http://bbs.blueidea.com/attachment.php?aid=103850&k=b1e7b11ca8792f4adcdbea9955e6828a&t=1225441140&noupdate=yes¬humb=yes) no-repeat;
}
</style></head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>