用Vue3和p5.js打造一个交互式数据可视化仪表盘

Alt

本文由ScriptEcho平台提供技术支持

项目地址:传送门

基于 Vue.js 集成 p5.js 实现交互式波形图

应用场景介绍

在数据可视化领域,波形图广泛应用于展示动态变化的数据,如声音信号、心跳曲线等。通过动态绘制波形图,用户可以直观地观察数据变化趋势和规律。

代码基本功能介绍

本代码使用 Vue.js 集成了 p5.js 库,实现了交互式波形图的功能。用户可以在画布上绘制波形图,并通过鼠标控制波形图的绘制参数。

功能实现步骤及关键代码分析

1. 加载 p5.js 库

let jsUrls = ['https://registry.npmmirror.com/p5/1.9.3/files/lib/p5.min.js']
await Promise.all(jsUrls.map((jsUrl) => loadJavascript(jsUrl)))

使用 loadJavascript 函数动态加载 p5.js 库。

2. 创建 p5.js 画布

const sketch = (s) => {s.setup = () => {s.createCanvas(720, 400)}

使用 p5.js 的 createCanvas 函数创建画布,设置画布的宽高。

3. 绘制波形图

s.draw = () => {s.background(127)s.noStroke()for (let i = 0; i < s.height; i += 20) {s.fill(129, 206, 15)s.rect(0, i, s.width, 10)s.fill(255)s.rect(i, 0, 10, s.height)}

draw 函数中,绘制波形图。使用 background 函数设置画布背景色,使用 noStroke 函数取消描边,使用 fill 函数设置填充色,使用 rect 函数绘制矩形。

4. 鼠标控制波形图绘制

let where = 0

定义一个全局变量 where,用来记录鼠标在画布上的位置。

s.mouseMoved = () => {where = s.mouseX
}

mouseMoved 函数中,更新 where 变量的值,记录鼠标在画布上的 X 坐标。

s.mouseDragged = () => {if (s.mouseY < 10) {a = where} else if (s.mouseY > 390) {b = where}
}

mouseDragged 函数中,当鼠标在画布上拖动时,根据鼠标 Y 坐标判断是否修改 ab 变量的值,从而控制波形图的绘制参数。

总结与展望

开发过程中的经验与收获:

  • 了解了如何使用 Vue.js 集成 p5.js 库。
  • 掌握了 p5.js 的基本绘图函数和事件处理函数。
  • 理解了交互式波形图的实现原理。

未来拓展与优化:

  • 优化波形图绘制算法,提高绘制效率。

  • 添加更多交互功能,如缩放、平移等。

  • 支持不同类型数据的波形图绘制。

    更多组件:

    在这里插入图片描述


    在这里插入图片描述

    获取更多Echos

    本文由ScriptEcho平台提供技术支持

    项目地址:传送门

    扫码加入AI生成前端微信讨论群:

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

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

相关文章

5.所有权

标题 一、概念二、规则三、示例3.1 变量作用域3.2 所有权的移交&#xff08;深拷贝与浅拷贝&#xff09;3.3 函数与所有权3.4 返回值与作用域3.5 引用的使用 四、切片(&str) 一、概念 所有权是Rust的核心特性。所有程序在运行时都必须管理它们使用计算机内存的方式。Rust的…

InfoComm 2024 直击:千视新品P3和KiloLink技术闪耀亮相

InfoComm 2024 直击&#xff1a;千视新品P3和KiloLink技术闪耀亮相&#xff0c;现场亮点不断 北京时间2024年6月13日&#xff0c;UTC-7时间6月12日&#xff0c;美国视听显示与系统集成展览会InfoComm 2024在美国拉斯维加斯正式开幕。作为全美规模最大、最具影响力的展会&#…

【Test 73 】引用 () 实际的一些用法、常引用问题 详解!

文章目录 1. 常引用的背景2. 字符 a 与 整形 97 是相同的&#xff0c;但是具体是怎么比较的呢 &#xff1f; 1. 常引用的背景 注意&#xff1a; &#x1f427;① 权限可以平移、可以缩小&#xff0c;但是权限 不可以放大。 &#x1f427; 类型转换中间会产生临时变量 2. 字…

[AI资讯·0612] AI测试高考物理题,最高准确率100%,OpenAI与苹果合作,将ChatGPT融入系统中,大模型在物理领域应用潜力显现

AI资讯 国产AI大战高考物理&#xff0c;第1题全对&#xff0c;第2题开始放飞终于放大招了&#xff0c;2024WWDC&#xff0c;苹果开启AI反击战苹果一夜重塑iPhone&#xff01;GPT-4o加持Siri&#xff0c;AI深入所有APPOpenAI确认苹果集成ChatGPT 还任命了两位新高管GPT-4搞不定…

python爬虫入门:批量下载图片

引言: 爬虫也被称为网络蜘蛛(Spider),是一种自动化的软件程序,能够在互联网上漫游,按照一定的规则和算法抓取数据。 爬虫技术广泛应用于搜索引擎、 数据挖掘 、信息提取等领域,是互联网技术的重要组成部分。 摘要: 很多初学者对于一个这样新奇的事务当然愿意去探索,…

【Golang】探索进程资源监控的精妙细节:利用Gopsutil/Process实现高级进程性能和资源信息监控

【Golang】探索进程资源监控的精妙细节&#xff1a;利用Gopsutil/Process实现高级进程性能和资源信息监控 大家好 我是寸铁&#x1f44a; 总结了一篇【Golang】探索进程资源监控的精妙细节&#xff1a;利用Gopsutil/Process实现高级进程性能和资源信息监控的文章✨ 喜欢的小伙伴…

Scrum Day盛大启幕【限时优惠】

关于 Scrum Day 智驭未来&#xff0c;敏捷先行 —— 2024中国Scrum大会启航 在全球数字化转型的浪潮中&#xff0c;敏捷已成为企业脱颖而出的关键。 Scrum中文网携手全球敏捷行业巨擘 —— Scrum.org 联袂呈现年度敏捷盛会 Scrum Day&#xff0c;将于今秋盛大启幕&#xff01…

Ubuntu Linux目录结构

在Linux系统中&#xff0c;最小的数据存储单位为文件。“一切都是文件”是Linux和UNIX一致贯彻的原则。也就是说&#xff0c;在Linux中&#xff0c;所有的数据都是以文件的形式存在的&#xff0c;包括设备。为了便于访问文件&#xff0c;Linux按照一定的层次结构来组织文件系统…

使用宝塔面板 将vue+node+mysql部署至云服务器

数据库部署 1. 导出 数据库 2. 进入宝塔面板 将数据库文件导入至宝塔面板数据库中 验证是否导入成功 点击phpMyAdmin 输入用户名密码 如果没有导入成功&#xff0c;可在此再导入一遍 前端项目部署 1. 将vue项目打包上传至文件 npm run build 打包成dist文件夹 压缩上传 …

解决Apache Doris占用CPU和内存过高

一、导入问题 对于 Doris 来说&#xff0c;一个 INSERT 命令就是一个完整的导入事务。因此不论是导入一条数据&#xff0c;还是多条数据&#xff0c;我们都不建议在生产环境使用这种方式进行数据导入。高频次的 INSERT 操作会导致在存储层产生大量的小文件&#xff0c;会严重影…

音视频开发-- 坑整理

1. 解码时&#xff0c;一定要用avcodec_parameters_to_context()&#xff0c;将流的参数&#xff08;stream->codecpar&#xff09;复制到解码器中&#xff0c;否则某些流可能无法正常解码。 //第七步&#xff0c;给给解码器上下文添加参数, avcodec_parameters_to_context(…

Linux-黑马程序员

目录 一、前言二、初识Linux1、操作系统&#xff08;1&#xff09;硬件和软件&#xff08;2&#xff09;操作系统 2、Linux3、虚拟机4、FinalShell5、WSL6、虚拟机快照 三、Linux基础命令1、Linux的目录结构2、Linux命令入门&#xff08;1&#xff09;Linux命令基础格式&#x…

automa学习:写一个取某东图书数据的片断

周五了&#xff0c;实在没事情了。正好上午有个朋友问automa的事&#xff0c;心想再写一个练习一下&#xff0c;毕竟&#xff0c;熟能生巧。 目标某东图书&#xff1a; 分析及介绍如下。 1.新建标签页 1.悬停元素。要注意 县 停 .cate_menu_item:nth-child(14) > .cate_…

VMware安装ubuntu22.04虚拟机超详细图文教程

一 、下载镜像 下载地址&#xff1a;Index of /ubuntu-releases/22.04.4/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 二、创建虚拟机 打开VMware点击左上角文件&#xff0c;创建新的虚拟机&#xff0c;打开后如下图&#xff1a; 下一步&#xff0c;镜像文件就是…

PostgreSQL 的内置函数

PostgreSQL 提供了大量的内置函数&#xff0c;这些函数可以在查询中用于处理数据、进行计算和转换。以下是一些常用的 PostgreSQL 函数&#xff1a; 字符串函数&#xff1a; concat(string1, string2, ...): 连接两个或多个字符串。 SELECT concat(first_name, , last_name) F…

深入探讨Java中的GraphQL与RESTful API设计

引言 在现代Web应用开发中&#xff0c;API设计是构建可扩展、高性能服务的关键。传统的RESTful API因其简单性和直观性而被广泛采用&#xff0c;但随着应用复杂性的增加&#xff0c;RESTful API在某些场景下可能显得力不从心。GraphQL作为一种新的API技术&#xff0c;提供了一…

如何实现跨域

如何实现跨域 当浏览器执行JS脚本时&#xff0c;会检测脚本要访问的协议&#xff0c;域名&#xff0c;端口号是不是和当前网址一致&#xff0c;不一致就是跨域。 跨域是不允许的&#xff0c;这种限制叫做浏览器的同源策略&#xff0c;简单就是浏览器不允许一个源加载脚本与其…

数据中台:生产制造产业链的“智慧大脑”!

在当今激烈竞争的生产制造领域&#xff0c;数据中台正扮演着至关重要的角色&#xff0c;它就像是产业链的“智慧大脑”&#xff0c;引领着产业的发展方向&#xff01;数据中台在生产制造产业链、生态链中起到以下关键作用&#xff1a; 1. 数据整合与共享&#xff1a;将产业链各…

ozon如何上架产品,ozon平台怎么上架产品

在电子商务领域&#xff0c;产品上架是商家成功运营的关键步骤之一。对于正在或计划进军俄罗斯市场的卖家来说&#xff0c;了解如何在Ozon平台高效上架产品至关重要。接下来讲解下ozon如何上架产品&#xff0c;ozon平台怎么上架产品&#xff01; 产品上架工具&#xff1a;D.DDq…

神经网络学习1—nn.Module

nn.module 为所有神经网络提供了一个模板 import torch.nn as nn import torch.nn.functional as Fclass Model(nn.Module):def __init__(self):super(Model, self).__init__()self.conv1 nn.Conv2d(1, 20, 5)self.conv2 nn.Conv2d(20, 20, 5)def forward(self, x):x F.rel…