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

標籤：point   運行   form   省份   抓取   產生   柱狀圖   不能   push   

如題，無語且非常鬱悶。

 

要求是根據查詢出來的資料動態產生柱狀圖。但是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。