js 画图--简单的直线图
因为近期，项目用到了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;
}
}
基本上所有的代码都在这里了。。如果哪位需要其他的代码可以与我联系. [email protected] 或者 343886028 QQ 注明 js
下面是所有的代码源码