js 画图--简单的直线图

最新推荐文章于 2020-10-26 10:44:55 发布

最新推荐文章于 2020-10-26 10:44:55 发布 · 367 阅读

文章标签：

#IE #互联网 #QQ #Firefox #Google

javascript 专栏收录该内容

13 篇文章

订阅专栏

因为近期，项目用到了JS画图，从网上搜了下，有用DIV一个一个联接成的直线图，那个当行数超过五百以上的时候，就会出现效率问题。

后又找到了适合IE 的 VML 不适合FIREFOX的。。但是互联网是强大的。。从高人处知道了一个 excanvas。google开源的，可以在IE中模拟出来。。也就是说一些基本的都可以模拟出来。。OK。这就是要我要的了。。

首先，当然需要下载环境了。。

现在我们再来画个简单的HTML页面，里面有一张表格，表格里面大概有几行数据。。这数据就是我们要画直线的了。。

样式:

body {
margin:0px;padding:0px;

}
body,td,th{
 font-size:12px;
}
div{
	width:960px;
	}
table{
	 color:#464646;
	 font-family:Arial;
	}
 tr{
		background:#dddffd;
		}
 
       td{
			width:18px;height:18px;height:18px;text-align:center;
		}
		 
.gray{
				
} 
.blue{
	background:blue
}

.red{
	background:red
}

.gray_a{
	background:gray;
	}
.tdback{
background:#DBDBDB none repeat scroll 0 0;
height:3px;
}

HTML页面

<div>
<table>
	<tbody>
		<tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr>
		<tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td></tr>
		<tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr>
		<tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr>
		<tr class="tdback"><td colspan="17"></td></tr>
		<tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr>
		<tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr>
		<tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td></tr>
		<tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr>
		<tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr>
		<tr class="tdback"><td colspan="17"></td></tr>
		<tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr> 
		 
</tbody>
</table>

</div>

js 代码:

<script> 

<!--
/**
 画布初始化。
 以表格行总数-1 即为需要生成的画布。
 id 表格需要呈现的id 或class
*/
function paintDiv(id){
 var ary = $(id).get();
  
  var size = $(ary).size();
  
 
  var pre= null;//上一个坐标点
  if(size > 1)  pre = $(ary).get(0);
  
  var str ="";//定义画布字符串
  
  var w = 20;//定义宽度20px
  
  var h = 20;//定义高度20px
  
 
  var curId = id;
 
  curId = id.replace(/\./g,'');
 
  for(var i=1;i<size;i++){
      var next = $(ary).get(i);
	  //得到上一X，Y坐标点。
	  
	  var x0 =  parseInt(pre.offsetLeft);//宽
	  
	  var y0 = parseInt(pre.offsetTop);//高
	  
	  var x1 = parseInt(next.offsetLeft);//宽
	  
	  var y1 = parseInt(next.offsetTop);//高
	  
	  //画布左上角坐标。。如果点在起点在左，那么第一个坐标的X点《第二点的X点。反之，在右，第二个坐标的X点》第一个坐标X点。
	  //如果是同一列，那么二者X坐标点应该是相同的。。
	  
	  var w0 =0;//宽
	  var h0 = 0;//高
	  
	  var width = 0;
	  var height = h;
	  
	  var left = -1;
	  if((x0 - x1)>0) left = -1;//第二个坐标点位于左，第一个坐标位于右。
	  else if((x0-x1)==0) left = 0;//第二个坐标点与第一个坐标点，在同一列。
	  else if((x0-x1)<0) left =1;//第二个坐标点位于右。第一个坐标位于左。
	  
	  if(left == 1){
	     	w0 = x0 +w/2 ;//宽度 2
		 h0 = y0+h/2;//2
		 
		 width = (x1 - x0) ;
		 height = (y1-y0);
	 }else if(left == 0){
	   	 h0 = y0 +h/2;//2
		w0 = x0;
	    
		 width = w;
		 height = (y1 - y0) ;
	}else if(left == -1){
	    	 w0 = x1+w/2;//2
		 h0 = y0 +h/2;//2
		 
		 width =  x0 - x1 ;
		 height = (y1-y0);
	}
	 
	   document.write("<canvas id="+curId+i+" width="+width+" height="+height+" class=n"+curId+" style='position:absolute;top:"+h0+"px;left:"+w0+"px;'></canvas>");
	 	   x0=0;y0=0;x1=0;y1=0;
	   
	  //把下一坐标对象赋给上一个坐标
            pre = null;
	  pre = next;
	 
      }
 
 }
 paintDiv('.blue');
 paintDiv('.red');
 //
 
//--> 
 </script>

上面的JS代码用于根据表格中的小格，生成多少个 canvas

下面这个才是真正用于画线的。

<script>
 /**
  x0  起点坐标 X
  Y0  起点坐标 Y
  X1  终点坐标 X
  Y1  终点坐标 Y
  ID  画布ID
  COLOR 线颜色 默认为 green
  lineWidth 线大小。默认为1
 **/
 function drawLine(x0,y0,x1,y1,id,color,lineWidth){
   var ctxt = document.getElementById(id).getContext('2d');
    ctxt.save();
	ctxt.strokeStyle =color==null?"green":color;
	ctxt.lineWidth = lineWidth==null?1:lineWidth;
     
	ctxt.beginPath();
    ctxt.moveTo(x0 , y0);
    ctxt.lineTo(x1, y1);
    ctxt.closePath();
    ctxt.stroke();
	ctxt.restore();
 }

 
 /**
  画布
 */
function canvasLine(pointId){

   
  var cavs = $(pointId).get();
  //var size = $(canvasId).size();//画布
  //$("#size").text(size);
  var ary = $(pointId).get();//坐标点样式
  var size = $(ary).size();
  
 
  var pre= null;//上一个坐标点
  if(size > 1)  pre = $(ary).get(0);
  
  var str ="";//定义画布字符串
  
  var w = 20;//定义宽度20px
  
  var h = 20;//定义高度20px
  
 
 
  for(var i=1;i<size;i++){
      var next = $(ary).get(i);
	  //得到上一X，Y坐标点。
	  
	  var x0 =  parseInt(pre.offsetLeft);//宽
	  
	  var y0 = parseInt(pre.offsetTop);//高
	  
	  var x1 = parseInt(next.offsetLeft);//宽
	  
	  var y1 = parseInt(next.offsetTop);//高
	  
	  //画布左上角坐标。。如果点在起点在左，那么第一个坐标的X点《第二点的X点。反之，在右，第二个坐标的X点》第一个坐标X点。
	  //如果是同一列，那么二者X坐标点应该是相同的。。
	  
	  var w0 =0;//宽
	  var h0 = 0;//高
	  
	  var width = 0;
	  var height = h;
	  
	  var left = -1;
	  if((x0 - x1)>0) left = -1;//第二个坐标点位于左，第一个坐标位于右。
	  else if((x0-x1)==0) left = 0;//第二个坐标点与第一个坐标点，在同一列。
	  else if((x0-x1)<0) left =1;//第二个坐标点位于右。第一个坐标位于左。
	  var pontId = pointId.replace(/\./g,'');
	  if(left == 1){
	     w0 = 0 ;//高度 
		 h0 = 0;
		 
		 width = (x1 - x0);
		 height = y1-y0;
 		 drawLine(w0,h0,width,height,pontId+i);
	  }else if(left == 0){
	    w0 = w/2;
	    h0 = 0 ;
		 width = w/2;
		 height = (y1 - y0) ;
		 
		 drawLine(w0,h0,width,height,pontId+i);
	  }else if(left == -1){
	     w0 = x0-x1;
		 h0 = 0 ;
		 
		 width =  0;
		 height = (y1-y0);
		drawLine(w0,h0,width,height,pontId+i);
	  }

	   x0=0;y0=0;x1=0;y1=0;
	   
	  //把下一坐标对象赋给上一个坐标
      pre = null;
	  pre = next;
	 
 }


 
}

基本上所有的代码都在这里了。。如果哪位需要其他的代码可以与我联系. wrong1111@126.com 或者 343886028 QQ 注明 js

下面是所有的代码源码