SOURCE

$(function(){
        // 统计图
        var num=[200,600,400,700,250,500,190];
		var week=['4-11','4-12','4-13','4-14','4-15','4-16','4-17'];
		var canv=document.getElementById("can");
		var ctx=canv.getContext("2d");
		var col=["red","blue","green"]
		var j=0,j1=0,j2=0,jiao=0;
		var sun=0;
		var xnum=1000/10;
		var ynum=300/10;
		for(var i=0; i<num.length;i++){
		sun=sun+num[i];
		//alert(sun)
		ctx.font="22px Arial"
		}
		for(var i=1; i<=10;i++){
			//ctx.lineWidth=0.5;
			ctx.beginPath();
			ctx.strokeStyle="#88c0f2";
			ctx.fillStyle="#188618";
			ctx.moveTo(50,i*35+50)
			ctx.lineTo(canv.width-60,i*35+50)
			//alert(i*35+50)
			ctx.stroke();
			ctx.fillText(1000-i*xnum,20,i*35+50);
			//ctx.fillText(100-i*ynum,canv.width-50,i*35+50);
			ctx.fill();
			}
		
		for(var i=1; i<=7;i++){
			//ctx.lineWidth=0.5;
			ctx.beginPath();
			ctx.strokeStyle="#88c0f2";
			ctx.moveTo(i*100,50)
			ctx.stroke();
			ctx.fillStyle="#000";
			ctx.fillText(week[i-1],i*100-10,canv.height-80);
			ctx.fill();
			}
		for(var i=0; i<10;i++){
			ctx.beginPath();
			ctx.strokeStyle="#188618";
			ctx.fillStyle="#188618";
			if(i==0){
			ctx.moveTo(100,400-num[i]/100*35)	
				}
				else{
				ctx.moveTo(i*100,400-num[i-1]/100*35)		
					}
			ctx.lineTo(100+i*100,400-num[i]/100*35)
			ctx.fillText(num[i],100+i*100,400-num[i]/100*35);
			ctx.stroke();
			}
		for(var i=0; i<10;i++){
			ctx.beginPath();
			ctx.strokeStyle="#e04b39";
			ctx.fillStyle="#e04b39";
			if(i==0){
			ctx.moveTo(100,400-num1[i]/30*35)	
				}
				else{
				ctx.moveTo(i*100,400-num1[i-1]/30*35)		
					}
			ctx.lineTo(100+i*100,400-num1[i]/30*35)
			ctx.fillText(num1[i],100+i*100,400-num1[i]/30*35);
			ctx.stroke();
			}
	})

<div class="canvas">
    		<canvas id="can" width="800" height="500"></canvas>
    		<p>说明：渠道统计是帮助商户统计商户在查询的时间段，渠道用户的总和</p>
    	</div>