<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
    <script type="text/javascript">
    var VMLel = ['line','stroke','polyline','fill','oval','group','rect','textbox','shape'];
    var style = document.createStyleSheet();
    for (var i=0,l=VMLel.length;i<l;i++) {
    style.addRule('v\\:'+VMLel[i], "behavior: url(#default#VML);");
    }
    
    ///用于画横或竖的平行线
    lines=function(lineColor,lineStyle,lineNum,lineX0,lineY0,lineInterval,length,log,o){//log 为真横线,假竖线
        var x0,x1,y0,y1,line,stroke,i;
        if(log){
            for(i=0;i<lineNum;i++){            
                y0=y1=lineY0+i*lineInterval;
                x0=lineX0;
                x1=lineX0+length;
                line=document.createElement("v:line");
                line.from=x0+','+y0;
                line.to=x1+','+y1;  
                stroke=document.createElement("v:stroke");
                stroke.dashstyle=lineStyle;
                stroke.color=lineColor;
                line.appendChild(stroke); 
                o.appendChild(line);    
            }
        }
        else{
            for(i=0;i<lineNum;i++){            
                x0=x1=lineX0+i*lineInterval;
                y0=lineY0;
                y1=lineY0+length;               
                line=document.createElement("v:line");
                line.from=x0+','+y0;
                line.to=x1+','+y1;  
                stroke=document.createElement("v:stroke");
                stroke.dashstyle=lineStyle;
                stroke.color=lineColor;
                line.appendChild(stroke); 
                o.appendChild(line);    
            } 
        }    
    }
    ///画个圆圈鼠标移上去先去显示信息,
   cycle=function(x,y,dia,p,t,e,o){
        var tit='p:'+p+'t:'+t+'e:'+e;
        cyc=document.createElement("v:oval");
        cyc.title=tit;
        cyc.style.width=dia;
        cyc.style.height=dia;
        cyc.style.left=x-dia/2;
        cyc.style.top=y-dia/2;
        cyc.fillcolor="#008284";
        o.appendChild(cyc);
    }
    ////文字填写
    text=function(x,y,w,h,fsize,content,o){
    //随便创建个vml元素,把文本嵌套在这个元素里面,起到图形缩放时,文字位置相对网格固定
        rect=document.createElement("v:shape");
        rect.style.left=x;
        rect.style.top=y;
        //rect.style.width=w;
        //rect.style.height=h;
        rect.filled=false;
        textbox=document.createElement("v:textbox");        
        textbox.style.fontSize=fsize;
        textbox.inset='0,0,0,0';
        textbox.innerHTML=content;
        rect.appendChild(textbox);       
        o.appendChild(rect);     
    }    
    
    
    //初始化画布
    var canvas=document.createElement("v:group");
    canvas.style.width=1280+'px';
    canvas.style.height=1024+'px';    
    canvas.coordsize="12800,10240";
    canvas.id="canvas";
   
   var days=35; //要显示的天数 即横多少格子
   var times=9; //时间数      即竖直多少个格子
   var gridWidth=350;//网格宽度
   //--------------生成网格============
   //主网格 
   var maingrid=document.createElement("v:group");
   maingrid.id="mgrid";
   maingrid.style.left=600;
   maingrid.style.top=0;
   maingrid.style.width=10000;
   maingrid.style.height=3000;   
   maingrid.coordsize='10000,3000';   
   lines("red","Solid",times+1,0,0,gridWidth,days*gridWidth,true,maingrid);
   lines("red","Solid",days+1,0,0,gridWidth,times*gridWidth,false,maingrid);   
   canvas.appendChild(maingrid);
   
   //次网格
   var subgrid=document.createElement("v:group");
   subgrid.id="sgrid";
   subgrid.style.left=600;
   subgrid.style.top=0;
   subgrid.style.width=10000;
   subgrid.style.height=3000;   
   subgrid.coordsize='10000,3000';   
   lines("red","Dash",times,0,gridWidth/2,gridWidth,days*gridWidth,true,subgrid);
   lines("red","Dash",days,gridWidth/2,0,gridWidth,times*gridWidth,false,subgrid);
   canvas.appendChild(subgrid);
   //--------生成网格结束----------------------
    
   //填写资料   
   var data=document.createElement("v:group");
   data.id="sgrid";
   data.style.left=600;
   data.style.top=0;
   data.style.width=10000;
   data.style.height=3000;   
   data.coordsize='10000,3000';   
   var x,y;       
   var x0=gridWidth/2;
   var y0=gridWidth*1.5;
   for(var i=0;i<days;i++){
      for(var j=0;j<times-1;j++){
         x=i*gridWidth+x0; 
         y=j*gridWidth+y0;
         //主要下面这两句慢,一个画圆圈,一个填写数据,一共要填个数据,现在只填一个就慢死了
         cycle(x,y,gridWidth/10,1016,28,28,data);
         text(x-x0,y-x0,gridWidth/2,gridWidth/2,10,"d",data);      
      }
   }
   canvas.appendChild(data);
   
///上面是画图代码window.onload=function(){   
    var div=document.getElementById("abc");
    div.appendChild(canvas);
}
function zoom(){
var sg=document.getElementById("sgrid");
sg.style.display="none";
}
</script><title>VML</title>
</head>
<body>
    
    <div id="abc" >
    </div>
    <div>
    <input id="s" type="button" onclick="zoom()" />
    </div>
    
</body>
</html>