JavaScript场景应用：Canvas实战开发一个二维折线图插件
作者简介，黑夜开发者，全栈领域新星创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。
数年电商行业从业经验，历任核心研发工程师，项目技术负责人。
本文已收录于专栏：100个JavaScript的小应用。
欢迎 点赞✍评论⭐收藏
文章目录
- 一、插件介绍
- 二、关于Canvas的基础知识介绍
- 三、功能详细实现
-
- 2.1 HTML 结构(index.html)
- 2.2 实现Javascript主要绘图逻辑
-
- 2.2.1 JavaScript 文件
- 2.2.2 准备数据
- 2.2.3 绘制坐标系
- 2.2.4 需要绘制坐标系的线和标签
- 2.2.5 绘制折线
- 四、运行程序
- 五、总结
一、插件介绍
折线图是一种常见的数据可视化方式，广泛应用于各种领域如金融、统计学、科学研究等。通过绘制连接数据点的线，我们可以清晰地观察数据的趋势和变化。在本篇教程中，我们将使用
JavaScript结合canvas元素和HTML来画出一个折线图。折线图将支持多条线的显示，并且可以根据配置的二维JSON数组进行灵活展示
本文将详细介绍如何使用JavaScript和HTML来绘制一个的折线图，以及如何进行配置以显示多条线。不过在开始写作之前，先来了解一下什么是canvas，它可以用来做什么事情。
阅读本文的时候如果您有一些基本的网页开发知识，会更好的理解本文的内容。
二、关于Canvas的基础知识介绍
JavaScript Canvas是一种用于在网页上绘制图形的技术。它允许开发者使用JavaScript动态地在浏览器中绘制图像、文本和其他元素。
JavaScript Canvas提供了丰富的绘图API，包括绘制直线、矩形、圆形、路径、文本等基本图形元素，同时还支持图像的加载与绘制。开发者可以使用这些API来创建动画、游戏、数据可视化等各种交互式的网页应用。
Canvas的绘图过程是实时的，这意味着可以通过不断更新绘图来实现动态效果。开发者可以利用定时器和事件监听器来控制绘图的速度和响应用户的操作。
相比于其他绘图技术，JavaScript Canvas具有以下优点：
灵活性：可以通过JavaScript动态地修改绘图的属性和内容，实现复杂的交互效果。
跨平台：只需在支持HTML5的浏览器中运行，可以在多个设备和操作系统上使用。
高性能：Canvas使用硬件加速来提高绘图的性能，可以绘制大量图形元素而不影响网页的性能。
易用性：API简单易懂，学习曲线较低，并且有大量的文档和教程可供参考。
总之，JavaScript Canvas是一种功能强大、易于使用的网页绘图技术，为开发者提供了丰富的绘图功能，可用于创建各种精彩的交互式网页应用。
三、功能详细实现
所有功能实现完成后，主要代码结构将融合在下面三个文件里面。下面我们来把整个过程走一遍。
2.1 HTML 结构(index.html)
首先，我们需要创建一个包含 Canvas 元素的 HTML 结构。在 HTML 文件中添加以下代码：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可配置的折线图title>
head>
<body>
<canvas id="chart">canvas>
<script src="script.js">script>
body>
html>
这段代码包含了一个带有 id 为 “chart” 的 Canvas 元素，并引入了一个 JavaScript 文件 “script.js”。
2.2 实现Javascript主要绘图逻辑
2.2.1 JavaScript 文件
接下来，我们需要在 script.js 中编写代码来实现折线图的绘制逻辑。
首先，我们需要获取到 Canvas 元素并设置其宽度和高度。然后，我们需要定义一些全局变量，用于存储折线图的配置数据和绘制相关的参数。在script.js 文件中添加以下代码：
const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
let data = []; // 折线图的数据
let colors = ["#ff0000", "#00ff00", "#0000ff"]; // 折线的颜色
let lineWidth = 2; // 折线的宽度
let padding = 20; // 边距
let xAxisLabelHeight = 30; // x 轴标签的高度
let yAxisLabelWidth = 40; // y 轴标签的宽度
在这段代码中，我们使用 document.getElementById("chart") 获取到 Canvas 元素，并使用 canvas.getContext("2d") 获取到一个 CanvasRenderingContext2D 对象，用于绘制图形。
然后，我们设置了 Canvas 元素的宽度和高度为 600px 和 400px，并定义了一些全局变量，用于存储折线图的配置数据和绘制相关的参数。
2.2.2 准备数据
接下来，我们需要准备一些数据供折线图使用。在script.js 文件中添加以下代码：
// 准备数据
data = [
[{ x: 0, y: 1 }, { x: 1, y: 1 }, { x: 2, y: 0 }, { x: 3, y: 3 }, { x: 4, y: 5 }],
[{ x: 0, y: 3 }, { x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 10 }, { x: 4, y: 0 }],
];
这段代码定义了一个二维数组，每个子数组表示一条折线的数据。每个数据点都有 x 和 y 坐标，分别表示在水平和垂直方向上的位置。这个数据先放到这里，后面根据这个数据继续实现绘图逻辑。
2.2.3 绘制坐标系
在绘制折线图之前，我们首先需要绘制坐标系。坐标系由 x 轴和 y 轴组成，可以帮助我们对数据进行定位和可视化。
首先，我们需要计算出 x 轴和 y 轴的长度，并确定 x 和 y 坐标轴的起点和终点坐标。在 script.js 文件中添加以下代码：
// 计算坐标系的长度和坐标
let xAxisLength = canvas.width - padding * 2 - yAxisLabelWidth;
let yAxisLength = canvas.height - padding * 2 - xAxisLabelHeight;
let xAxisStart = padding + yAxisLabelWidth;
let xAxisEnd = xAxisStart + xAxisLength;
let yAxisStart = canvas.height - padding - xAxisLabelHeight;
let yAxisEnd = yAxisStart - yAxisLength;
这段代码计算了 x 轴和 y 轴的长度，并确定了它们的起点和终点坐标。
2.2.4 需要绘制坐标系的线和标签
接下来，我们需要绘制坐标系的线和标签。在 script.js 文件中添加以下代码：
// 绘制 x 轴线
ctx.beginPath();
ctx.moveTo(xAxisStart, yAxisStart);
ctx.lineTo(xAxisEnd, yAxisStart);
ctx.stroke();
// 绘制 y 轴线
ctx.beginPath();
ctx.moveTo(xAxisStart, yAxisStart);
ctx.lineTo(xAxisStart, yAxisEnd);
ctx.stroke();
// 绘制 x 轴标签
ctx.font = "12px Arial";
ctx.textAlign = "center";
ctx.fillText("X Axis", canvas.width / 2, canvas.height - padding / 2);
// 绘制 y 轴标签
ctx.save();
ctx.rotate(-Math.PI / 2);
ctx.font = "12px Arial";
ctx.textAlign = "center";
ctx.fillText("Y Axis", -canvas.height / 2, padding / 2);
ctx.restore();
这段代码使用 ctx.beginPath() 开始一个新的路径，并使用 ctx.moveTo(x, y) 和 ctx.lineTo(x, y) 绘制出 x 轴线和 y 轴线。然后，我们使用 ctx.stroke() 来绘制路径。
接下来，我们使用 ctx.font、ctx.textAlign 和 ctx.fillText(text, x, y) 来绘制 x 轴和 y 轴的标签。为了方便显示，我们将 y 轴的标签旋转了 -90 度。
2.2.5 绘制折线
现在，我们已经准备好了坐标系，接下来就是绘制折线了。
首先，我们需要计算每个数据点在坐标系中的实际位置。在 “script.js” 文件中添加以下代码：
// 计算每个数据点在坐标系中的实际位置
let scaleX = xAxisLength / (data[0].length - 1);
let scaleY = yAxisLength / Math.max(...data.flat().map((point) => point.y));
let scaledData = data.map((line) =>
line.map(({ x, y }) => ({
x: xAxisStart + x * scaleX,
y: yAxisStart - y * scaleY,
}))
);
这段代码首先计算了 x 轴和 y 轴的缩放比例，以便将数据点的坐标值映射到坐标系中的实际位置。
接着，我们使用 data.flat() 将二维数组转换为一维数组，并使用 Math.max(...array) 找到数组中的最大值。然后，我们对每个数据点进行缩放计算，并将计算结果保存到 scaledData 中。
接下来，我们可以开始绘制折线了。在 “script.js” 文件中添加以下代码：
// 绘制折线
scaledData.forEach((line, index) => {
ctx.beginPath();
line.forEach(({ x, y }, i) => {
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.strokeStyle = colors[index % colors.length];
ctx.lineWidth = lineWidth;
ctx.stroke();
});
这段代码使用 scaledData.forEach() 遍历每条折线的数据，在遍历过程中，使用 ctx.beginPath() 开始新的路径，并使用 ctx.moveTo(x, y) 和 ctx.lineTo(x, y) 绘制折线的每个点。
然后，我们根据折线的索引选择对应的颜色和线宽，并使用 ctx.strokeStyle 和 ctx.lineWidth 来设置样式。最后，我们使用 ctx.stroke() 绘制路径。
四、运行程序
现在，我们已经完成了折线图的绘制逻辑。接下来，我们需要在浏览器中运行这个程序，并查看结果。打开文件夹，进入到存放 HTML 文件和 JavaScript 文件的目录，双击index.html，即可在Chrome中查看效果，如下图所示。你将会看到一个显示了两条折线的折线图。
五、总结
在本教程中，我们学习了如何使用Javascript和HTML绘制一个支持多条线的折线图。我们使用二维JSON数组来灵活配置数据进行绘图操作。通过遵循以上步骤和代码逻辑，你可以根据自己的需求绘制出不同的折线图，并对其进行进一步的定制和样式设置。
在实际应用中，你可以根据需要修改绘图区域的大小、线条的颜色和样式，甚至添加坐标轴和图例等功能。这种灵活性使得使用Javascript和HTML绘制折线图成为一种非常强大和实用的方法。希望本教程能为你提供一个良好的起点，使你能够深入学习和探索折线图的制作。
完整源码可以通过页面顶部下载或者撩我，后面将会分享更多的实战经验，我们下次见。