曲线(折现)带点的插件
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title></title> <script src="http://webgis.weather.com.cn/map/j/raphael.js"></script> <script src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script> <style type="text/css"> body{ } </style> </head> <body style="background: #4097DB;"> <div id="cc"></div> <div id="bb"></div> <script type="text/javascript"> var H = { _getArrMax:function(arr){ return Math.max.apply(Math,arr) || null; }, _getArrMin:function(arr){ return Math.min.apply(Math,arr) || null; }, len:0, arrTem:[], _clearArr:function(){ this.arrTem=[]; this.arrCircle = []; this.arrPath = []; }, _initWeaData:function(DataLIneY){//参数为 一天的数组 this._clearArr(); this.arrTem = this.arrTem.concat(DataLIneY); this.len = this.arrTem.length; //生成 svg的circle数据 和 path的线数据 var temMin = this._getArrMin(this.arrTem);//求出这一组温度的最大最小值 var temMax = this._getArrMax(this.arrTem); //temD 一摄氏度 = X像素高 if(temMin != temMax){ var temD = (this.height-40)/(temMax - temMin); }else{ var temD = (this.height-40)/1; } this.cel_w = this.width/this.len; var that = this; $.each(this.arrTem,function(i,v){ var circleX = that.cel_w*i+that.cel_w/2; var circleY = (temMax-that.arrTem[i])*temD+20; that.arrCircle.push({'x':circleX,'y':circleY}); that.arrPath.push([circleX,circleY]); }) this.svgPath = this.arrPath.join(','); }, arrPath:[], width:680, height:70, cel_w:0, svgPath:'', arrCircle:[] } function CREAT_H_obj(options){ $.extend(this,options); } CREAT_H_obj.prototype = H; function DrawLine(options){ var Line = new CREAT_H_obj(options); Line._initWeaData(Line.lineData || []); var paper = Raphael(Line.domId.replace('#',''),Line.width,Line.height); //底线 paper.path('M10,20').attr({"stroke": Line.lineColor,"stroke-width":Line.lineStrokewidth,"path":"M"+Line.arrPath.slice(Line.pastNumber).join(',')}); //前线 paper.path('M10,20').attr({"stroke":Line.lineColor,"stroke-width":Line.lineStrokewidth,"opacity":"0.3","path":"M"+Line.arrPath.slice(0,Line.pastNumber+1).join(',')}); var objCircle = [],space; //存储点circle对象的 数组 for(var i = 0; i<= Line.len-1; i++){ var circleX = Line.arrCircle[i].x; var circleY = Line.arrCircle[i].y; if(options.position=='up'){ var space = -15; }else{ var space = 15; } var circleColor = options.circleColor; if (i<options.pastNumber) { objCircle.push(paper.circle(10,circleY,options.circleWidth).attr({'fill':circleColor,"opacity":"0.3",'stroke':circleColor}).animate({'cx':circleX-options.circleWidth},500)); paper.text(circleX-15,circleY+space,Line.lineData[i]+'℃'||'').attr({ "fill":"#aaa", "font-size":"12px", "text-anchor":"start" }); }else{ objCircle.push(paper.circle(10,circleY,options.circleWidth).attr({'fill':circleColor,'stroke':circleColor}).animate({'cx':circleX},500)); paper.text(circleX-15,circleY+space,Line.lineData[i]+'℃'||'').attr({ "fill":"#fff", "font-size":"12px", "text-anchor":"start" }); }; } } </script> <script type="text/javascript">
//调用插件
var data=[31,34,36,34,33,31,31,30,30] new DrawLine({ domId:'#cc', width:800, height:100, lineData:data,//温度数据 circleColor:'#fff', circleWidth:4, lineColor:'#fff', lineStrokewidth:2, pastNumber:1, position:'up', animate:0 }); var data1=[1,12,50] new DrawLine({ domId:'#bb', width:800, height:100, lineData:data1,//温度数据 circleColor:'#fff', circleWidth:4, lineColor:'#fff', lineStrokewidth:2, pastNumber:1, position:'down', animate:0 }); </script> </body> </html>