主页 / 网络编程 /

JavaScript canvas绘制折线图

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了JavaScript canvas绘制折线图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas绘制折线图的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 canvas {
 border: 1px solid #c;
 }
 </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
 /1.构造函数/
 var LineChart = function (ctx) {
 /获取绘图工具/
 this.ctx = ctx || document.querySelector('canvas').getContext('2d');
 /画布的大小/
 this.canvasWidth = this.ctx.canvas.width;
 this.canvasHeight = this.ctx.canvas.height;
 /网格的大小/
 this.gridSize = 10;
 /坐标系的间距/
 this.space = 20;
 /坐标原点/
 this.x0 = this.space;
 this.y0 = this.canvasHeight - this.space;
 /箭头的大小/
 this.arrowSize = 10;
 /绘制点/
 this.dottedSize = 6;
 /点的坐标 和数据有关系 数据可视化/
 }
 /2.行为方法/
 LineChart.prototype.init = function (data) {
 this.drawGrid();
 this.drawAxis();
 this.drawDotted(data);
 };
 /绘制网格/
 LineChart.prototype.drawGrid = function () {
 /x方向的线/
 var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
 this.ctx.strokeStyle = '#eee';
 for (var i = 0; i <= xLineTotal; i++) {
 this.ctx.beginPath();
 this.ctx.moveTo(0, i  this.gridSize - 0.5);
 this.ctx.lineTo(this.canvasWidth, i  this.gridSize - 0.5);
 this.ctx.stroke();
 }
 /y方向的线/
 var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
 for (var i = 0; i <= yLineTotal; i++) {
 this.ctx.beginPath();
 this.ctx.moveTo(i  this.gridSize - 0.5, 0);
 this.ctx.lineTo(i  this.gridSize - 0.5, this.canvasHeight);
 this.ctx.stroke();
 }
 };
 /绘制坐标系/
 LineChart.prototype.drawAxis = function () {
 /X轴/
 this.ctx.beginPath();
 this.ctx.strokeStyle = '#000';
 this.ctx.moveTo(this.x0, this.y0);
 this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
 this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
 this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
 this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
 this.ctx.stroke();
 this.ctx.fill();
 /Y轴/
 this.ctx.beginPath();
 this.ctx.strokeStyle = '#000';
 this.ctx.moveTo(this.x0, this.y0);
 this.ctx.lineTo(this.space, this.space);
 this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
 this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
 this.ctx.lineTo(this.space, this.space);
 this.ctx.stroke();
 this.ctx.fill();
 };
 /绘制所有点/
 LineChart.prototype.drawDotted = function (data) {
 /1.数据的坐标 需要转换 canvas坐标/
 /2.再进行点的绘制/
 /3.把线连起来/
 var that = this;
 /记录当前坐标/
 var prevCanvasX = 0;
 var prevCanvasY = 0;
 data.forEach(function (item, i) {
 / x = 原点的坐标 + 数据的坐标 /
 / y = 原点的坐标 - 数据的坐标 /
 var canvasX = that.x0 + item.x;
 var canvasY = that.y0 - item.y;
 /绘制点/
 that.ctx.beginPath();
 that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
 that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
 that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
 that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
 that.ctx.closePath();
 that.ctx.fill();
 /点的连线/
 /当时第一个点的时候 起点是 x0 y0/
 /当时不是第一个点的时候 起点是 上一个点/
 if(i == 0){
 that.ctx.beginPath();
 that.ctx.moveTo(that.x0,that.y0);
 that.ctx.lineTo(canvasX,canvasY);
 that.ctx.stroke();
 }else{
 /上一个点/
 that.ctx.beginPath();
 that.ctx.moveTo(prevCanvasX,prevCanvasY);
 that.ctx.lineTo(canvasX,canvasY);
 that.ctx.stroke();
 }
 /记录当前的坐标，下一次要用/
 prevCanvasX = canvasX;
 prevCanvasY = canvasY;
 });
 };
 /3.初始化/
 var data = [
 {
 x: 100,
 y: 120
 },
 {
 x: 200,
 y: 160
 },
 {
 x: 300,
 y: 240
 },
 {
 x: 400,
 y: 120
 },
 {
 x: 500,
 y: 80
 }
 ];
 var lineChart = new LineChart();
 lineChart.init(data);
</script>
</body>
</html>

运行结果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：JavaScript canvas绘制渐变颜色的矩形 下一篇：node+multer实现图片上传的示例代码

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by