CSV文件可视化分析工具 - 使用说明

项目简介

CSV文件可视化分析工具是一个基于浏览器的数据分析工具，支持上传、解析和可视化各种格式的数据文件，特别是CSV、DAT、TXT和Excel文件。该工具具有强大的编码检测和处理能力，能够正确处理GB2312、GBK和UTF-8等多种编码格式的文件。

主要功能

1. 文件上传和解析

• 支持CSV、DAT、TXT和Excel文件格式
• 支持自动检测和手动选择文件编码
• 支持Excel文件的多个Sheet选择和合并
• 支持TAB、逗号和空格作为分隔符
• 支持TXT文件的特殊格式：TAB分隔且列名与数值用冒号分隔
• 支持空格分隔的日期时间数据格式（如：2026-03-14 03:59:33 99.451 23.570）

2. 编码处理

• 自动检测文件编码（GB2312、GBK、UTF-8等）
• 支持手动选择编码格式，放在文件名下方便于操作
• 使用浏览器内置的TextDecoder API进行准确的编码转换
• 保留备用解码方案，确保在各种浏览器环境下都能正常工作
• 解码成功后显示解析结果，包括编码类型、数据行数等信息
• 数据文件和控制文件的编码选择完全独立

3. 数据处理

• 自动检测和合并多行行标题，去掉多余空格
• 智能识别时间值和数据值，避免将数据行误识别为标题行
• 支持零列过滤功能，可选择是否过滤全为0的列
• 支持数据表格显示和分页，默认显示10行
• 支持数据导出功能，可将筛选后的数据导出为CSV文件
• 支持原始数据模式下的时间筛选

4. 可视化功能

• 支持绘制折线图，可选择X轴和Y轴
• 支持多Y轴数据同时显示，左右Y轴独立配置
• 支持Y轴"全选"按钮，快速选择所有数据列
• 支持Y轴"清除"按钮，快速清除所有选中项
• 支持调整X轴时间范围，可手动输入或使用现代化滑块控件
• 支持导出图表为图片

5. 时间筛选

• 支持上传DemControl时间筛选文件
• 可选择筛选起始时间，默认选择第一个有效时间
• 筛选数据文件中所选时间+15分钟范围内的数据
• 筛选后自动设置X轴范围输入框的值
• 原始数据模式下也应用时间筛选

6. 开发规范

• 内置dev-standard开发规范SKILL
• 代码备份、需求文档修订、功能测试、版本维护一体化流程
• 支持Git和压缩归档两种备份方式

如何使用

1. 上传数据文件：点击左侧的"数据文件导入"区域，上传DemDec格式的数据文件
2. 选择编码：系统会自动检测文件编码，如需调整可在文件名下方的编码选择器中选择正确的编码格式
3. 选择Excel工作表：如果上传的是Excel文件，可以选择要解析的工作表或合并多个Sheet
4. 配置坐标轴：在"折线图坐标轴配置"区域选择X轴和Y轴，可使用"全选"按钮快速选择所有数据列
5. 绘制图表：点击"绘制折线图"按钮生成图表
6. 调整时间范围：使用现代化滑块控件调整X轴范围来缩放图表，支持悬停显示数值标签
7. 导出图表：点击"导出图表为图片"按钮保存图表
8. 导出数据：点击"数据导出"按钮将筛选后的数据导出为CSV文件，文件名不包含毫秒但数据内容保留毫秒
9. 时间筛选：如果需要按时间筛选，可以上传DemControl时间筛选文件并选择起始时间，原始数据模式下也应用时间筛选

支持的文件格式

• CSV文件：逗号分隔值文件
• DAT文件：数据文件，支持多种分隔符
• TXT文件：文本文件，支持多种分隔符，包括TAB分隔且列名与数值用冒号分隔的特殊格式
• Excel文件：.xlsx和.xls格式，支持多个Sheet

技术实现

• 前端框架：纯HTML、CSS和JavaScript
• UI框架：Bootstrap 5
• 图表库：Chart.js
• Excel解析：xlsx.js
• 编码处理：浏览器内置的TextDecoder API
• 文件处理：FileReader API
• 构建工具：Vite，支持多页面应用构建

版本更新记录

1.8.0 - 2026-06-25

界面美化

• 重新设计了X轴范围拖动条，采用现代圆形手柄设计
• 使用渐变色彩方案（紫色到粉色），视觉效果更精美
• 添加悬停放大动画和数值标签显示，交互体验更好

功能增强

• 离线可用性提升：xlsx库改为本地文件加载，无需网络连接
• 原始数据时间筛选：原始数据模式下也支持时间筛选功能
• 多行字段合并优化：自动去掉多余空格，数据更整洁
• 布局优化：手动选择编码移至文件名下方便于操作

1.7.4 - 2026-05-27

功能优化

• 导出文件名优化：文件名不包含毫秒，但数据内容保留毫秒
• 控制文件独立手动编码选择：两个文件的编码选择完全独立

1.4.0 - 2026-03-11

新增功能

• 添加数据导出功能，可将筛选后的数据导出为CSV文件
• 添加Y轴"全选"按钮，支持快速选择所有数据列
• 添加Y轴"清除"按钮，支持快速清除所有选中项
• 优化TXT文件处理，支持TAB分隔且列名与数值用冒号分隔的格式

功能改进

• 改进标题行检测逻辑，避免将数据行误识别为标题行
• 优化X轴滑块控制，解决滑块回弹问题
• 改进时间筛选功能，自动设置X轴范围输入框的值
• 优化编码检测和处理，提高识别准确性
• 优化数据表格显示，默认显示10行

错误修复

• 修复编码识别错误导致的乱码问题
• 修复X轴滑块控制回弹问题
• 修复标题行合并时的空格问题
• 修复帮助页面在部署后无法访问的问题

1.1.0 - 2026-02-25

编码处理优化

• 修复了GB2312编码文件显示乱码的问题
• 优化了编码检测和处理逻辑，提高了编码识别的准确性
• 使用浏览器内置的TextDecoder API进行GB2312/GBK/GB18030编码转换
• 保留了备用解码方案，确保在各种浏览器环境下都能正常工作

功能改进

• 改进了标题行检测和合并逻辑，确保正确识别多行行标题
• 优化了时间值检测算法，避免将非时间值误识别为时间
• 增加了对TAB分隔符的支持，提高了文本文件的兼容性
• 改进了零列过滤功能，添加了用户控制选项

错误处理

• 增强了编码转换的错误处理和日志记录
• 添加了详细的错误处理机制，提高了系统的稳定性
• 实现了多级降级处理，确保在各种异常情况下都能正常工作

1.0.0 - 2026-02-14

新增功能

• 增加了Excel文件的多个Sheet支持，使用下拉列表选择
• 实现了在同一个Excel文件中多次切换工作表的功能
• 添加了"重新选择工作表"按钮，方便用户快速切换

界面优化

• 取消了隐藏DemControl文件导入框的设置，改为一直显示
• 减小了文件导入框的占位大小，使界面更加紧凑
• 优化了文件导入框的样式，提高了视觉效果

错误修复

• 修复了变量初始化顺序错误导致的"Cannot access 'resetDataBtn' before initialization"错误
• 修复了Excel文件处理卡住的问题
• 修复了重新选择工作表时报告"缺少Excel文件信息"的问题

稳定性改进

• 提高了文件处理的可靠性和稳定性
• 优化了Sheet选择流程，使用下拉列表替代对话框
• 添加了详细的日志输出，便于调试和理解处理过程

运行方式

开发模式

npm install
npm run dev

然后在浏览器中访问 http://localhost:5173

生产构建

npm run build

预览构建结果

npm run preview

部署到GitHub Pages

npm run deploy:github

注意事项

• 对于大型文件，解析可能需要一些时间
• 建议使用现代浏览器（Chrome、Firefox、Edge等）以获得最佳体验
• 如果遇到编码问题，可以尝试手动选择编码格式
• Excel文件的解析依赖于xlsx.js库，较大的Excel文件可能需要更长的解析时间
• TXT文件支持TAB分隔且列名与数值用冒号分隔的格式，如"时间 列名1:值1 列名2:值2"
• 支持空格分隔的日期时间数据格式，如"2026-03-14 03:59:33 99.451 23.570"
• 项目已配置国内npm镜像源（npmmirror.com），可提高依赖安装速度

联系方式

如有问题或建议，请联系项目维护者。