<canvas id="a_canvas" width="1000" height="700"></canvas>
　　<script type="text/javascript" language="JavaScript">   setInterval("xixi()","2000"); //两秒运行一次
　　　　 36   function xixi(){
 37   var c=document.getElementById("a_canvas");  //清空画布 38   var cxt=c.getContext("2d");   39   c.height=c.height;   40   41   var a=document.getElementById("table").getElementsByTagName("td"); 42   var aa =""; 43   var bb =""; 44   j=1000;x=0;y=0; 45     for (var i=0;i<a.length;i++){ 46         if(a[i].innerHTML=="合计") 47         { 48             j=i+2; 49         } 50         if(i==j) 51         { 52         break; 53         } 54         else{ 55          56         if(i%2) 57         {aa =aa+a[i].innerHTML+",";} 58         else 59         {bb =bb+"‘"+a[i].innerHTML+"‘,";} 60         } 61      62     } 63  64 data=http://www.mamicode.com/aa.split(","); 65  xinforma=bb.split(","); 66        67   68           // 获取上下文 69           var a_canvas = document.getElementById(‘a_canvas‘); 70           var context = a_canvas.getContext("2d"); 71   72   73           // 绘制背景 74           var gradient = context.createLinearGradient(0,0,0,300); 75   76   77          // gradient.addColorStop(0,"#e0e0e0"); 78           //gradient.addColorStop(1,"#ffffff"); 79   80   81           context.fillStyle = gradient; 82   83           context.fillRect(0,0,a_canvas.width,a_canvas.height); 84   85           var realheight = a_canvas.height-15; 86           var realwidth = a_canvas.width-40; 87           // 描绘边框 88           var grid_cols = data.length; 89           var grid_rows = 4; 90           var cell_height = realheight / grid_rows; 91           var cell_width = realwidth / grid_cols; 92           context.lineWidth = 1; 93           context.strokeStyle = "#a0a0a0"; 94   95           // 结束边框描绘 96           context.beginPath(); 97           // 准备画横线 98           /*for(var row = 1; row <= grid_rows; row++){ 99             var y = row * cell_height;100             context.moveTo(0,y);101             context.lineTo(a_canvas.width, y);102           }*/103           104             //划横线105             context.moveTo(0,realheight);106             context.lineTo(realwidth,realheight);107                 108              109             //画竖线110           context.moveTo(0,20);111            context.lineTo(0,realheight);112           context.lineWidth = 1;113           context.strokeStyle = "black";114           context.stroke();115               116  117           var max_v =0;118           119           for(var i = 0; i<data.length-1; i++){120              max_v =data[i];121           }122           max_v = max_v * 1.1;123           // 将数据换算为坐标124           var points = [];125           for( var i=0; i < data.length; i++){126             var v= data[i];127             var px = cell_width *　(i +1);128             var py = realheight - realheight*(v / max_v);129             //alert(py);130             points.push({"x":px,"y":py});131           }132  133           //绘制坐标图形134           for(var i in points){135             var p = points[i];136             context.beginPath();137             context.fillStyle="green";138             context.fillRect(p.x,p.y,15,realheight-p.y);139              140             context.fill();141           }142           //添加文字143           for(var i in points)144           {  var p = points[i];145             context.beginPath();146             context.fillStyle="black";147             context.fillText(data[i], p.x + 1, p.y - 15);148              context.fillText(xinforma[i],p.x + 1,realheight+12);149              context.fillText(‘省份‘,realwidth,realheight+12);150              context.fillText(‘店面数量‘,0,10);151         } 152       }153              154 //-->155 </script>