在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
通过这种方式，用户既可以手动输入数据，也可以通过上传文件来生成分组散点图。你可以根据需要进一步调整和扩展代码。
![[力扣二叉树]本地调试环境指导手册](https://img-blog.csdnimg.cn/direct/cc24eeb4739e431c87cf2c3ef4cf8276.png#pic_center)
