记一次非常无语的生成柱状图，js，ecshop。

Posted 2020-10-02

如题，无语且非常郁闷。

 

要求是根据查询出来的数据动态生成柱状图。但是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>