当前位置: 首页 > 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…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...