用canvas来绘制柱状图，简单明了，绝对实用！

首先借助图片画一个简单的柱状图

var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		draw()
		 
		function draw(){
			var image = new Image();//创建Image对象
			image.src='images/1.png';//指定路径
			image.onload=function(){//图片加载完成后执行的函数
			  ctx.drawImage(image,0,0);//绘制图片
		      ctx.beginPath();
		      //这里开始画线条
		      var dis=30;
		      for(var i=0;i<4;i++){
		      	ctx.beginPath();
		      	var color = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色
		      	ctx.fillStyle=color;
		      	
		      	var height = Math.round(Math.random()*80+20);//在一定范围内随机高度
		        ctx.fillRect(50+dis*i,115, 20, -height);//绘制一个柱状
		      }
		      //执行绘画
		      ctx.stroke();
			}
		}
		

效果如下：

绘制一个比较完善的

	var canvas = document.getElementById('canvas');
		canvas.width='600';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		var x0=30,//x轴0处坐标
			y0=280,//y轴0处坐标
			x1=560,//x轴顶处坐标
			y1=30,//y轴顶处坐标
			dis=30;
			
		draw();
			
		function draw(){
			  
			  //先绘制X和Y轴
			 ctx.beginPath();
			 ctx.lineWidth=1; 
			 
		     ctx.moveTo(x0,y1);//笔移动到Y轴的顶部
		     ctx.lineTo(x0,y0);//绘制Y轴
		     ctx.lineTo(x1,y0);//绘制X轴
		     ctx.stroke();
		       
		     //绘制虚线和Y轴值  
		     var yDis = y0-y1;
		     var n=1;
		     ctx.fillText(0,x0-20,y0);//x,y轴原点显示0
		     while(yDis>dis){
		     	 ctx.beginPath();
		     	 //每隔30划一个虚线
		     	 ctx.setLineDash([2,2]);//实线和空白的比例
		     	 ctx.moveTo(x1,y0-dis);
		     	 ctx.lineTo(x0,y0-dis);
		     	 ctx.fillText(dis,x0-20,y0-dis);
		     	 //每隔30划一个虚线
		     	 dis+=30;
		     	 ctx.stroke();
		     }
		     
		     var xDis=30,//设定柱子之前的间距
		     	 width=40;//设定每个柱子的宽度
		   	  //绘制柱状和在顶部显示值
		      for(var i=0;i<8;i++){//假设有8个月
		      	ctx.beginPath();
		      	var color = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();//随机颜色
		      	ctx.fillStyle=color;
		      	ctx.font = "13px scans-serif";//设置字体
		      	
		      	var height = Math.round(Math.random()*220+20);//在一定范围内随机高度
		      	
		      	var rectX=x0+(width+xDis)*i,//柱子的x位置
		      		rectY=height;//柱子的y位置
		      	
		      	ctx.fillText((i+1)+'月份',rectX,y0+15);//绘制最下面的月份稳住
		      	
		        ctx.fillRect(rectX,y0, width, -height);//绘制一个柱状
		        
		        ctx.fillText(rectY,rectX+10,280-rectY-5);//显示柱子的值
		      }
		}
		

应该是比较完善了 

代码中写了详细的注释就不多解释了