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.fontctx.textAlignctx.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.strokeStylectx.lineWidth 来设置样式。最后,我们使用 ctx.stroke() 绘制路径。

🚀四、运行程序

现在,我们已经完成了折线图的绘制逻辑。接下来,我们需要在浏览器中运行这个程序,并查看结果。打开文件夹,进入到存放 HTML 文件和 JavaScript 文件的目录,双击index.html,即可在Chrome中查看效果,如下图所示。你将会看到一个显示了两条折线的折线图。
在这里插入图片描述

🚀五、总结

在本教程中,我们学习了如何使用JavascriptHTML绘制一个支持多条线的折线图。我们使用二维JSON数组来灵活配置数据进行绘图操作。通过遵循以上步骤和代码逻辑,你可以根据自己的需求绘制出不同的折线图,并对其进行进一步的定制和样式设置。

在实际应用中,你可以根据需要修改绘图区域的大小、线条的颜色和样式,甚至添加坐标轴和图例等功能。这种灵活性使得使用JavascriptHTML绘制折线图成为一种非常强大和实用的方法。希望本教程能为你提供一个良好的起点,使你能够深入学习和探索折线图的制作。

在这里插入图片描述

完整源码可以通过页面顶部下载或者撩我,后面将会分享更多的实战经验,我们下次见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/74101.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VB6中FSO具体应用详解

文前申明:原文为通用版实例代码,本菜鸟在每例之后加入一个简单的实例(均验证通过),供有需要的朋友参考. 您正在看的VB教程是:VB入门基础认识VB的文件系统对象FSO。 在 VB 编程中经常需要和文件系统打交道&#xff0c;比如获取硬盘的剩余空间、判断文件夹或文件是否存在等。在…

认识主被动无人机遥感数据、预处理无人机遥感数据、定量估算农林植被关键性状、期刊论文插图精细制作与Appdesigner应用开发

目录 第一章、认识主被动无人机遥感数据 第二章、预处理无人机遥感数据 第三章、定量估算农林植被关键性状 第四章、期刊论文插图精细制作与Appdesigner应用开发 更多推荐 遥感技术作为一种空间大数据手段&#xff0c;能够从多时、多维、多地等角度&#xff0c;获取大量的…

PHP语言基础知识(超详细)

文章目录 前言第一章 PHP语言学习介绍 1.1 PHP部署安装环境1.2 PHP代码工具选择 第二章 PHP代码基本语法 2.1 PHP函数知识介绍2.2 PHP常量变量介绍 2.2.1 PHP变量知识&#xff1a;2.2.2 PHP常量知识&#xff1a; 2.3 PHP注释信息介绍2.4 PHP数据类型介绍 2.4.1 整形数据类型2.4…

基于量子同态的安全多方量子求和加密

摘要安全多方计算在经典密码学中一直扮演着重要的角色。量子同态加密(QHE)可以在不解密的情况下对加密数据进行计算。目前&#xff0c;大多数协议使用半诚实的第三方(TP)来保护参与者的秘密。我们使用量子同态加密方案代替TP来保护各方的隐私。在量子同态加密的基础上&#xff…

2023年自动化测试已成为标配?一篇彻底打通自动化测试...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 首先我们从招聘岗…

《面试1v1》ElasticSearch 和 Lucene

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

智慧~经典开源项目数字孪生智慧商场——开源工程及源码

深圳南山某商场的工程和源码免费赠送&#xff0c;助您打造智慧商场。立即获取&#xff0c;提升商场管理效能&#xff01; 项目介绍 凤凰商场作为南山地区的繁华商业中心&#xff0c;提供多样化的购物和娱乐体验。通过此项目&#xff0c;凤凰商场将迈向更智能的商业模式。 本项目…

基于SaaS模式的Java基层卫生健康云HIS系统源码【运维管理+运营管理+综合监管】

云HIS综合管理平台 一、模板管理 模板分为两种&#xff1a;病历模板和报表模板。模板管理是运营管理的核心组成部分&#xff0c;是基层卫生健康云中各医疗机构定制电子病历和报表的地方&#xff0c;各医疗机构可根据自身特点特色定制电子病历和报表&#xff0c;制作的电子病历…

Python-Python基础综合案例:数据可视化 - 折线图可视化

版本说明 当前版本号[20230729]。 版本修改说明20230729初版 目录 文章目录 版本说明目录知识总览图Python基础综合案例&#xff1a;数据可视化 - 折线图可视化json数据格式什么是jsonjson有什么用json格式数据转化Python数据和Json数据的相互转化 pyecharts模块介绍概况如何…

Golang 函数参数的传递方式 值传递,引用传递

基本介绍 我们在讲解函数注意事项和使用细节时&#xff0c;已经讲过值类型和引用类型了&#xff0c;这里我们再系统总结一下&#xff0c;因为这是重难点&#xff0c;值类型参数默认就是值传递&#xff0c;而引用类型参数默认就是引用传递。 两种传递方式&#xff08;函数默认都…

BUG分析以及BUG定位

一般来说bug大多数存在于3个模块&#xff1a; 1、前台界面&#xff0c;包括界面的显示&#xff0c;兼容性&#xff0c;数据提交的判断&#xff0c;页面的跳转等等&#xff0c;这些bug基本都是一眼可见的&#xff0c;不太需要定位&#xff0c;当然也不排除一些特殊情况&#xf…

《cuda c编程权威指南》04 - 使用块和线程索引映射矩阵索引

目录 1. 解决的问题 2. 分析 3. 方法 4. 代码示例 1. 解决的问题 利用块和线程索引&#xff0c;从全局内存中访问指定的数据。 2. 分析 通常情况下&#xff0c;矩阵是用行优先的方法在全局内存中线性存储的。如下。 8列6行矩阵&#xff08;nx,ny&#xff09;&#xff08;…

Kafka-消费者组消费流程

消费者向kafka集群发送消费请求&#xff0c;消费者客户端默认每次从kafka集群拉取50M数据&#xff0c;放到缓冲队列中&#xff0c;消费者从缓冲队列中每次拉取500条数据进行消费。

时序预测 | Python实现NARX-DNN空气质量预测

时序预测 | Python实现NARX-DNN空气质量预测 目录 时序预测 | Python实现NARX-DNN空气质量预测效果一览基本介绍研究内容程序设计参考资料效果一览 基本介绍 时序预测 | Python实现NARX-DNN空气质量预测 研究内容 Python实现NARX-DNN空气质量预测,使用深度神经网络对比利时空气…

PDF文件忘记密码,怎么办?

PDF文件设置密码分为打开密码和限制密码&#xff0c;忘记了密码分别如何解密PDF密码&#xff1f; 如果是限制编辑密码忘记了&#xff0c;我们可以试着将PDF文件转换成其他格式来避开限制编辑&#xff0c;然后重新将文件转换回PDF格式就可以了。 如果因为转换之后导致文件格式…

如何打造属于自己的个人IP?

在当今信息爆炸的时代&#xff0c;个人 IP 已经成为人们在网络世界中的独特标签。无论是在职场上、创业中&#xff0c;还是在社交生活中&#xff0c;拥有个人 IP 的人都能脱颖而出&#xff0c;吸引更多的关注和机会。那么&#xff0c;如何打造属于自己的个人 IP 呢&#xff1f;…

go 如何知道一个对象是分配在栈上还是堆上?

如何判断变量是分配在栈&#xff08;stack&#xff09;上还是堆&#xff08;heap&#xff09;上&#xff1f; Go和C不同&#xff0c;Go局部变量会进行逃逸分析。如果变量离开作用域后没有被引用&#xff0c;则优先分配到栈上&#xff0c;否则分配到堆上。判断语句&#xff1a;…

在外远程NAS群晖Drive - 群晖Drive挂载电脑磁盘同步备份【无需公网IP】

文章目录 前言1.群晖Synology Drive套件的安装1.1 安装Synology Drive套件1.2 设置Synology Drive套件1.3 局域网内电脑测试和使用 2.使用cpolar远程访问内网Synology Drive2.1 Cpolar云端设置2.2 Cpolar本地设置2.3 测试和使用 3. 结语 前言 群晖作为专业的数据存储中心&…

如何开启一个java微服务工程

安装idea IDEA常用配置和插件&#xff08;包括导入导出&#xff09; https://blog.csdn.net/qq_38586496/article/details/109382560安装配置maven 导入source创建项目 修改项目编码utf-8 File->Settings->Editor->File Encodings 修改项目的jdk maven import引入…

flask中写一个基础的sqlHelper类

写一个SQLHelper类&#xff1a; from flask_sqlalchemy import SQLAlchemydb SQLAlchemy()class SQLHelper:staticmethoddef add(record):db.session.add(record)return SQLHelper.session_commit()staticmethoddef add_all(records):db.session.add_all(records)return SQLH…