DataViz - 数据可视化工具

一个简单易用的在线数据可视化工具，支持Excel和CSV文件上传，快速生成各种类型的交互式图表。

🌟 功能特性

📊 数据支持

• 多格式支持：Excel (.xlsx, .xls) 和 CSV 文件
• 拖拽上传：支持拖拽文件到页面或点击浏览
• 数据预览：上传后立即预览数据内容
• 智能解析：自动识别数据类型和结构

📈 图表类型

• 柱状图：适合比较不同类别的数据
• 折线图：展示数据随时间或其他连续变量的变化趋势
• 饼图：显示各部分占整体的比例关系
• 环形图：现代化的饼图变体，更加美观
• 雷达图：多维度数据对比分析

🎨 自定义选项

• 6种颜色主题：蓝色、绿色、紫色、红色、黄色、灰色
• 图表标题：自定义图表标题
• 图例控制：显示/隐藏图例
• 网格线：显示/隐藏网格线
• 响应式设计：自适应不同屏幕尺寸

💾 导出功能

• 多种格式：PNG、JPG、SVG、PDF（部分格式需要额外库支持）
• 自定义尺寸：设置导出图片的宽度和高度
• 背景选择：透明或白色背景
• 文件命名：自定义导出文件名

🚀 快速开始

在线使用

直接在浏览器中打开 index.html 文件即可使用，无需安装任何软件。

本地部署

1. 克隆或下载项目文件
2. 在浏览器中打开 index.html
3. 开始使用！

📖 使用指南

1. 上传数据

• 点击"浏览文件"按钮选择文件，或直接拖拽文件到上传区域
• 支持的文件格式：.xlsx、.xls、.csv
• 上传成功后会显示文件信息和数据预览

2. 配置图表

• 选择图表类型：从左侧面板选择合适的图表类型
• 设置数据列：
  • X轴/类别：选择作为横轴或分类的数据列
  • Y轴/数值：选择作为纵轴或数值的数据列
• 自定义样式：
  • 输入图表标题
  • 选择颜色主题
  • 设置图例和网格线显示

3. 生成图表

• 点击"生成图表"按钮
• 图表将在下方区域显示
• 支持鼠标悬停查看详细数据

4. 导出图表

• 选择导出格式（PNG、JPG等）
• 设置文件名和图片尺寸
• 选择背景类型
• 点击"导出图表"按钮下载

🛠️ 技术栈

前端框架

• HTML5：现代化的网页结构
• CSS3：响应式设计和动画效果
• JavaScript (ES6+)：交互逻辑和数据处理

UI 框架

• Tailwind CSS：实用优先的CSS框架
• Font Awesome：图标库

图表库

• Chart.js：强大的图表绘制库
• 支持多种图表类型
• 响应式和交互式

数据处理

• SheetJS (xlsx)：Excel文件解析
• 支持 .xlsx、.xls 格式
• CSV 文件原生解析

📁 项目结构

DataViz/
│
├── index.html              # 主页面文件
├── README.md              # 项目文档
├── LICENSE                # 开源许可证
├── USAGE_GUIDE.md         # 详细使用指南
├── TROUBLESHOOTING.md     # 故障排除指南
├── sample-data.csv        # 示例数据文件
└── docs/                  # 文档目录（可选）
    ├── screenshots/       # 截图资源
    └── examples/          # 示例文件

🔧 浏览器兼容性

• Chrome: 60+
• Firefox: 55+
• Safari: 12+
• Edge: 79+

📝 使用示例

示例数据格式

CSV 格式：

月份,销售额,利润
1月,15000,3000
2月,18000,3600
3月,22000,4400
4月,19000,3800

Excel 格式：

月份	销售额	利润
1月	15000	3000
2月	18000	3600
3月	22000	4400
4月	19000	3800

⚠️ 注意事项

1. 文件大小限制：建议上传文件不超过10MB
2. 数据格式：确保数据格式正确，第一行为表头
3. 浏览器支持：使用现代浏览器以获得最佳体验
4. 隐私安全：所有数据处理都在本地进行，不会上传到服务器

🐛 常见问题

Q: 上传文件后没有反应？

A: 请检查文件格式是否正确，确保是 .xlsx、.xls 或 .csv 格式。

Q: 图表显示不正确？

A: 请确保选择的数据列包含有效数据，X轴和Y轴不能选择同一列。

Q: 导出功能不工作？

A: 确保已经生成了图表，某些导出格式（如SVG、PDF）需要额外的库支持。

Q: 数据预览显示乱码？

A: 可能是编码问题，建议使用UTF-8编码保存CSV文件。

Q: 生成图表时出现错误？

A: 请查看 故障排除指南 获取详细的解决方案。

✨ 新增功能

🛡️ 容错处理

• 文件验证：全面的文件类型、大小、格式验证
• 数据清理：自动处理空行、格式不一致等问题
• 错误恢复：智能的错误提示和恢复机制
• 性能优化：大数据量自动限制和优化

🎯 用户体验

• 键盘快捷键：支持常用操作的快捷键
• 设置保存：自动保存用户偏好设置
• 帮助系统：内置详细的帮助文档
• 离线支持：完全离线可用，无需网络连接

🔧 技术增强

• 智能CSV解析：处理复杂的CSV格式（引号、逗号转义）
• 数据类型检测：自动识别数值和文本类型
• 内存管理：优化大文件处理性能
• 浏览器兼容：支持现代浏览器的所有功能

🚧 开发计划

• 支持更多图表类型（散点图、气泡图、热力图）
• 添加数据过滤和排序功能
• 支持多个数据系列对比
• 添加图表模板和主题
• 支持数据统计分析（均值、中位数等）
• 添加图表动画和交互效果
• 支持数据导入API
• 添加图表分享功能

📄 许可证

本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。

🤝 贡献

欢迎提交 Issues 和 Pull Requests 来帮助改进项目！

---

⭐ 如果这个项目对您有帮助，请给它一个星标！