综合欧美国产视频二区,天天干天天看

　封裝js繪制曲線圖類

作者：ymyang　時(shí)間： 2009-03-31　文檔類型：原創(chuàng)　來(lái)自：藍(lán)色理想

最近開發(fā)彩票分析網(wǎng)站，需要用到j(luò)s繪制分析曲線圖。
參考網(wǎng)上的繪圖代碼，自己封裝了一個(gè)繪圖類，給大家做一個(gè)參考。

引用方法:

new gov.Graphic(par1,par2,par3);

par1 為繪圖數(shù)據(jù)

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軸數(shù)據(jù)[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,
204,205,206,207,208]//x軸數(shù)據(jù)
);

par2 為繪圖的容器層id

par3 為繪圖樣式參數(shù)，可選參數(shù)

默認(rèn)值：
{
       height:170,                 //繪圖區(qū)域高度
       maxHeight:50,              //y軸最高數(shù)值
       barDistance:26,           //x軸坐標(biāo)間距
       topDistance:0,             //上部填充
       bottomDistance:0,        //底部填充
       leftDistance:20,            //左部填充
       pointWidth:5,               //坐標(biāo)點(diǎn)寬度
       pointHeight:5,             //坐標(biāo)點(diǎn)高度
       pointColor:"#ff0000",     //坐標(biāo)點(diǎn)顏色
       lineColor:"#ffd43a",       //連接線顏色
       valueWidth:20,            //y軸數(shù)值寬度
       valueColor:"#000",       //y軸數(shù)值顏色
       timeWidth:20,             //x軸數(shù)值寬度
       timeColor:"#000",       //x軸數(shù)值顏色
       disvalue:true,             //是否顯示y軸數(shù)值
       distime:true              //是否顯示x軸數(shù)值
}

運(yùn)行代碼框
<!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>無(wú)標(biāo)題文檔</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, //繪圖區(qū)域高度 maxHeight:50, //y軸最高數(shù)值 barDistance:26, //x軸坐標(biāo)間距 topDistance:0, //上部填充 bottomDistance:0, //底部填充 leftDistance:20, pointWidth:5, //坐標(biāo)點(diǎn)寬度 pointHeight:5, //坐標(biāo)點(diǎn)高度 pointColor:"#ff0000", //坐標(biāo)點(diǎn)顏色 lineColor:"#ffd43a", //連接線顏色 valueWidth:20, //y軸數(shù)值寬度 valueColor:"#000", //y軸數(shù)值顏色 timeWidth:20, //x軸數(shù)值寬度 timeColor:"#000", //x軸數(shù)值顏色 disvalue:true, //是否顯示y軸數(shù)值 distime:true //是否顯示x軸數(shù)值 } 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軸數(shù)據(jù) [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x軸數(shù)據(jù) ); 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軸數(shù)據(jù) [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x軸數(shù)據(jù) ); 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(/articleimg/2009/03/6562/bg.gif) no-repeat; } </style></head> <body> <div id="box"></div> <div id="box1"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

源碼下載(點(diǎn)擊下載)

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2894005-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2009/6562.asp　

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

更多相關(guān)鏈接

菜鳥跟我學(xué)緩沖效果

手工打造分離式滑動(dòng)門導(dǎo)航菜單

Flash實(shí)用技術(shù)——AS和JS的互動(dòng)

不唐突的JavaScript的七條準(zhǔn)則

JavaScript 圖片切割效果

作者文章

頁(yè)面換膚功能淺析


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx