feat: 新增表格图片生成功能

- 新增 POST/GET /api/table 接口
- 支持5种主题风格、自定义字体大小、斑马纹等
- 前端新增图表/表格模式切换
- 完美支持中文内容显示(Noto Sans CJK SC)
- 更新 API 文档和 README
This commit is contained in:
2026-07-17 12:40:47 +08:00
parent 02212e9ef7
commit e2f9892a2a
5 changed files with 657 additions and 14 deletions
+63 -2
View File
@@ -1,9 +1,9 @@
# 📊 数据可视化图表生成器
一个简洁强大的数据可视化工具,支持 **Web UI****API** 两种方式生成精美的对比图表图片。
一个简洁强大的数据可视化工具,支持 **Web UI****API** 两种方式生成精美的对比图表和表格图片。
![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Version](https://img.shields.io/badge/version-1.1.0-green.svg)
![Version](https://img.shields.io/badge/version-1.2.0-green.svg)
## ✨ 功能特性
@@ -12,6 +12,12 @@
- **折线图** - 支持平滑曲线、面积填充
- **混合图** - 柱状图+折线图组合展示
### 📋 表格功能
- **表格图片生成** - 根据数据生成精美的表格图片
- **多种主题** - 与图表共享5种主题风格
- **自定义样式** - 字体大小、斑马纹、边框等可配置
- **中文支持** - 完美支持中文内容显示
### 🎨 自定义配置
- **主题风格** - 5种预设主题(默认/深色/马卡龙/渐变/复古)
- **颜色自定义** - 每个系列可单独设置颜色
@@ -26,6 +32,8 @@
### 📡 API 接口
- **POST /api/chart** - JSON 请求体生成图表(完整参数支持)
- **GET /api/chart** - URL 参数生成图表(简单场景)
- **POST /api/table** - JSON 请求体生成表格图片
- **GET /api/table** - URL 参数生成表格图片
- 返回 PNG 图片,支持自定义分辨率和像素倍率
### 📥 导出功能
@@ -96,6 +104,26 @@ with open('chart.png', 'wb') as f:
f.write(resp.content)
```
### 生成表格图片
#### POST 方式
```bash
curl -X POST http://localhost:16016/api/table \
-H "Content-Type: application/json" \
-d '{
"data": "姓名, 部门, 职位, 薪资\n张三, 技术部, 工程师, 15000\n李四, 产品部, 产品经理, 18000\n王五, 设计部, UI设计师, 16000",
"title": "员工信息表",
"theme": "default"
}' -o table.png
```
#### GET 方式
```bash
curl "http://localhost:16016/api/table?data=产品,价格,库存\n手机,2999,100\n平板,1999,50&title=产品列表" -o table.png
```
## 📡 API 文档
### POST /api/chart
@@ -139,6 +167,38 @@ with open('chart.png', 'wb') as f:
| width | 图片宽度 |
| height | 图片高度 |
### POST /api/table
通过 JSON 请求体生成表格图片。
**请求参数:**
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| data | string | ✅ | - | CSV 格式数据(`\n` 换行,第一行表头) |
| title | string | - | "" | 表格标题 |
| theme | string | - | default | 主题:`default` / `dark` / `macarons` / `gradient` / `retro` |
| fontSize | number | - | 14 | 字体大小 |
| cellPadding | number | - | 12 | 单元格内边距 |
| borderWidth | number | - | 1 | 边框宽度 |
| stripeRows | boolean | - | true | 是否斑马纹 |
| pixelRatio | number | - | 2 | 像素倍率(清晰度) |
| maxWidth | number | - | 1200 | 最大宽度(px) |
**返回:** `image/png` 二进制流
### GET /api/table
通过 URL 参数生成表格图片。
| 参数 | 说明 |
|------|------|
| data | CSV 数据(换行用 `\n` 表示) |
| title | 表格标题 |
| theme | 主题风格 |
| fontSize | 字体大小 |
| stripeRows | 是否斑马纹 |
### GET /api/health
健康检查,返回服务状态。
@@ -180,6 +240,7 @@ data-chart-tool/
## 🔧 开发计划
- [x] 支持 API 生成图表图片
- [x] 支持表格图片生成
- [ ] 支持饼图、雷达图等更多图表类型
- [ ] 支持从 Excel/CSV 文件导入
- [ ] 支持数据编辑和实时预览