基于 Rough.js 的 Vue 散点图绘制

本文由ScriptEcho平台提供技术支持
项目地址:传送门
基于 Rough.js 的 Vue 散点图绘制
应用场景
本代码展示了如何使用 Rough.js 库在 Vue 应用程序中绘制散点图。Rough.js 是一个轻量级 JavaScript 库,用于创建具有手绘风格的可视化效果。散点图是一种数据可视化技术,用于显示成对数据点的关系。
基本功能
此代码实现了以下功能:
- 根据提供的 x 和 y 数据数组创建散点图。
- 使用 Rough.js 库创建手绘风格的线条和点。
- 允许用户自定义散点图的外观,包括线条粗细、填充权重和轴粗糙度。
功能实现步骤及关键代码分析
1. 数据准备
const scatterData = {x: [7.211460791773662, ...],y: [14.996060017631912, ...],
};
我们首先定义了散点图所需的数据,包括 x 和 y 坐标数组。
2. 初始化 Rough.js
onMounted(() => {new Line({element: '#viz8',data: { y: scatterData['y'], y2: scatterData['x'] },...})
})
在 onMounted 生命周期钩子中,我们使用 Rough.js 的 Line 类创建了一个新的散点图。element 属性指定要绘制散点图的 DOM 元素。data 属性指定要绘制的数据,其中 y 和 y2 分别对应 y 轴和 x 轴的数据。
3. 配置外观
margin: { top: 40, left: 40, right: 40, bottom: 40 },
axisStrokeWidth: 1,
fillWeight: 1,
axisRoughness: 1,
circle: false,
我们可以通过配置 Line 类中的选项来定制散点图的外观。margin 属性指定图表周围的边距。axisStrokeWidth 和 fillWeight 属性控制轴和填充的粗细。axisRoughness 属性控制轴的手绘粗糙度。circle 属性指定是否绘制数据点的圆圈。
总结与展望
通过使用 Rough.js 库,我们能够在 Vue 应用程序中轻松创建具有手绘风格的散点图。这种方法使我们能够创建具有独特美学吸引力的数据可视化效果。
经验与收获
开发这段代码的经验让我对 Rough.js 库及其在创建手绘可视化效果方面的强大功能有了更深入的了解。我也学会了在 Vue 中使用 onMounted 生命周期钩子来初始化组件。
未来拓展与优化
未来,可以将此代码扩展为支持更多类型的数据可视化,例如条形图和饼图。还可以通过添加交互功能,例如缩放和平移,来增强用户体验。优化代码以提高性能和减少内存使用也是一个值得考虑的方面。
更多组件:


获取更多Echos
本文由ScriptEcho平台提供技术支持
项目地址:传送门
扫码加入AI生成前端微信讨论群:

相关文章:
基于 Rough.js 的 Vue 散点图绘制
本文由ScriptEcho平台提供技术支持 项目地址:传送门 基于 Rough.js 的 Vue 散点图绘制 应用场景 本代码展示了如何使用 Rough.js 库在 Vue 应用程序中绘制散点图。Rough.js 是一个轻量级 JavaScript 库,用于创建具有手绘风格的可视化效果。散点图是一…...
【c++】用c++指针传递来模拟“靶向治疗”
一:源码: #include <iostream>void targetedTherapy(bool* flag) {if (*flag == false) {*flag = true;} }int main() {//代表一系列癌细胞//true为健康细胞 false为癌变细胞bool cancerCell[7] = {true, false, true, true, true, true, false};for (int i = 0; i &…...
如何开启idea中的断言功能?
目录 一、什么是断言? 二、Java断言的语法 三、开启断言 一、什么是断言? 断言(assert)是 Java 中的一条语句,一种在程序中的逻辑(如一个结果为真或假的逻辑判断式),目的是验证软…...
大模型之语言大模型技术
本文作为大模型综述第二篇,介绍语言大模型基本技术。 近年来,在 Transformer 架构基础上构建的预训练语言模型为自然语言处理领域带来了一系列突破式进展,成为人工智能主流技术范式。预训练语言模型采用“预训练+微调”方法,主要分为两步: 1)将模型在大规模无标注数据上…...
浮点数例外 (核心已转储) 的问题记录
一般这种问题,是程序运行过程中出现浮点数运算错误导致的程序崩溃 浮点异常可能由以下几个原因引起: 除以零:当程序中出现除以零的操作时,会触发浮点异常。例如,当一个数除以0时,会导致浮点异常。数值溢出…...
Vite项目中根据不同打包命令配置不同的后端接口地址,proxy解决跨域
在vite.config.ts同级目录添加两个文件 .env.development #开发环境 VITE_APP_ENV developmentVITE_APP_BASE_API .env.production #生产配置 VITE_APP_ENV productionVITE_APP_BASE_API https://www.bdjw.work代码中使用路径 const request axios.create({baseURL: i…...
Java新手启航:JDK 21 版本安装,开启编程之行
在Java开发前,JDK是必不可少的环境,接下来,让我们一起完成JDK 21版本的下载和安装! 种一棵树最好的时间是10年前,其次就是现在,加油! …...
Redis学习[5] ——Redis过期删除和内存淘汰
六、Redis过期键值删除 6.1 Redis的过期键值删除策略 6.1.1 什么是过期键值删除? Redis中是可以对key设置过期时间的,所以需要有相应的机制将已过期的键值对删除,也就是**过期键值删除策略。Redis会用一个过期字典(expires dic…...
书生大模型学习笔记 - Python
Python实现wordcount 请实现一个wordcount函数,统计英文字符串中每个单词出现的次数。返回一个字典,key为单词,value为对应单词出现的次数。 解题思路:首先把字母转小写>然后把单词取出来去除标点>循环单词列表>key已存…...
JavaScript青少年简明教程:面向对象编程入门
JavaScript青少年简明教程:面向对象编程入门 JavaScript 支持多种编程范式(programming paradigms),即支持多种不同的编程风格和方法。 前面介绍的编程方式,主要是面向过程编程(Procedural Programming&am…...
电话号的标准
点击标题下「蓝色微信名」可快速关注 最近碰到个电话号码的问题,除了常规数字,可能还会有国内国际的区号,例如中国,86、086、86,这些好像都见过,但什么是标准的?谁来定义的? 国际电信…...
项目实战_表白墙(升级版)
你能学到什么 表白墙(升级版)Mybatis的一些简单应用 正文 前⾯的案例中, 我们写了表⽩墙, 但是⼀旦服务器重启, 数据就会丢失. 要想数据不丢失, 需要把数据存储在数据库中,接下来咱们借助MyBatis来实现数据库的操作。 数据准备 如果我们…...
创意无限:11个设计圈热议的UI设计灵感网站集锦
无论你是一个经验丰富的UI设计师还是一个新的UI设计师,拥有一些高质量、可靠的UI设计网站灵感库都能加速你的设计过程。借助灵感资源,您可以更快、更有效地启动该项目。与此同时,优秀的UI设计网站也能帮助您探索新的设计解决方案,…...
C# Solidworks二次开发------综合小设计-1
一、内容 本文对前面所提及的相关信息做一些小设计 二、代码 public void Open_File(string FileNmae) {Process.Start("explorer.exe", FileNmae); }public void Connect_Excel() {string connectionString "ProviderMicrosoft.Jet.OLEDB.4.0;Data Source&q…...
nginx rtmp服务器搭建
参考链接:https://blog.csdn.net/bitcsljl/article/details/125826323...
打卡第31天------贪心算法
每天抓紧时间刷题,争取尽快上岸,不能再耽误一分一秒了,2024年已经过去大半年了。这个算法编程题是我的痛点。要尽快弥补。 卡尔在讲算法题的时候,思路比较清晰,通俗易懂,以前看见算法题就害怕,因为啥都不会,看懵了,跟了一个月了,每天坚持刷题,偶尔会回顾思路,也会…...
jenkins服务器重启,构建记录消失
1、进入系统管理查看系统运行日志,发现报保存构建日志失败 jenkins module java.base does not "opens java.lang.ref" to unnamed module 5276d6ee Java平台模块系统对类的可见性和访问权限进行了严格的控制。在Java 9及以上版本中,java.la…...
Linux系统部分问题处理方案
目录 一:crontab输出结果控制 二:telnet很慢/ssh很慢 三:Read-onlyfilesystem 四:⽂件删了磁盘空间没释放 五:获取不了⽹关mac地址 六: http服务⽆法启动⼀例 七:ibdata1和mysql-bin致磁盘空间问题 一:crontab输出结果控制 问题: /var/spool/clientmqueue⽬录…...
C语言指针与数组
在上一篇对指针介绍的文章当中,我们初次了解到了指针,并且知道了地址和内存间的关系,懂得了如何取地址和对指针的解引用,算是对指针有了一个初步的了解。而今天让我们对指针进行更深一步的了解吧~ 一、指针与数组名 我们知道&am…...
ChatTTS API 实战:如何构建高可用的 AI 辅助开发工作流
最近在做一个需要大量语音合成的项目,用到了 ChatTTS API。说实话,直接调用 API 虽然简单,但一旦涉及到生产环境的高并发、稳定性和成本控制,问题就接踵而至。经过一番折腾,我总结了一套基于 Python 异步编程的高可用工…...
xbee_lib嵌入式通信库架构与工程实践指南
1. XBee通信库(xbee_lib)深度解析与嵌入式工程实践XBee系列模块作为Digi公司推出的成熟Zigbee/802.15.4/Point-to-Multipoint无线通信解决方案,广泛应用于工业物联网、远程传感器网络、智能农业及楼宇自动化等场景。xbee_lib是一个面向嵌入式…...
侧信道安全(Side-Channel Security)
第一章 背景 1.1 什么是侧信道攻击? 核心定义:侧信道攻击(Side-Channel Attack, SCA)是一种不直接攻击密码算法的数学结构,而是通过观察系统在执行密码运算时泄露的物理信息(时间、功耗、电磁辐射、声音等…...
STM32栈空间溢出处理与优化技术
STM32栈空间溢出处理技术解析1. 栈空间溢出问题概述在STM32嵌入式开发中,函数内部定义的局部变量存储在栈空间中。STM32的启动文件中预定义了栈空间大小,当局部变量占用空间超过预设栈大小时,虽然编译过程不会报错,但运行时可能出…...
STM32智能猪舍监控系统设计与实现
基于STM32的智能猪舍监控系统设计1. 项目概述1.1 系统背景现代养殖业正经历从传统人工管理向智能化管理的转型过程。在生猪养殖领域,环境参数如温湿度、空气质量、光照强度等对猪只健康生长具有决定性影响。传统人工监测方式存在响应滞后、精度不足等问题࿰…...
Cherry Studio快速上手:从零部署到实战避坑指南
Cherry Studio快速上手:从零部署到实战避坑指南 【免费下载链接】cherry-studio 🍒 Cherry Studio is a desktop client that supports for multiple LLM providers. Support deepseek-r1 项目地址: https://gitcode.com/GitHub_Trending/ch/cherry-st…...
Slurm集群升级记:为什么以及如何将PMIx从v3.x迁移到v4.x?
Slurm集群升级实战:PMIx v3.x到v4.x迁移的深度解析 引言:为什么HPC管理员需要关注PMIx升级? 在Slurm集群的日常运维中,组件升级往往被视为"必要之恶"——既期待新特性带来的性能提升,又担忧升级过程中的兼容…...
毕设程序java基于的动漫分析与交流平台 基于Spring Boot的二次元文化社区与作品分享系统 Java驱动的ACG内容聚合与互动服务平台
毕设程序java基于的动漫分析与交流平台31sl5luf(配套有源码 程序 mysql数据库 论文) 本套源码可以在文本联xi,先看具体系统功能演示视频领取,可分享源码参考。随着互联网技术的飞速发展和Z世代文化消费的崛起,动漫产业已从边缘亚文…...
SEO_2024年最有效的SEO策略与核心技巧分享
2024年最有效的SEO策略与核心技巧分享 在数字营销领域,搜索引擎优化(SEO)始终是网站流量提升的关键。2024年,随着搜索引擎算法的不断更新和用户行为的变化,SEO策略也在不断演变。本文将详细分享2024年最有效的SEO策略与…...
AI热潮重塑中国云市场定价策略
又有两家中国云巨头宣布其服务价格上调,这再次归因于人工智能对其供应链的影响。 某中心云率先行动,昨日宣布将产品价格上调5%至34%,并表示“全球AI需求激增和供应链成本上升”使得涨价不可避免。 某机构云紧随其后,宣布“为确保平…...
