커브(할인) 점 플러그 인

13509 단어
<!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>

좋은 웹페이지 즐겨찾기