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

html做一个分组散点图图的软件

news 文章来源：https://blog.csdn.net/weixin_47634487/article/details/139864428 2025/2/7 13:49:13

在HTML中创建一个分组散点图，可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能，易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例：
要添加文件上传功能，可以让用户上传包含数据的文件（例如CSV文件），然后使用JavaScript读取文件并生成散点图。下面是一个示例，展示了如何结合文件上传和用户输入生成分组散点图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grouped Scatter Plot with User Input and File Upload</title><script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body><h1>Grouped Scatter Plot</h1><form id="dataForm"><h3>Group 1</h3><label for="group1x">X values (comma separated):</label><input type="text" id="group1x" name="group1x" value="1,2,3,4,5"><br><label for="group1y">Y values (comma separated):</label><input type="text" id="group1y" name="group1y" value="10,15,13,17,10"><br><h3>Group 2</h3><label for="group2x">X values (comma separated):</label><input type="text" id="group2x" name="group2x" value="1.5,2.5,3.5,4.5,5.5"><br><label for="group2y">Y values (comma separated):</label><input type="text" id="group2y" name="group2y" value="16,5,11,9,15"><br><h3>Group 3</h3><label for="group3x">X values (comma separated):</label><input type="text" id="group3x" name="group3x" value="2,3,4,5,6"><br><label for="group3y">Y values (comma separated):</label><input type="text" id="group3y" name="group3y" value="6,8,10,14,13"><br><button type="button" onclick="plotData()">Plot Data</button></form><h2>Or Upload CSV File</h2><input type="file" id="fileInput" accept=".csv"><button type="button" onclick="uploadFile()">Upload and Plot</button><div id="scatter-plot" style="width:100%;height:600px;"></div><script>function plotData() {var group1x = document.getElementById('group1x').value.split(',').map(Number);var group1y = document.getElementById('group1y').value.split(',').map(Number);var group2x = document.getElementById('group2x').value.split(',').map(Number);var group2y = document.getElementById('group2y').value.split(',').map(Number);var group3x = document.getElementById('group3x').value.split(',').map(Number);var group3y = document.getElementById('group3y').value.split(',').map(Number);var trace1 = {x: group1x,y: group1y,mode: 'markers',type: 'scatter',name: 'Group 1',marker: { size: 12 }};var trace2 = {x: group2x,y: group2y,mode: 'markers',type: 'scatter',name: 'Group 2',marker: { size: 12 }};var trace3 = {x: group3x,y: group3y,mode: 'markers',type: 'scatter',name: 'Group 3',marker: { size: 12 }};var data = [trace1, trace2, trace3];var layout = {title: 'Grouped Scatter Plot',xaxis: {title: 'X Axis'},yaxis: {title: 'Y Axis'}};Plotly.newPlot('scatter-plot', data, layout);}function uploadFile() {var fileInput = document.getElementById('fileInput');var file = fileInput.files[0];var reader = new FileReader();reader.onload = function(event) {var csvData = event.target.result;processCSVData(csvData);};reader.readAsText(file);}function processCSVData(csvData) {var lines = csvData.split('\n');var group1x = [], group1y = [], group2x = [], group2y = [], group3x = [], group3y = [];for (var i = 1; i < lines.length; i++) {var cols = lines[i].split(',');if (cols.length === 6) {group1x.push(parseFloat(cols[0]));group1y.push(parseFloat(cols[1]));group2x.push(parseFloat(cols[2]));group2y.push(parseFloat(cols[3]));group3x.push(parseFloat(cols[4]));group3y.push(parseFloat(cols[5]));}}var trace1 = {x: group1x,y: group1y,mode: 'markers',type: 'scatter',name: 'Group 1',marker: { size: 12 }};var trace2 = {x: group2x,y: group2y,mode: 'markers',type: 'scatter',name: 'Group 2',marker: { size: 12 }};var trace3 = {x: group3x,y: group3y,mode: 'markers',type: 'scatter',name: 'Group 3',marker: { size: 12 }};var data = [trace1, trace2, trace3];var layout = {title: 'Grouped Scatter Plot',xaxis: {title: 'X Axis'},yaxis: {title: 'Y Axis'}};Plotly.newPlot('scatter-plot', data, layout);}</script>
</body>
</html>

说明：

HTML表单：用于用户手动输入每个组的X和Y值。
文件上传：提供了一个文件输入框和按钮，用于上传CSV文件。
JavaScript函数：
- plotData：处理用户输入的数据并生成散点图。
- uploadFile：读取用户上传的CSV文件，并调用processCSVData函数处理CSV数据。
- processCSVData：解析CSV数据并生成散点图。

CSV文件格式：

CSV文件应该包含每组的X和Y值，按列排列，例如：

group1x,group1y,group2x,group2y,group3x,group3y
1,10,1.5,16,2,6
2,15,2.5,5,3,8
3,13,3.5,11,4,10
4,17,4.5,9,5,14
5,10,5.5,15,6,13

通过这种方式，用户既可以手动输入数据，也可以通过上传文件来生成分组散点图。你可以根据需要进一步调整和扩展代码。

在这里插入图片描述

html做一个分组散点图图的软件

在HTML中创建一个分组散点图，可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能，易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例： 要添加文件上传功能，可以让用户上传包含数据的文…...

编程日记 2024/6/22 18:54:11

【SQL】UNION 与 UNION ALL 的区别

在 SQL 中，UNION 和 UNION ALL 都用于将两个或多个结果集合并为一个结果集，但它们在处理重复数据方面有显著区别。以下是它们的详细区别： 1. UNION UNION 操作符用于合并两个或多个 SELECT 语句的结果集，并自动去除结果集中重复…...

编程日记 2024/6/22 18:51:08

分类判决界面---W-H、H-K算法

本篇文章是博主在人工智能等领域学习时，用于个人学习、研究或者欣赏使用，并基于博主对人工智能等领域的一些理解而记录的学习摘录和笔记，若有不当和侵权之处，指出后将会立即改正，还望谅解。文章分类在AI学习笔记&#…...

编程日记 2024/6/22 18:50:07

Python基础教程（三十）：math模块

💝💝💝首先，欢迎各位来到我的博客，很高兴能够在这里和您见面！希望您在这里不仅可以有所收获，同时也能感受到一份轻松欢乐的氛围，祝你生活愉快！ 💝&#x1f49…...

编程日记 2024/6/22 18:49:06

你只是重新发现了一些东西

指北君关于另外一条思维路径的发现。 "自以为是"的顿悟时刻有很多时候，我会"自以为是"的发现/发明一些东西。这种"自以为是"的时刻通常还带有一些骄傲自豪的情绪。这种感觉特别像古希腊博学家阿基米德在苦思冥想如何测量不规则物体…...

编程日记 2024/6/22 18:46:04

【英伟达GPU的挑战者】Groq—AI大模型推理的革命者

目录引言第一部分：Groq简介第二部分：Groq的特点与优势1、高性能推理加速2、近存计算技术3、专用ASIC芯片设计4、低延迟与高吞吐量5、成本效益分析6、易用性与集成性7、软件与硬件的协同设计第三部分：Groq的使用指南1、准备工作2、简单使用样…...

编程日记 2024/6/22 18:45:03

Python学习路线

Python学习路线领取资料一、Python基础知识 Python入门：了解Python的安装方法、如何运行Python程序以及交互模式的使用，同时学习注释的添加方法。数据类型：掌握Python中的各种数据类型，包括数字、布尔值、字符串、列表、元…...

编程日记 2024/6/22 18:44:02

C++ std::forward()

在线调试网站： https://wandbox.org/ #include <iostream> #include <thread> #include <mutex> void func(int &&args) {std::cout << args << std::endl; }int main () {int a 10;func(20); …...

编程日记 2024/6/22 18:43:01

常见的8种排序（含代码）：插入排序、冒泡排序、希尔排序、快速排序、简单选择排序、归并排序、堆排序、基数排序

时间复杂度O(n^2) 1、插入排序 (Insertion Sort) 从第一个元素开始，该元素可以认为已经被排序；取出下一个元素，在已经排序的元素序列中从后向前扫描；如果该元素（已排序）大于新元素，将该元素移到…...

编程日记 2024/6/22 18:42:00

go语言day2

使用cmd 中的 go install ； go build 命令出现 go cannot find main module 错误怎么解决？ go学习-问题记录(开发环境)go: cannot find main module； see ‘go help modules‘_go: no flags specified (see go help mod edit)-CSDN博客在本…...

编程日记 2024/6/22 18:39:58

<div class"echarts-box" id"multiBarPlusLine"></div>import * as echarts from echarts;mounted() {this.getMultiBarPlusLine() },getMultiBarPlusLine() {const container document.getElementById(multiBar…...

编程日记 2024/6/22 18:38:57

cesium for unity 打包webgl失败，提示不支持

platform webgl is not supported with HDRP use the Vulkan graphics AR instead....

编程日记 2024/6/22 18:35:55

python开发基础——day7 序列类型方法

一、初识序列类型方法序列类型的概念：数据的集合，在序列类型里面可以存放任意的数据，也可以对数据进行更方便的操作，这个操作是叫增删改查(crud) ( 增加(Creat)，读取查询(Retrieve)，更新(Update)&#xf…...

编程日记 2024/6/22 18:32:51

用java写一个二叉树翻转

class TreeNode {int val;TreeNode left, right;TreeNode(int val) {this.val val;left right null;} }public class BinaryTree {TreeNode root;// 递归翻转二叉树public TreeNode invertTree(TreeNode root) {if (root null) {return null;}// 递归翻转左子树和右子树Tre…...

编程日记 2024/6/22 18:29:49

数学建模系列（3/4）：典型建模方法

目录引言 1. 回归分析 1.1 线性回归基本概念 Matlab实现 1.2 多元回归基本概念 Matlab实现 1.3 非线性回归基本概念 Matlab实现 2. 时间序列分析 2.1 时间序列的基本概念 2.2 移动平均基本概念 Matlab实现 2.3 指数平滑基本概念 Matlab实现 2.4 ARIM…...

编程日记 2024/6/22 18:28:48

AI播客下载：Machine Learning Street Talk（AI机器学习）

该频道由 Tim Scarfe 博士、Yannic Kilcher 博士和 Keith Duggar 博士管理。他们做了出色的工作，对每个节目进行了彻底的研究，并与机器学习行业中一些受过最高教育、最全面的嘉宾进行了双向对话。每一集都会教授一些新内容，并且提供未经过滤…...

编程日记 2024/6/22 18:27:47

鱼缸补水器工作原理是什么

鱼缸补水器是一种应用广泛的智能设备，主要用于自动监测和补充鱼缸内的水位，以确保鱼类生存环境的稳定。其工作原理简单而高效，为饲主提供了方便和安全的使用体验。该补水器通常由两部分组成：控制器和吸盘。首先，用户…...

编程日记 2024/6/22 18:26:46

Linux-Tomcat服务配置到系统服务

目录前言一、系统环境二、配置步骤step1 了解环境的安装路径step2 配置生成tomcat.pid文件step3 配置tomcat.service文件三、测试systemctl命令管理Tomcat服务3.1 systemctl命令启动Tomcat服务3.2 systemctl命令查看Tomcat服务3.3 systemctl命令关闭Tomcat服务3.4 systemctl命…...

编程日记 2024/6/22 18:24:44

Python抓取高考网图片

Python抓取高考网图片一、项目介绍二、完整代码一、项目介绍本次采集的目标是高考网（http://www.gaokao.com/gkpic/）的图片，实现图片自动下载。高考网主页如下图：爬取的流程包括寻找数据接口，发送请求，解析图片链接，向图片链接发送请求获取数据，最后保存数据。二…...

编程日记 2024/6/22 18:23:43

Vue配置项data

data 目录 data 目录类型介绍关键原理编译过程 Vue2Vue3 📌Vue.js 中的 data（Obj/Function）属性是 Vue 实例的一个配置选项类型介绍对象式对于根实例或者非复用组件，通常直接提供一个对象字面量作为 data 的值。在对象式中…...

编程日记 2024/6/22 18:19:39

在IDEA 2024.1.3 (Community Edition)中创建Maven项目

本篇博客承继自博客：Windows系统Maven下载安装-CSDN博客 Maven版本：maven-3.9.5 修改设置： 首先先对Idea的Maven依赖进行设置；打开Idea，选择“Costomize”，选择最下边的"All settings" 之后找…...

编程日记 2024/6/22 18:17:37

动手学深度学习（Pytorch版）代码实践 -卷积神经网络-28批量规范化

28批量规范化 """可持续加速深层网络的收敛速度""" import torch from torch import nn import liliPytorch as lp import matplotlib.pyplot as pltdef batch_norm(X, gamma, beta, moving_mean, moving_var, eps, momentum):""&quo…...

编程日记 2024/6/22 18:16:35

Apache Paimon系列之：Append Table和Append Queue

Apache Paimon系列之：Append Table和Append Queue 一、Append Table二、Data Distribution三、自动小文件合并四、Append Queue五、压缩六、Streaming Source七、Watermark Definition八、Bounded Stream 一、Append Table 如果表没有定义主键，则默认为…...

编程日记 2024/6/22 18:15:34

Vue使用vue-esign实现在线签名加入水印

Vue在线签名一、目的二、样式三、代码1、依赖2、代码2.1 在线签名组件2.1.1 基础的2.1.2 携带时间水印的 2.2父组件一、目的又来了一个问题，直接让我在线签名（还不能存储base64），并且还得上传，我直接***违禁词。好…...

编程日记 2024/6/22 18:13:32

与码无关：分数限制下，选好专业还是选好学校？

本文的目标读者：24届的高考生和家长。写这篇非技术性文章，是因为我看到了24届考生和21年的我同样迷茫。事先声明，本文带有强烈的个人思考色彩，可能会引起不适，如有不同观点，欢迎在评论区讨论。一、前言…...

编程日记 2024/6/22 18:12:30

什么是负载均衡技术？

随着网络技术的快速发展，互联网行业也越来越广泛，人们的日常生活中也离不开网络技术，大量的用户进行浏览访问网站时，企业会使用负载均衡技术，降低当前网站的负载，以此来提高网站的访问速度。今天小编就来给…...

编程日记 2024/6/22 18:11:29

存在重复元素Ⅱ python3

存在重复元素Ⅱ 问题描述解题思路代码实现复杂度问题描述给你一个整数数组 nums 和一个整数 k ，判断数组中是否存在两个不同的索引 i 和 j ，满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在，返回 true ；否则&#xff…...

编程日记 2024/6/22 18:09:27

【CV炼丹师勇闯力扣训练营 Day13：§6二叉树1】

CV炼丹师勇闯力扣训练营代码随想录算法训练营第13天二叉树的递归遍历二叉树的迭代遍历、统一迭代二叉树的层序遍历一、二叉树的递归遍历（深度优先搜索） 【递归步骤】 1.确定递归函数的参数和返回值：确定哪些参数是递归的过程中需要处理…...

编程日记 2024/6/22 18:07:25

代码随想录算法训练营第46天 [ 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II 123.买卖股票的最佳时机III ]

代码随想录算法训练营第46天 [ 121. 买卖股票的最佳时机 122.买卖股票的最佳时机II 123.买卖股票的最佳时机III ] 一、121. 买卖股票的最佳时机链接: 代码随想录. 思路：dp[i][0] 第i天持有股票的最大利润 dp[i][1] 第i天不持有股票的最大利润做题状态：…...

编程日记 2024/6/22 18:06:24