canvas实现折点图，并有鼠标hover样式

最新推荐文章于 2023-11-29 18:00:00 发布

Take_Dream

最新推荐文章于 2023-11-29 18:00:00 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： H5 前端数据可视化

本文链接：https://blog.youkuaiyun.com/Take_Dream_as_Horse/article/details/54881716

H5 同时被 2 个专栏收录

4 篇文章

订阅专栏

前端数据可视化

3 篇文章

订阅专栏

本文展示了如何使用HTML5的canvas元素来创建一个折点图，并实现鼠标hover时的高亮样式。提供了最终的图表样式示例以及相关HTML代码，感兴趣的读者可以查看GitHub上的完整资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
	    }

	}

   

})

更多可参考：https://github.com/chuanzaizai/line-charts