Javascript绘制分析曲线图

【 tulaoshi.com - Web开发 】

最近开发彩票分析网站，需要用到js绘制分析曲线图。
参考网上的绘图代码，自己封装了一个绘图类，给大家做一个参考。

引用方法:

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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /title无标题文档/titlescriptvar 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;iThis.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.heightthis.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.lengthfor(var i=0;i_leng;i++){if(i0){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"});}/scriptstyle 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.jpg) no-repeat;}/style/headbodydiv id="box"/divdiv id="box1"/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

源码下载(点击下载)