当前位置: 首页 > news >正文

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

Alt

本文由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 属性指定要绘制的数据,其中 yy2 分别对应 y 轴和 x 轴的数据。

3. 配置外观

margin: { top: 40, left: 40, right: 40, bottom: 40 },
axisStrokeWidth: 1,
fillWeight: 1,
axisRoughness: 1,
circle: false,

我们可以通过配置 Line 类中的选项来定制散点图的外观。margin 属性指定图表周围的边距。axisStrokeWidthfillWeight 属性控制轴和填充的粗细。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中的断言功能?

目录 一、什么是断言&#xff1f; 二、Java断言的语法 三、开启断言 一、什么是断言&#xff1f; 断言&#xff08;assert&#xff09;是 Java 中的一条语句&#xff0c;一种在程序中的逻辑&#xff08;如一个结果为真或假的逻辑判断式&#xff09;&#xff0c;目的是验证软…...

大模型之语言大模型技术

本文作为大模型综述第二篇,介绍语言大模型基本技术。 近年来,在 Transformer 架构基础上构建的预训练语言模型为自然语言处理领域带来了一系列突破式进展,成为人工智能主流技术范式。预训练语言模型采用“预训练+微调”方法,主要分为两步: 1)将模型在大规模无标注数据上…...

浮点数例外 (核心已转储) 的问题记录

一般这种问题&#xff0c;是程序运行过程中出现浮点数运算错误导致的程序崩溃 浮点异常可能由以下几个原因引起&#xff1a; 除以零&#xff1a;当程序中出现除以零的操作时&#xff0c;会触发浮点异常。例如&#xff0c;当一个数除以0时&#xff0c;会导致浮点异常。数值溢出…...

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开发前&#xff0c;JDK是必不可少的环境&#xff0c;接下来&#xff0c;让我们一起完成JDK 21版本的下载和安装&#xff01; 种一棵树最好的时间是10年前&#xff0c;其次就是现在&#xff0c;加油&#xff01; …...

Redis学习[5] ——Redis过期删除和内存淘汰

六、Redis过期键值删除 6.1 Redis的过期键值删除策略 6.1.1 什么是过期键值删除&#xff1f; Redis中是可以对key设置过期时间的&#xff0c;所以需要有相应的机制将已过期的键值对删除&#xff0c;也就是**过期键值删除策略。Redis会用一个过期字典&#xff08;expires dic…...

书生大模型学习笔记 - Python

Python实现wordcount 请实现一个wordcount函数&#xff0c;统计英文字符串中每个单词出现的次数。返回一个字典&#xff0c;key为单词&#xff0c;value为对应单词出现的次数。 解题思路&#xff1a;首先把字母转小写>然后把单词取出来去除标点>循环单词列表>key已存…...

spring security和核心流程

...

JavaScript青少年简明教程:面向对象编程入门

JavaScript青少年简明教程&#xff1a;面向对象编程入门 JavaScript 支持多种编程范式&#xff08;programming paradigms&#xff09;&#xff0c;即支持多种不同的编程风格和方法。 前面介绍的编程方式&#xff0c;主要是面向过程编程&#xff08;Procedural Programming&am…...

电话号的标准

点击标题下「蓝色微信名」可快速关注 最近碰到个电话号码的问题&#xff0c;除了常规数字&#xff0c;可能还会有国内国际的区号&#xff0c;例如中国&#xff0c;86、086、86&#xff0c;这些好像都见过&#xff0c;但什么是标准的&#xff1f;谁来定义的&#xff1f; 国际电信…...

项目实战_表白墙(升级版)

你能学到什么 表白墙&#xff08;升级版&#xff09;Mybatis的一些简单应用 正文 前⾯的案例中, 我们写了表⽩墙, 但是⼀旦服务器重启, 数据就会丢失. 要想数据不丢失, 需要把数据存储在数据库中&#xff0c;接下来咱们借助MyBatis来实现数据库的操作。 数据准备 如果我们…...

创意无限:11个设计圈热议的UI设计灵感网站集锦

无论你是一个经验丰富的UI设计师还是一个新的UI设计师&#xff0c;拥有一些高质量、可靠的UI设计网站灵感库都能加速你的设计过程。借助灵感资源&#xff0c;您可以更快、更有效地启动该项目。与此同时&#xff0c;优秀的UI设计网站也能帮助您探索新的设计解决方案&#xff0c;…...

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服务器搭建

参考链接&#xff1a;https://blog.csdn.net/bitcsljl/article/details/125826323...

打卡第31天------贪心算法

每天抓紧时间刷题,争取尽快上岸,不能再耽误一分一秒了,2024年已经过去大半年了。这个算法编程题是我的痛点。要尽快弥补。 卡尔在讲算法题的时候,思路比较清晰,通俗易懂,以前看见算法题就害怕,因为啥都不会,看懵了,跟了一个月了,每天坚持刷题,偶尔会回顾思路,也会…...

jenkins服务器重启,构建记录消失

1、进入系统管理查看系统运行日志&#xff0c;发现报保存构建日志失败 jenkins module java.base does not "opens java.lang.ref" to unnamed module 5276d6ee Java平台模块系统对类的可见性和访问权限进行了严格的控制。在Java 9及以上版本中&#xff0c;java.la…...

Linux系统部分问题处理方案

目录 一:crontab输出结果控制 二:telnet很慢/ssh很慢 三:Read-onlyfilesystem 四:⽂件删了磁盘空间没释放 五:获取不了⽹关mac地址 六: http服务⽆法启动⼀例 七:ibdata1和mysql-bin致磁盘空间问题 一:crontab输出结果控制 问题: /var/spool/clientmqueue⽬录…...

C语言指针与数组

在上一篇对指针介绍的文章当中&#xff0c;我们初次了解到了指针&#xff0c;并且知道了地址和内存间的关系&#xff0c;懂得了如何取地址和对指针的解引用&#xff0c;算是对指针有了一个初步的了解。而今天让我们对指针进行更深一步的了解吧~ 一、指针与数组名 我们知道&am…...

SIGTRAN协议:电信网络IP化的关键技术解析

1. SIGTRAN&#xff1a;下一代电信网络的信令传输基石2003年全球电信业寒冬中&#xff0c;一个技术决策正在悄然改变行业格局。当运营商们紧缩资本开支时&#xff0c;AT&T、Verizon等巨头却不约而同地加大了对IP网络的投入。这背后隐藏着一个关键技术转折——传统TDM网络向…...

10分钟学会Appium:移动端自动化测试的终极指南

10分钟学会Appium&#xff1a;移动端自动化测试的终极指南 【免费下载链接】til :memo: Today I Learned 项目地址: https://gitcode.com/gh_mirrors/ti/til Appium是一款功能强大的开源移动端自动化测试工具&#xff0c;支持iOS和Android平台&#xff0c;让开发者和测试…...

为AI编程助手注入Go语言最佳实践:golang-skills技能包实战指南

1. 项目概述&#xff1a;为AI编程助手注入Go语言“肌肉记忆” 如果你和我一样&#xff0c;日常开发重度依赖像Cursor、Claude Code这类AI编程助手&#xff0c;那你肯定也遇到过类似的困扰&#xff1a;生成的Go代码虽然语法正确&#xff0c;但总感觉“味儿”不对。要么是错误处理…...

前端开发者福音:用Vue.js开发的Beekeeper Studio,如何让SQL开发体验更‘现代’?

Vue.js与SQL工具的现代融合&#xff1a;Beekeeper Studio如何重塑开发者体验 当SQL开发者第一次打开Beekeeper Studio时&#xff0c;那种流畅的界面过渡和即时的语法补全反馈会让人误以为在使用一个现代Web应用——这恰恰是Vue.js赋予桌面应用的魔力。作为一款基于Electron和Vu…...

放心API和4SAPI怎么选?从开发者选型角度看差异

很多开发者在选 Claude API 中转站时&#xff0c;都会遇到一个问题&#xff1a;**到底是选更偏个人友好的放心API&#xff0c;还是选更偏企业级的4SAPI&#xff1f;**这个问题没有标准答案&#xff0c;只有场景答案。---## 一、先给结论如果你的项目处于以下阶段&#xff1a;- …...

东芝成熟制程代工服务解析:More-than-Moore战略与欧洲市场机遇

1. 东芝的“伦敦呼唤”&#xff1a;一次面向欧洲的成熟制程代工服务解析最近在梳理半导体产业动态时&#xff0c;东芝在2012年的一项战略动作引起了我的注意。这并非关于其最前沿的3D NAND闪存&#xff0c;而是一项看似“复古”的业务拓展&#xff1a;面向欧洲客户开放其成熟制…...

终极指南:如何用sndcpy将Android音频无损转发到电脑

终极指南&#xff1a;如何用sndcpy将Android音频无损转发到电脑 【免费下载链接】sndcpy Android audio forwarding PoC (scrcpy, but for audio) 项目地址: https://gitcode.com/gh_mirrors/sn/sndcpy 你是否曾经想在电脑上收听手机上的音乐、播客或游戏音频&#xff1…...

别再乱用`return`了!深入理解Lua函数多返回值:`table.unpack`的妙用与尾调用优化

别再乱用return了&#xff01;深入理解Lua函数多返回值&#xff1a;table.unpack的妙用与尾调用优化 在游戏开发中&#xff0c;我们经常需要处理复杂的技能系统。比如一个火球术可能同时返回伤害值、燃烧效果、目标列表等多个数据。新手开发者往往会写出这样的代码&#xff1a;…...

Claude 3.5 Sonnet重磅升级(开发者必看的3个隐藏API调用技巧)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Claude 3.5 Sonnet重磅升级概览 Anthropic 正式发布 Claude 3.5 Sonnet&#xff0c;作为当前推理模型中响应速度与智能水平的全新标杆&#xff0c;其在多模态理解、长上下文处理及代码生成能力上实现显…...

点云成像三维焊缝识别与机器人跟踪【附代码】

✨ 长期致力于点云成像、焊缝识别定位、机器人、点云拼接、焊缝轨迹跟踪研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;基于圆柱体拟合与ICP拼接的点云…...