前端 - canvas标签画折线图

最新推荐文章于 2023-12-13 17:46:17 发布

sos_nice

最新推荐文章于 2023-12-13 17:46:17 发布

阅读量591

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML

本文链接：https://blog.youkuaiyun.com/sos_nice/article/details/98332067

本文介绍了如何在HTML中利用canvas标签结合JavaScript绘制折线图。首先在HTML中添加canvas元素，接着在JS部分编写代码实现折线图的绘制。参考了相关博客资源。

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

最终效果如下:
在这里插入图片描述
首先在HTML里新增一个canvas标签<canvas id="canvas" width="500px" height="300px" style="border:1px solid black;float:left;"></canvas>
然后JS部分

//获取折线图
function getPolygonalChart(){
	var canvas = document.getElementById('canvas');
	var yFictitious = 10;//y轴每段长度
	var yNunmber = 10;//y轴段数
	var data = [{xAxis:"15:08",yAxis:15},{xAxis:"15:09",yAxis:25},{xAxis:"15:10",yAxis:35}]
	var title = "折线图";
	var titlePosition = "top";
	coordinateAxis(canvas,yFictitious ,yNunmber ,data,title,titlePosition);
}
//画坐标轴
function coordinateAxis(canvas,yFictitious,yNunmber,data,title,titlePosition){
	var ctx = canvas.getContext('2d');
	var width = canvas.width;//获取当前画布的宽度
	var height = canvas.height;//获取当前画布的高度
	var padding = 50;// 坐标轴到canvas边框的边距，留边距写文字
	ctx.beginPath();//由 ctx.beginPath() 开始一条新的路径
	ctx.lineWidth = 1;//设置线条宽度
	
	ctx.moveTo(padding + 0.5,