如題，無語且非常郁悶。

要求是根據查詢出來的數據動態生成柱狀圖。但是ecshop的查詢ajax回調都是已經封裝好了的。根本就不能改。

無奈之下只好百度了一個畫柱狀圖的代碼，每隔2秒抓取頁面數據，重新繪制一次柱狀圖，假裝自己是動態的。郁悶...

隨便上個代碼留個紀念，好歹做了三個小時。ummmm....

   <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=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>

記一次非常無語的生成柱狀圖，js，ecshop。