1、直接上圖，看最終樣式

2、html代碼

<div class="myCanvas-cont">		<canvas id="myCanvas" width="1100" height="500">		您的瀏覽器暫不支持canvas		</canvas>	</div>3、js代碼
$(function(){	var c=document.getElementById("myCanvas");	var cxt=c.getContext("2d");	/*開始繪制外邊框*/	cxt.beginPath();	cxt.strokeStyle   = '#cdc9c4';	cxt.lineWidth = 4;	cxt.moveTo(100,400);	cxt.lineTo(1020,400);	cxt.stroke();	cxt.beginPath();	cxt.strokeStyle   = '#cdc9c4';	cxt.lineWidth = 4;	cxt.moveTo(100,400);	cxt.lineTo(100,0);	cxt.stroke();	/*開始繪制橫向內邊框*/	cxt.beginPath();	cxt.strokeStyle='#e7e5e2';	cxt.lineWidth = 1;	for(let i=1;i<=6;i++){		cxt.moveTo(100,400-60*i);		cxt.lineTo(980,400-60*i);		cxt.stroke();	}	/*開始繪制豎向內邊框*/	for(let i=1;i<=11;i++){		cxt.moveTo(100+80*i,400);		cxt.lineTo(100+80*i,40);		cxt.stroke();	}		/*開始繪制豎軸文字*/	cxt.font = "16px SimHei";    cxt.fillStyle = "#00c5de";    //從坐標點(50,345)開始繪制文字    for(let i=0;i<=6;i++){    	cxt.fillText(10*i+"萬", 50, 405-60*i);    }    /*開始繪制橫軸文字*/    for(let i=1;i<=12;i++){    	cxt.fillText("2017-"+i, 80*i, 440);    }    /*開始繪制圓點(每月數據)*/    ////模擬的每月數據    var arr=[22,40,50,60,32,11,0,45,50,15,20,55];       //開始繪制(圓點Y軸坐標)    var yArr=[];    for(let i=0,len=arr.length;i<len;i++){    	yArr.push(400-arr[i]*6);    }    for(let j=0,len=yArr.length;j<len;j++){    	//畫實心圓    	cxt.beginPath();    	cxt.fillStyle="#00c5de";		cxt.arc(100+80*j,yArr[j],9,0,Math.PI*2,true);		cxt.fill();		cxt.closePath();		//繪制連接圓的折線		cxt.beginPath();		cxt.strokeStyle='#00c5de';		cxt.lineWidth = 1;		cxt.moveTo(100+80*j,yArr[j]);		cxt.lineTo(100+80*(j+1),yArr[j+1]);		cxt.stroke();    }		c.addEventListener("mousemove", function (evt) { 	  var mousePos = getMousePos(c, evt); 	  var pagex=mousePos.x,	  	  pagey=mousePos.y;	  for(let j=0,len=yArr.length;j<len;j++){	 	//鼠標移入圓的范圍,給圓添加新樣式	 	if(pagex>(100+80*j-9) && pagex<(100+80*j+9) && pagey>(yArr[j]-9) && pagey<(yArr[j]+9)){	 		//畫實心圓	    	cxt.beginPath();	    	cxt.fillStyle="#c9302c";			cxt.arc(100+80*j,yArr[j],9,0,Math.PI*2,true);			cxt.fill();			cxt.closePath();	 	}else{	 		//清除鼠標移入時的圓	 			 		//再從新繪制圓 		 	cxt.beginPath();	    	cxt.fillStyle="#00c5de";			cxt.arc(100+80*j,yArr[j],9,0,Math.PI*2,true);			cxt.fill();			cxt.closePath();	 	}    	      } 	}, false); 	 //獲取鼠標在canvas畫布上的位置(**不是瀏覽器窗口的鼠標位置)	 function getMousePos(canvas, evt) { 	   var rect = canvas.getBoundingClientRect(); 	   return { 	     x: evt.clientX - rect.left * (canvas.width / rect.width),	     y: evt.clientY - rect.top * (canvas.height / rect.height)	   }	 }	//定義清除圓形區域函數	function clearCircle(oc,x,y,r){	    for(var i=0; i< Math.round(Math.PI * r); i++){	        var angle = (i / Math.round(Math.PI * r)) * 360;	        oc.clearRect(x, y, Math.sin(angle * (Math.PI / 180)) * r , Math.cos(angle * (Math.PI / 180)) * r);	    }	}   })