javascript資料曲線圖例項程式碼
資料曲線圖效果在一些網站有大量的應用,比如對資料的統計或者說走勢的預測之類的,比如說股市的曲線圖,或者銷售量的曲線圖等等,比較直觀,並且還能夠看得出變化趨勢,下面就是一段通過js實現的此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> 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,//繪圖區域高度 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;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軸資料 [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"}); } </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; } </style> </head> <body> <div id="box"></div> <div id="box1"></div> </body> </html>
相關文章
- JavaScript in運算子程式碼例項JavaScript
- JavaScript運動框架程式碼例項JavaScript框架
- JavaScript取餘數程式碼例項JavaScript
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- ajax讀取資料庫資料程式碼例項資料庫
- JavaScript陣列合並程式碼例項JavaScript陣列
- JavaScript倒數計時程式碼例項JavaScript
- JavaScript 表單驗證程式碼例項JavaScript
- table細線表格例項程式碼
- JavaScript刪除元素節點程式碼例項JavaScript
- JavaScript中常用的事件程式碼及例項JavaScript事件
- 解析csv資料繪製曲線圖
- 前端學習程式碼例項-JavaScript阻止事件冒泡前端JavaScript事件
- 資料流圖繪製例項
- canvas繪製拋物線程式碼例項Canvas線程
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- 前端學習程式碼例項-JavaScript 生成隨機數前端JavaScript隨機
- CSS3圖層陰影程式碼例項CSSS3
- JavaScript 點選複製選中文字程式碼例項JavaScript
- Echarts關於tree樹資料渲染圖例最新例項Echarts
- dom操作程式碼例項
- css梯形程式碼例項CSS
- 網頁引用百度地圖例項程式碼網頁地圖
- 網頁中嵌入百度地圖程式碼例項網頁地圖
- 設計模式例項程式碼設計模式
- table表格美化程式碼例項
- 好程式設計師web前端分享在HTML中使用JavaScript例項程式碼程式設計師Web前端HTMLJavaScript
- 設計模式使用例項(5)——建造者模式例項之資料庫連線管理設計模式資料庫
- JavaScript 例項屬性JavaScript
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- JDBC連線MySQL資料庫的方法和例項JDBCMySql資料庫
- CSS3繪製太極圖程式碼例項詳解CSSS3
- delphi 畫圖表,曲線圖
- 前端學習程式碼例項-JavaScript 阻止擊超連結的跳轉前端JavaScript
- canvas刮刮樂程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- CSS空心箭頭程式碼例項CSS