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

在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 Uploadtitle>
    <script src="https://cdn.plot.ly/plotly-latest.min.js">script>
head>
<body>
    <h1>Grouped Scatter Ploth1>
    <form id="dataForm">
        <h3>Group 1h3>
        <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 2h3>
        <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 3h3>
        <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 Databutton>
    form>
    
    <h2>Or Upload CSV Fileh2>
    <input type="file" id="fileInput" accept=".csv">
    <button type="button" onclick="uploadFile()">Upload and Plotbutton>

    <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

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

在这里插入图片描述

相关阅读:
手机记笔记软件用哪个?
ChatGPT AIGC 制作大屏可视化分析案例
 出海嘉年华开发者说，模式复制、本地化创新和未来机会
 数据结构-冒泡排序Java实现
 Springboot部署服务器项目上线
 行为型设计模式-状态模式
 Kafka高可用集群搭建
 保证接口安全的11个小技巧
 【Mysql】InnoDB数据页结构（五）
pyQt界面制作（登录+跳转页面）
原文地址：https://blog.csdn.net/weixin_47634487/article/details/139864428