用canvas画外汇数据走势图.

        例子显示地址:http://www.169gold.com/elephant/pic/index.html

    

       下载地址:https://github.com/fyddaben/Html5CanvasDatas

      由于初步学习MVC前端编程，写的很乱，还请凑活着看吧

        

drawTool.prototype={
		initDatas:function(){
				 //初始化数据
				 this.dataUtil.initDatas();
				 this.dataUtil.getMyzsRecords();
        },
	//画X，y轴的方法
	     drawXy:function(){
          
		      var  dTool=this.cxt;
		      dTool.strokeStyle="";
		      //移动原点，至XY的交汇中心
		      dTool.translate(50,350);
		      //画x轴，长度为480 
			  dTool.moveTo(0,0);
			  dTool.lineTo(550,0);
			  dTool.stroke();
		      //画y轴，长度为
			  dTool.moveTo(0,0);
			  dTool.lineTo(0,-320);
			  
			  
			  
			  dTool.stroke();
		},
	     //画x轴刻度
	     drawXK:function(){
			   
			 //获取所有数据的开始时间
			 var FirstTime=this.dataUtil.getFirstTime();
			
			 var hour=parseInt(FirstTime.substring(11,13));
             
             var min=parseInt(FirstTime.substring(14,16));
             
		     //假设1px为1分钟的时间, 
			  var  dTool=this.cxt;
			  //首先移到第一个小时显示的地方
			  var firtX=60-min;
			  
			  dTool.moveTo(firtX,0); 
			  dTool.lineTo(firtX,-10); 
			  dTool.fillText(hour+1,firtX,13);
			  for(var i=1;i<=8;i++){
			  	//画刻度
				dTool.moveTo(firtX+60*i,0);
			    dTool.lineTo(firtX+60*i,-10);
			   
		        //写刻度名称
			    dTool.fillText(hour+i+1,firtX+60*i,13);
			  }
			  
			  
			  
			  
			   dTool.stroke();

        },
         //画y轴刻度
         drawYK:function(){
        	
            
        	var zuixinBigest=this.dataUtil.getZuixinBigest();//得到zuixin的最大

              var zuixinSmallest=this.dataUtil.getZuixinSmallest();//得到zuixin的最小
              
              var FakeK=(zuixinBigest-zuixinSmallest)/4;
              
              this.fakeYk=FakeK;
              this.ZuixinSmallY=zuixinSmallest;
              this.ZuixinBigestY=zuixinBigest;

              var RealK=300/4;

              var  dTool=this.cxt;

              for(var i=0;i<=4;i++){
                   
                   //画刻度
				  	dTool.moveTo(0,-i*RealK);
				    dTool.lineTo(10,-i*RealK);
				    
			        //写刻度名称
			        var name=(zuixinSmallest+i*FakeK).toFixed(4);
			        dTool.fillText(name,-40,-i*RealK);
              }
              dTool.stroke();

         },
         //画出所有的点，并连接成曲线
         drawPic:function(){
                
                 var myzs=this.dataUtil.myzs;
                 var  dTool=this.cxt;
                 dTool.beginPath();
                 dTool.strokeStyle = "rgb(45,97,153)";//  
                 dTool.fillStyle="rgb(164,209,228)";
                 var index=0;
                 var length=myzs.length;
                 console.log(length);
                 var firstX=null;
                 var endX=null;
                 var FirstTime=this.dataUtil.getFirstTime();
     			
    			 var Firsthour=parseInt(FirstTime.substring(11,13));
                 
                 var Firstmin=parseInt(FirstTime.substring(14,16));
                 var FirstAllMin=Firsthour*60+Firstmin;
                for(var i in myzs){
                    
                    var time=myzs[i].nowdate;
                   
                    //根据当前时间计算时间点在x轴的位置

                    var hour=parseInt(time.substring(11,13));
                    
                    var min=parseInt(time.substring(14,16));
                   // console.log(hour+":"+min);
                    //当前x元素在x轴占有几个单元格.
                    
                    var unitXCm=hour*60+min-FirstAllMin;
                    
                    //当前x元素在x轴的实际x,设定1px为1分钟
                    var dotX=unitXCm;
                    //y轴每个单元格的长度
                    var realUnity=Math.round(300/((this.fakeYk.toFixed(4))*10000*4));
                    
                    //当前
                    var zuixin=(myzs[i].zuixin-this.ZuixinSmallY)*10000;
                    
                    var dotY=Math.round(-(realUnity*zuixin));
                    
                  //  console.log(dotX+","+dotY);
                    //画连线
				  	if(index==0){
				  		dTool.strokeStyle = "rgb(164,209,228)";
				  		dTool.moveTo(dotX,0);
				  		firstX=dotX;
				  		dTool.lineTo(dotX,dotY);
				  		dTool.stroke();
				  	}else {
				  		dTool.strokeStyle = "rgb(45,97,153)";
				  		dTool.lineTo(dotX,dotY);
				  		
				  	}
				  	if(index==(length-1)){
				  		endX=dotX;
				  	}
                    index++;
                    
                }
                dTool.lineTo(endX,0);
                dTool.lineTo(firstX,0);
                dTool.closePath();
                dTool.fill();
                dTool.stroke();


         }
}