Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 hz4th_coder
|
13abdea15b | ||
|
hz4th_coder
|
e2f9892a2a | ||
|
hz4th_coder
|
02212e9ef7 | ||
|
hz4th_coder
|
df2981889e |
@@ -0,0 +1,310 @@
|
||||
# 📡 数据可视化图表生成器 - API 文档
|
||||
|
||||
> 版本：v1.1.0 | 基础地址：`http://192.168.0.101:16016`
|
||||
|
||||
---
|
||||
|
||||
## 接口总览
|
||||
|
||||
| 方法 | 路径 | 说明 |
|
||||
|------|------|------|
|
||||
| POST | `/api/chart` | 生成图表图片（JSON body，推荐） |
|
||||
| GET | `/api/chart` | 生成图表图片（URL 参数） |
|
||||
| GET | `/api/health` | 健康检查 |
|
||||
| GET | `/api/docs` | 返回本文档（JSON） |
|
||||
|
||||
---
|
||||
|
||||
## 1. POST /api/chart（推荐）
|
||||
|
||||
通过 JSON 请求体生成图表，返回 PNG 图片。
|
||||
|
||||
### 请求
|
||||
|
||||
```
|
||||
POST /api/chart
|
||||
Content-Type: application/json
|
||||
```
|
||||
|
||||
### 参数说明
|
||||
|
||||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||||
|------|------|:----:|--------|------|
|
||||
| `data` | string | ✅ | — | CSV 格式数据，`\n` 换行，第一行表头，第一列横坐标 |
|
||||
| `chartType` | string | — | `bar` | 图表类型：`bar` / `line` / `bar-line` |
|
||||
| `title` | string | — | `""` | 图表标题 |
|
||||
| `theme` | string | — | `default` | 主题风格：`default` / `dark` / `macarons` / `gradient` / `retro` |
|
||||
| `showLegend` | boolean | — | `true` | 显示图例 |
|
||||
| `showGrid` | boolean | — | `true` | 显示网格线 |
|
||||
| `showLabel` | boolean | — | `false` | 显示数据标签 |
|
||||
| `stackMode` | boolean | — | `false` | 堆叠模式 |
|
||||
| `smoothLine` | boolean | — | `true` | 折线平滑 |
|
||||
| `enableSplit` | boolean | — | `false` | 启用区域分割 |
|
||||
| `splitIndex` | number | — | `3` | 分割位置（第几个数据后分割） |
|
||||
| `leftLabel` | string | — | `"左侧"` | 左侧区域标签 |
|
||||
| `rightLabel` | string | — | `"右侧"` | 右侧区域标签 |
|
||||
| `splitStyle` | string | — | `"solid"` | 分割线样式：`solid` / `dashed` / `dotted` |
|
||||
| `width` | number | — | `800` | 图片宽度（px） |
|
||||
| `height` | number | — | `500` | 图片高度（px） |
|
||||
| `pixelRatio` | number | — | `2` | 像素倍率（越大越清晰） |
|
||||
|
||||
### 返回
|
||||
|
||||
- **Content-Type:** `image/png`
|
||||
- **响应头:**
|
||||
- `X-Chart-Width` — 图片宽度
|
||||
- `X-Chart-Height` — 图片高度
|
||||
- `X-Chart-Pixel-Ratio` — 像素倍率
|
||||
|
||||
### curl 示例
|
||||
|
||||
**基础柱状图：**
|
||||
```bash
|
||||
curl -X POST http://192.168.0.101:16016/api/chart \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"data": "产品, Q1, Q2, Q3, Q4\n手机, 1200, 1800, 2100, 2500\n平板, 800, 950, 1100, 1300\n笔记本, 600, 750, 900, 1050",
|
||||
"chartType": "bar",
|
||||
"title": "季度销售对比"
|
||||
}' -o chart.png
|
||||
```
|
||||
|
||||
**深色主题折线图 + 数据标签：**
|
||||
```bash
|
||||
curl -X POST http://192.168.0.101:16016/api/chart \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"data": "月份, 营收(万), 利润(万), 用户(千)\n1月, 500, 80, 50\n2月, 680, 120, 85\n3月, 820, 160, 130\n4月, 1050, 230, 200\n5月, 1380, 350, 320",
|
||||
"chartType": "line",
|
||||
"title": "年度增长趋势",
|
||||
"theme": "dark",
|
||||
"showLabel": true,
|
||||
"width": 900,
|
||||
"height": 500
|
||||
}' -o trend.png
|
||||
```
|
||||
|
||||
**区域分割对比图：**
|
||||
```bash
|
||||
curl -X POST http://192.168.0.101:16016/api/chart \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"data": "月份, 方案A, 方案B\n1月, 85, 78\n2月, 88, 82\n3月, 92, 88\n4月, 90, 95\n5月, 95, 98\n6月, 98, 102",
|
||||
"chartType": "bar",
|
||||
"title": "方案对比",
|
||||
"theme": "gradient",
|
||||
"enableSplit": true,
|
||||
"splitIndex": 3,
|
||||
"leftLabel": "上半年",
|
||||
"rightLabel": "下半年",
|
||||
"splitStyle": "dashed"
|
||||
}' -o compare.png
|
||||
```
|
||||
|
||||
**堆叠柱状图：**
|
||||
```bash
|
||||
curl -X POST http://192.168.0.101:16016/api/chart \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"data": "季度, 线上, 线下, 批发\nQ1, 300, 200, 150\nQ2, 450, 280, 200\nQ3, 520, 350, 180\nQ4, 680, 400, 250",
|
||||
"chartType": "bar",
|
||||
"title": "渠道销售分布",
|
||||
"stackMode": true,
|
||||
"theme": "macarons"
|
||||
}' -o stack.png
|
||||
```
|
||||
|
||||
**高分辨率大图：**
|
||||
```bash
|
||||
curl -X POST http://192.168.0.101:16016/api/chart \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"data": "产品, 2023, 2024, 2025\nA, 100, 200, 300\nB, 150, 250, 350",
|
||||
"width": 1600,
|
||||
"height": 900,
|
||||
"pixelRatio": 3
|
||||
}' -o hd-chart.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. GET /api/chart
|
||||
|
||||
通过 URL 参数生成图表，适合简单场景或直接在浏览器中使用。
|
||||
|
||||
### 参数
|
||||
|
||||
| 参数 | 说明 |
|
||||
|------|------|
|
||||
| `data` | CSV 数据（换行用 `\n` 表示，需 URL 编码） |
|
||||
| `type` | 图表类型（bar / line / bar-line） |
|
||||
| `title` | 图表标题 |
|
||||
| `theme` | 主题风格 |
|
||||
| `width` | 图片宽度 |
|
||||
| `height` | 图片高度 |
|
||||
|
||||
### curl 示例
|
||||
|
||||
```bash
|
||||
curl "http://192.168.0.101:16016/api/chart?data=%E4%BA%A7%E5%93%81,Q1,Q2%0A%E6%89%8B%E6%9C%BA,100,200%0A%E5%B9%B3%E6%9D%BF,150,250&type=bar&title=%E6%B5%8B%E8%AF%95" -o chart.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. GET /api/health
|
||||
|
||||
健康检查。
|
||||
|
||||
```bash
|
||||
curl http://192.168.0.101:16016/api/health
|
||||
```
|
||||
|
||||
返回：
|
||||
```json
|
||||
{
|
||||
"status": "ok",
|
||||
"service": "data-chart-tool",
|
||||
"version": "1.1.0",
|
||||
"endpoints": {
|
||||
"POST /api/chart": "生成图表图片（JSON body）",
|
||||
"GET /api/chart": "生成图表图片（URL 参数）",
|
||||
"GET /api/health": "健康检查"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 数据格式说明
|
||||
|
||||
CSV 格式，规则：
|
||||
|
||||
1. **第一行**：表头（系列名称）
|
||||
2. **第一列**：横坐标值
|
||||
3. **其余单元格**：数值
|
||||
4. **分隔符**：逗号（自动识别制表符和 `|`）
|
||||
|
||||
```
|
||||
类别, 系列1, 系列2, 系列3
|
||||
A, 10, 20, 30
|
||||
B, 15, 25, 35
|
||||
C, 20, 30, 40
|
||||
```
|
||||
|
||||
在 JSON 中用 `\n` 表示换行：
|
||||
```json
|
||||
{
|
||||
"data": "类别, 系列1, 系列2, 系列3\nA, 10, 20, 30\nB, 15, 25, 35\nC, 20, 30, 40"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 各语言调用示例
|
||||
|
||||
### Python
|
||||
|
||||
```python
|
||||
import requests
|
||||
|
||||
resp = requests.post('http://192.168.0.101:16016/api/chart', json={
|
||||
"data": "月份, 营收, 利润\n1月, 500, 80\n2月, 680, 120\n3月, 820, 160",
|
||||
"chartType": "line",
|
||||
"title": "增长趋势",
|
||||
"theme": "dark",
|
||||
"showLabel": True,
|
||||
"width": 900,
|
||||
"height": 500
|
||||
})
|
||||
|
||||
with open('chart.png', 'wb') as f:
|
||||
f.write(resp.content)
|
||||
|
||||
print(f"图片大小: {len(resp.content)} bytes")
|
||||
```
|
||||
|
||||
### JavaScript (Node.js)
|
||||
|
||||
```javascript
|
||||
const fetch = require('node-fetch');
|
||||
const fs = require('fs');
|
||||
|
||||
const resp = await fetch('http://192.168.0.101:16016/api/chart', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
data: "产品, Q1, Q2\n手机, 1200, 2500\n平板, 800, 1300",
|
||||
chartType: "bar",
|
||||
title: "销售对比",
|
||||
width: 800,
|
||||
height: 500
|
||||
})
|
||||
});
|
||||
|
||||
const buffer = await resp.buffer();
|
||||
fs.writeFileSync('chart.png', buffer);
|
||||
```
|
||||
|
||||
### JavaScript (浏览器 fetch)
|
||||
|
||||
```javascript
|
||||
const resp = await fetch('http://192.168.0.101:16016/api/chart', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
data: "产品, Q1, Q2\n手机, 1200, 2500\n平板, 800, 1300",
|
||||
chartType: "bar",
|
||||
title: "销售对比"
|
||||
})
|
||||
});
|
||||
|
||||
const blob = await resp.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
const img = document.createElement('img');
|
||||
img.src = url;
|
||||
document.body.appendChild(img);
|
||||
```
|
||||
|
||||
### Shell (保存到文件)
|
||||
|
||||
```bash
|
||||
curl -X POST http://192.168.0.101:16016/api/chart \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"data":"A,B\n1,2\n3,4","chartType":"bar"}' \
|
||||
-o chart.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 主题预览
|
||||
|
||||
| 主题 | 说明 | 适用场景 |
|
||||
|------|------|----------|
|
||||
| `default` | 经典蓝绿配色 | 通用 |
|
||||
| `dark` | 深色背景 + 高亮色 | 大屏展示、PPT |
|
||||
| `macarons` | 柔和马卡龙色 | 清新风格 |
|
||||
| `gradient` | 渐变色 + 圆角柱 | 现代感设计 |
|
||||
| `retro` | 复古低饱和度 | 文艺风格 |
|
||||
|
||||
---
|
||||
|
||||
## 错误处理
|
||||
|
||||
请求失败时返回 JSON：
|
||||
|
||||
```json
|
||||
{
|
||||
"error": "缺少 data 参数（CSV 格式数据）"
|
||||
}
|
||||
```
|
||||
|
||||
常见错误：
|
||||
|
||||
| HTTP 状态码 | 原因 |
|
||||
|:-----------:|------|
|
||||
| 400 | 缺少 `data` 参数或数据格式错误 |
|
||||
| 500 | 服务端渲染异常 |
|
||||
|
||||
---
|
||||
|
||||
*文档更新时间：2026-07-16*
|
||||
@@ -1,9 +1,9 @@
|
||||
# 📊 数据可视化图表生成器
|
||||
|
||||
一个简洁强大的数据可视化工具，支持 **Web UI** 和 **API** 两种方式生成精美的对比图表图片。
|
||||
一个简洁强大的数据可视化工具，支持 **Web UI** 和 **API** 两种方式生成精美的对比图表和表格图片。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## ✨ 功能特性
|
||||
|
||||
@@ -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 图片，支持自定义分辨率和像素倍率
|
||||
|
||||
### 📥 导出功能
|
||||
@@ -44,7 +52,7 @@ npm start
|
||||
node server.js
|
||||
```
|
||||
|
||||
服务默认运行在 `16023` 端口，可通过环境变量修改：
|
||||
服务默认运行在 `16016` 端口，可通过环境变量修改：
|
||||
|
||||
```bash
|
||||
PORT=8080 node server.js
|
||||
@@ -52,14 +60,14 @@ PORT=8080 node server.js
|
||||
|
||||
### Web UI
|
||||
|
||||
浏览器访问 `http://localhost:16023` 即可使用可视化界面。
|
||||
浏览器访问 `http://localhost:16016` 即可使用可视化界面。
|
||||
|
||||
### API 调用
|
||||
|
||||
#### POST 方式（推荐）
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:16023/api/chart \
|
||||
curl -X POST http://localhost:16016/api/chart \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"data": "产品, Q1, Q2, Q3, Q4\n手机, 1200, 1800, 2100, 2500\n平板, 800, 950, 1100, 1300",
|
||||
@@ -74,7 +82,7 @@ curl -X POST http://localhost:16023/api/chart \
|
||||
#### GET 方式
|
||||
|
||||
```bash
|
||||
curl "http://localhost:16023/api/chart?data=产品,Q1,Q2\n手机,100,200\n平板,150,250&type=bar&title=测试" -o chart.png
|
||||
curl "http://localhost:16016/api/chart?data=产品,Q1,Q2\n手机,100,200\n平板,150,250&type=bar&title=测试" -o chart.png
|
||||
```
|
||||
|
||||
#### Python 调用示例
|
||||
@@ -82,7 +90,7 @@ curl "http://localhost:16023/api/chart?data=产品,Q1,Q2\n手机,100,200\n平板
|
||||
```python
|
||||
import requests
|
||||
|
||||
resp = requests.post('http://localhost:16023/api/chart', json={
|
||||
resp = requests.post('http://localhost:16016/api/chart', json={
|
||||
"data": "月份, 营收, 利润\n1月, 500, 80\n2月, 680, 120\n3月, 820, 160",
|
||||
"chartType": "line",
|
||||
"title": "增长趋势",
|
||||
@@ -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 文件导入
|
||||
- [ ] 支持数据编辑和实时预览
|
||||
|
||||
@@ -3,6 +3,8 @@ let chartInstance = null;
|
||||
let parsedData = null;
|
||||
let seriesColors = [];
|
||||
let seriesOrder = [];
|
||||
let currentMode = 'chart'; // 'chart' or 'table'
|
||||
let tableImageBlob = null;
|
||||
|
||||
// ===== 预设颜色方案 =====
|
||||
const colorPalettes = {
|
||||
@@ -605,3 +607,114 @@ function exportChart(format) {
|
||||
svgChart.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 模式切换 =====
|
||||
function switchMode(mode) {
|
||||
currentMode = mode;
|
||||
|
||||
// 更新按钮状态
|
||||
document.getElementById('btnChartMode').classList.toggle('active', mode === 'chart');
|
||||
document.getElementById('btnTableMode').classList.toggle('active', mode === 'table');
|
||||
|
||||
// 显示/隐藏配置区
|
||||
document.getElementById('chartConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
|
||||
document.getElementById('tableConfigSection').style.display = mode === 'table' ? 'block' : 'none';
|
||||
document.getElementById('seriesConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
|
||||
document.getElementById('splitConfigSection').style.display = mode === 'chart' ? 'block' : 'none';
|
||||
|
||||
// 更新生成按钮
|
||||
const btnGenerate = document.getElementById('btnGenerate');
|
||||
btnGenerate.textContent = mode === 'chart' ? '🎨 生成图表' : '📋 生成表格';
|
||||
|
||||
// 更新导出按钮
|
||||
const btnExportSvg = document.getElementById('btnExportSvg');
|
||||
btnExportSvg.style.display = mode === 'chart' ? 'inline-flex' : 'none';
|
||||
|
||||
// 重新生成
|
||||
generate();
|
||||
}
|
||||
|
||||
// ===== 统一生成入口 =====
|
||||
function generate() {
|
||||
if (currentMode === 'chart') {
|
||||
generateChart();
|
||||
} else {
|
||||
generateTable();
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 更新字体大小显示 =====
|
||||
function updateFontSize() {
|
||||
const val = document.getElementById('tableFontSize').value;
|
||||
document.getElementById('fontSizeValue').textContent = val;
|
||||
}
|
||||
|
||||
// ===== 生成表格 =====
|
||||
function generateTable() {
|
||||
const rawText = document.getElementById('dataInput').value;
|
||||
if (!rawText.trim()) {
|
||||
alert('请输入数据');
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
data: rawText,
|
||||
title: document.getElementById('tableTitle').value,
|
||||
theme: document.getElementById('tableTheme').value,
|
||||
fontSize: parseInt(document.getElementById('tableFontSize').value) || 14,
|
||||
stripeRows: document.getElementById('stripeRows').checked,
|
||||
pixelRatio: 2
|
||||
};
|
||||
|
||||
const chartArea = document.getElementById('chartArea');
|
||||
chartArea.innerHTML = '<div class="placeholder"><p>⏳</p><p>正在生成表格...</p></div>';
|
||||
|
||||
fetch('/api/table', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(params)
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error('表格生成失败');
|
||||
return res.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
tableImageBlob = blob;
|
||||
const url = URL.createObjectURL(blob);
|
||||
chartArea.innerHTML = `<div class="table-preview"><img src="${url}" alt="表格预览"></div>`;
|
||||
})
|
||||
.catch(err => {
|
||||
chartArea.innerHTML = `<div class="placeholder"><p>❌</p><p>${err.message}</p></div>`;
|
||||
});
|
||||
}
|
||||
|
||||
// ===== 更新表格（配置变更时） =====
|
||||
function updateTable() {
|
||||
if (currentMode === 'table' && document.getElementById('dataInput').value.trim()) {
|
||||
generateTable();
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 统一导出图片 =====
|
||||
function exportImage(format) {
|
||||
if (currentMode === 'chart') {
|
||||
exportChart(format);
|
||||
} else {
|
||||
exportTable(format);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 导出表格 =====
|
||||
function exportTable(format) {
|
||||
if (!tableImageBlob) {
|
||||
alert('请先生成表格');
|
||||
return;
|
||||
}
|
||||
|
||||
const url = URL.createObjectURL(tableImageBlob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'table.png';
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
+54
-8
@@ -12,18 +12,26 @@
|
||||
<!-- 顶部标题 -->
|
||||
<header class="app-header">
|
||||
<h1>📊 数据可视化图表生成器</h1>
|
||||
<p class="subtitle">粘贴数据，生成精美图表</p>
|
||||
<p class="subtitle">粘贴数据，生成精美图表或表格</p>
|
||||
</header>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- 左侧面板：数据输入和配置 -->
|
||||
<div class="left-panel">
|
||||
<!-- 模式切换 -->
|
||||
<div class="panel-section">
|
||||
<div class="mode-switch">
|
||||
<button class="mode-btn active" id="btnChartMode" onclick="switchMode('chart')">📈 图表模式</button>
|
||||
<button class="mode-btn" id="btnTableMode" onclick="switchMode('table')">📋 表格模式</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据输入区 -->
|
||||
<div class="panel-section">
|
||||
<h2>📝 数据输入</h2>
|
||||
<div class="input-format-hint">
|
||||
<p><strong>格式说明：</strong></p>
|
||||
<p>第一行为表头（系列名称），第一列为横坐标值</p>
|
||||
<p>第一行为表头，后续行为数据</p>
|
||||
<pre>类别, 系列1, 系列2, 系列3
|
||||
A, 10, 20, 30
|
||||
B, 15, 25, 35
|
||||
@@ -31,14 +39,14 @@ C, 20, 30, 40</pre>
|
||||
</div>
|
||||
<textarea id="dataInput" placeholder="在此粘贴数据... 支持逗号、制表符分隔 示例： 产品, 2023年, 2024年, 2025年 Q1, 120, 150, 180 Q2, 200, 220, 260 Q3, 180, 210, 240 Q4, 250, 280, 320"></textarea>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-primary" onclick="generateChart()">🎨 生成图表</button>
|
||||
<button class="btn btn-primary" id="btnGenerate" onclick="generate()">🎨 生成图表</button>
|
||||
<button class="btn btn-secondary" onclick="loadSampleData()">📋 加载示例</button>
|
||||
<button class="btn btn-secondary" onclick="clearData()">🗑️ 清空</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图表配置区 -->
|
||||
<div class="panel-section">
|
||||
<div class="panel-section" id="chartConfigSection">
|
||||
<h2>⚙️ 图表配置</h2>
|
||||
|
||||
<div class="config-group">
|
||||
@@ -78,8 +86,46 @@ C, 20, 30, 40</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格配置区 -->
|
||||
<div class="panel-section" id="tableConfigSection" style="display:none;">
|
||||
<h2>⚙️ 表格配置</h2>
|
||||
|
||||
<div class="config-group">
|
||||
<label>标题</label>
|
||||
<input type="text" id="tableTitle" placeholder="表格标题" oninput="updateTable()">
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label>主题风格</label>
|
||||
<select id="tableTheme" onchange="updateTable()">
|
||||
<option value="default">默认</option>
|
||||
<option value="dark">深色</option>
|
||||
<option value="macarons">马卡龙</option>
|
||||
<option value="gradient">渐变</option>
|
||||
<option value="retro">复古</option>
|
||||
<option value="ocean">海洋</option>
|
||||
<option value="forest">森林</option>
|
||||
<option value="sunset">日落</option>
|
||||
<option value="lavender">薰衣草</option>
|
||||
<option value="minimal">极简</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label>字体大小: <span id="fontSizeValue">14</span>px</label>
|
||||
<input type="range" id="tableFontSize" min="10" max="24" value="14" oninput="updateFontSize(); updateTable()">
|
||||
</div>
|
||||
|
||||
<div class="config-group">
|
||||
<label>显示选项</label>
|
||||
<div class="checkbox-group">
|
||||
<label><input type="checkbox" id="stripeRows" checked onchange="updateTable()"> 斑马纹</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系列配置区 -->
|
||||
<div class="panel-section">
|
||||
<div class="panel-section" id="seriesConfigSection">
|
||||
<h2>🎨 系列配置</h2>
|
||||
<div id="seriesConfig" class="series-config">
|
||||
<p class="hint-text">生成图表后可在此调整各系列的顺序和颜色</p>
|
||||
@@ -87,7 +133,7 @@ C, 20, 30, 40</pre>
|
||||
</div>
|
||||
|
||||
<!-- 区域分割配置 -->
|
||||
<div class="panel-section">
|
||||
<div class="panel-section" id="splitConfigSection">
|
||||
<h2>📐 区域分割</h2>
|
||||
<div class="config-group">
|
||||
<label><input type="checkbox" id="enableSplit" onchange="updateChart()"> 启用区域分割</label>
|
||||
@@ -119,8 +165,8 @@ C, 20, 30, 40</pre>
|
||||
<!-- 导出按钮 -->
|
||||
<div class="panel-section">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-success" onclick="exportChart('png')">📥 导出PNG</button>
|
||||
<button class="btn btn-success" onclick="exportChart('svg')">📥 导出SVG</button>
|
||||
<button class="btn btn-success" onclick="exportImage('png')">📥 导出PNG</button>
|
||||
<button class="btn btn-success" id="btnExportSvg" onclick="exportImage('svg')">📥 导出SVG</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,19 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const { createCanvas } = require('@napi-rs/canvas');
|
||||
const { createCanvas, registerFont } = require('@napi-rs/canvas');
|
||||
const echarts = require('echarts');
|
||||
const path = require('path');
|
||||
|
||||
// 注册中文字体
|
||||
try {
|
||||
registerFont('/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc', { family: 'Noto Sans CJK SC' });
|
||||
registerFont('/usr/share/fonts/opentype/noto/NotoSansCJK-Bold.ttc', { family: 'Noto Sans CJK SC', weight: 'bold' });
|
||||
} catch (e) {
|
||||
console.warn('中文字体注册失败，将使用系统默认字体:', e.message);
|
||||
}
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 16023;
|
||||
const PORT = process.env.PORT || 16016;
|
||||
|
||||
// 中间件
|
||||
app.use(cors());
|
||||
@@ -391,15 +399,356 @@ app.get('/api/chart', (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// ===== 表格数据解析（保留原始文本） =====
|
||||
function parseTableData(rawText) {
|
||||
const lines = rawText.trim().split('\n').filter(l => l.trim());
|
||||
if (lines.length < 2) {
|
||||
throw new Error('数据至少需要包含表头和一行数据');
|
||||
}
|
||||
|
||||
// 自动检测分隔符
|
||||
let delimiter = ',';
|
||||
if (lines[0].includes('\t')) {
|
||||
delimiter = '\t';
|
||||
} else if (lines[0].split('|').length > lines[0].split(',').length) {
|
||||
delimiter = '|';
|
||||
}
|
||||
|
||||
const rows = lines.map(line => {
|
||||
return line.split(delimiter).map(cell => cell.trim());
|
||||
});
|
||||
|
||||
return {
|
||||
headers: rows[0],
|
||||
rows: rows.slice(1)
|
||||
};
|
||||
}
|
||||
|
||||
// ===== 表格主题配置 =====
|
||||
const tableThemes = {
|
||||
default: {
|
||||
bgColor: '#ffffff',
|
||||
headerBg: '#5470c6',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#333333',
|
||||
borderColor: '#e0e0e0',
|
||||
stripeColor: '#f8f9fa',
|
||||
titleColor: '#333333'
|
||||
},
|
||||
dark: {
|
||||
bgColor: '#1a1a2e',
|
||||
headerBg: '#4fc3f7',
|
||||
headerColor: '#1a1a2e',
|
||||
cellColor: '#e0e0e0',
|
||||
borderColor: '#444444',
|
||||
stripeColor: '#252540',
|
||||
titleColor: '#e0e0e0'
|
||||
},
|
||||
macarons: {
|
||||
bgColor: '#ffffff',
|
||||
headerBg: '#2ec7c9',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#333333',
|
||||
borderColor: '#e8e8e8',
|
||||
stripeColor: '#f0fafb',
|
||||
titleColor: '#333333'
|
||||
},
|
||||
gradient: {
|
||||
bgColor: '#ffffff',
|
||||
headerBg: '#7f7fd5',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#333333',
|
||||
borderColor: '#e8e8e8',
|
||||
stripeColor: '#f5f5ff',
|
||||
titleColor: '#333333'
|
||||
},
|
||||
retro: {
|
||||
bgColor: '#fefefe',
|
||||
headerBg: '#95b9c7',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#444444',
|
||||
borderColor: '#d4a5a5',
|
||||
stripeColor: '#f6e8c3',
|
||||
titleColor: '#444444'
|
||||
},
|
||||
ocean: {
|
||||
bgColor: '#f0f8ff',
|
||||
headerBg: '#0077b6',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#023e58',
|
||||
borderColor: '#90e0ef',
|
||||
stripeColor: '#caf0f8',
|
||||
titleColor: '#023e58'
|
||||
},
|
||||
forest: {
|
||||
bgColor: '#f5faf5',
|
||||
headerBg: '#2d6a4f',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#1b4332',
|
||||
borderColor: '#95d5b2',
|
||||
stripeColor: '#d8f3dc',
|
||||
titleColor: '#1b4332'
|
||||
},
|
||||
sunset: {
|
||||
bgColor: '#fff8f0',
|
||||
headerBg: '#e85d04',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#6a040f',
|
||||
borderColor: '#ffba08',
|
||||
stripeColor: '#fff3e0',
|
||||
titleColor: '#6a040f'
|
||||
},
|
||||
lavender: {
|
||||
bgColor: '#faf5ff',
|
||||
headerBg: '#7c3aed',
|
||||
headerColor: '#ffffff',
|
||||
cellColor: '#4c1d95',
|
||||
borderColor: '#c4b5fd',
|
||||
stripeColor: '#ede9fe',
|
||||
titleColor: '#4c1d95'
|
||||
},
|
||||
minimal: {
|
||||
bgColor: '#ffffff',
|
||||
headerBg: '#f8f9fa',
|
||||
headerColor: '#212529',
|
||||
cellColor: '#495057',
|
||||
borderColor: '#dee2e6',
|
||||
stripeColor: '#f8f9fa',
|
||||
titleColor: '#212529'
|
||||
}
|
||||
};
|
||||
|
||||
// ===== 测量文字宽度 =====
|
||||
function measureTextWidth(ctx, text, fontSize) {
|
||||
ctx.font = `${fontSize}px "Noto Sans CJK SC", sans-serif`;
|
||||
const metrics = ctx.measureText(text);
|
||||
return metrics.width;
|
||||
}
|
||||
|
||||
// ===== 生成表格图片 =====
|
||||
function generateTableImage(params) {
|
||||
const {
|
||||
data,
|
||||
title = '',
|
||||
theme = 'default',
|
||||
fontSize = 14,
|
||||
cellPadding = 12,
|
||||
borderWidth = 1,
|
||||
stripeRows = true,
|
||||
pixelRatio = 2,
|
||||
maxWidth = 1200
|
||||
} = params;
|
||||
|
||||
const tableData = parseTableData(data);
|
||||
const { headers, rows } = tableData;
|
||||
const themeConfig = tableThemes[theme] || tableThemes.default;
|
||||
|
||||
// 创建临时 canvas 用于测量文字
|
||||
const tempCanvas = createCanvas(100, 100);
|
||||
const tempCtx = tempCanvas.getContext('2d');
|
||||
|
||||
// 计算每列最大宽度
|
||||
const colWidths = headers.map((header, colIdx) => {
|
||||
let maxW = measureTextWidth(tempCtx, header, fontSize) + cellPadding * 2;
|
||||
|
||||
rows.forEach(row => {
|
||||
if (row[colIdx]) {
|
||||
const cellW = measureTextWidth(tempCtx, row[colIdx], fontSize) + cellPadding * 2;
|
||||
if (cellW > maxW) maxW = cellW;
|
||||
}
|
||||
});
|
||||
|
||||
return Math.min(maxW, 300); // 单列最大宽度 300px
|
||||
});
|
||||
|
||||
// 计算表格总宽度
|
||||
const tableWidth = colWidths.reduce((sum, w) => sum + w, 0) + borderWidth * 2;
|
||||
const finalWidth = Math.min(tableWidth, maxWidth);
|
||||
|
||||
// 如果超出最大宽度，按比例缩放列宽
|
||||
if (tableWidth > maxWidth) {
|
||||
const scale = maxWidth / tableWidth;
|
||||
colWidths.forEach((_, i) => colWidths[i] *= scale);
|
||||
}
|
||||
|
||||
// 计算行高
|
||||
const headerHeight = fontSize * 2.5;
|
||||
const rowHeight = fontSize * 2.2;
|
||||
const titleHeight = title ? fontSize * 3 : 0;
|
||||
const tableHeight = headerHeight + rows.length * rowHeight + borderWidth * 2;
|
||||
const finalHeight = tableHeight + titleHeight;
|
||||
|
||||
// 创建正式 canvas
|
||||
const canvas = createCanvas(finalWidth * pixelRatio, finalHeight * pixelRatio);
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.scale(pixelRatio, pixelRatio);
|
||||
|
||||
// 绘制背景
|
||||
ctx.fillStyle = themeConfig.bgColor;
|
||||
ctx.fillRect(0, 0, finalWidth, finalHeight);
|
||||
|
||||
let startY = 0;
|
||||
|
||||
// 绘制标题
|
||||
if (title) {
|
||||
ctx.fillStyle = themeConfig.titleColor;
|
||||
ctx.font = `bold ${fontSize * 1.4}px "Noto Sans CJK SC", sans-serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(title, finalWidth / 2, titleHeight / 2);
|
||||
startY = titleHeight;
|
||||
}
|
||||
|
||||
// 绘制表头背景
|
||||
ctx.fillStyle = themeConfig.headerBg;
|
||||
ctx.fillRect(0, startY, finalWidth, headerHeight);
|
||||
|
||||
// 绘制表头文字
|
||||
ctx.fillStyle = themeConfig.headerColor;
|
||||
ctx.font = `bold ${fontSize}px "Noto Sans CJK SC", sans-serif`;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
let x = 0;
|
||||
headers.forEach((header, i) => {
|
||||
ctx.fillText(header, x + cellPadding, startY + headerHeight / 2, colWidths[i] - cellPadding * 2);
|
||||
x += colWidths[i];
|
||||
});
|
||||
|
||||
// 绘制数据行
|
||||
rows.forEach((row, rowIdx) => {
|
||||
const y = startY + headerHeight + rowIdx * rowHeight;
|
||||
|
||||
// 斑马纹背景
|
||||
if (stripeRows && rowIdx % 2 === 1) {
|
||||
ctx.fillStyle = themeConfig.stripeColor;
|
||||
ctx.fillRect(0, y, finalWidth, rowHeight);
|
||||
}
|
||||
|
||||
// 绘制单元格文字
|
||||
ctx.fillStyle = themeConfig.cellColor;
|
||||
ctx.font = `${fontSize}px "Noto Sans CJK SC", sans-serif`;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'middle';
|
||||
|
||||
let cellX = 0;
|
||||
row.forEach((cell, colIdx) => {
|
||||
if (cell && colWidths[colIdx]) {
|
||||
ctx.fillText(cell, cellX + cellPadding, y + rowHeight / 2, colWidths[colIdx] - cellPadding * 2);
|
||||
}
|
||||
cellX += colWidths[colIdx];
|
||||
});
|
||||
});
|
||||
|
||||
// 绘制边框
|
||||
ctx.strokeStyle = themeConfig.borderColor;
|
||||
ctx.lineWidth = borderWidth;
|
||||
|
||||
// 外边框
|
||||
ctx.strokeRect(0, startY, finalWidth, tableHeight);
|
||||
|
||||
// 横线
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, startY + headerHeight);
|
||||
ctx.lineTo(finalWidth, startY + headerHeight);
|
||||
ctx.stroke();
|
||||
|
||||
rows.forEach((_, rowIdx) => {
|
||||
const y = startY + headerHeight + (rowIdx + 1) * rowHeight;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(finalWidth, y);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
// 竖线
|
||||
x = 0;
|
||||
colWidths.forEach((width, i) => {
|
||||
if (i > 0) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, startY);
|
||||
ctx.lineTo(x, startY + tableHeight);
|
||||
ctx.stroke();
|
||||
}
|
||||
x += width;
|
||||
});
|
||||
|
||||
return canvas;
|
||||
}
|
||||
|
||||
// ===== API: 生成表格图片 (POST) =====
|
||||
app.post('/api/table', (req, res) => {
|
||||
try {
|
||||
const params = req.body;
|
||||
|
||||
if (!params.data) {
|
||||
return res.status(400).json({ error: '缺少 data 参数（CSV 格式数据）' });
|
||||
}
|
||||
|
||||
const pixelRatio = parseInt(params.pixelRatio) || 2;
|
||||
const canvas = generateTableImage(params);
|
||||
|
||||
const buffer = canvas.toBuffer('image/png');
|
||||
res.set({
|
||||
'Content-Type': 'image/png',
|
||||
'Content-Length': buffer.length,
|
||||
'X-Table-Format': 'png'
|
||||
});
|
||||
res.send(buffer);
|
||||
} catch (err) {
|
||||
console.error('Table generation error:', err);
|
||||
res.status(500).json({ error: '表格生成失败: ' + err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ===== API: 生成表格图片 (GET) =====
|
||||
app.get('/api/table', (req, res) => {
|
||||
try {
|
||||
const params = {
|
||||
data: req.query.data,
|
||||
title: req.query.title || '',
|
||||
theme: req.query.theme || 'default',
|
||||
fontSize: parseInt(req.query.fontSize) || 14,
|
||||
cellPadding: parseInt(req.query.cellPadding) || 12,
|
||||
borderWidth: parseInt(req.query.borderWidth) || 1,
|
||||
stripeRows: req.query.stripeRows !== 'false',
|
||||
pixelRatio: parseInt(req.query.pixelRatio) || 2,
|
||||
maxWidth: parseInt(req.query.maxWidth) || 1200
|
||||
};
|
||||
|
||||
if (!params.data) {
|
||||
return res.status(400).json({ error: '缺少 data 参数' });
|
||||
}
|
||||
|
||||
// 解码 data（支持 URL 编码的换行符）
|
||||
params.data = params.data.replace(/\\n/g, '\n');
|
||||
|
||||
const canvas = generateTableImage(params);
|
||||
const buffer = canvas.toBuffer('image/png');
|
||||
|
||||
res.set({
|
||||
'Content-Type': 'image/png',
|
||||
'Content-Length': buffer.length,
|
||||
'X-Table-Format': 'png'
|
||||
});
|
||||
res.send(buffer);
|
||||
} catch (err) {
|
||||
console.error('Table generation error:', err);
|
||||
res.status(500).json({ error: '表格生成失败: ' + err.message });
|
||||
}
|
||||
});
|
||||
|
||||
// ===== API: 健康检查 =====
|
||||
app.get('/api/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
service: 'data-chart-tool',
|
||||
version: '1.1.0',
|
||||
version: '1.2.0',
|
||||
endpoints: {
|
||||
'POST /api/chart': '生成图表图片（JSON body）',
|
||||
'GET /api/chart': '生成图表图片（URL 参数）',
|
||||
'POST /api/table': '生成表格图片（JSON body）',
|
||||
'GET /api/table': '生成表格图片（URL 参数）',
|
||||
'GET /api/health': '健康检查'
|
||||
}
|
||||
});
|
||||
@@ -409,7 +758,7 @@ app.get('/api/health', (req, res) => {
|
||||
app.get('/api/docs', (req, res) => {
|
||||
res.json({
|
||||
name: '数据可视化图表生成器 API',
|
||||
version: '1.1.0',
|
||||
version: '1.2.0',
|
||||
endpoints: [
|
||||
{
|
||||
method: 'POST',
|
||||
@@ -438,7 +787,7 @@ app.get('/api/docs', (req, res) => {
|
||||
},
|
||||
returns: 'image/png',
|
||||
example: {
|
||||
request: `curl -X POST http://localhost:16023/api/chart \\
|
||||
request: `curl -X POST http://localhost:16016/api/chart \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"data": "产品, Q1, Q2, Q3, Q4\\n手机, 1200, 1800, 2100, 2500\\n平板, 800, 950, 1100, 1300",
|
||||
@@ -465,7 +814,51 @@ app.get('/api/docs', (req, res) => {
|
||||
},
|
||||
returns: 'image/png',
|
||||
example: {
|
||||
request: `curl "http://localhost:16023/api/chart?data=产品,Q1,Q2\\n手机,100,200\\n平板,150,250&type=bar&title=测试" -o chart.png`
|
||||
request: `curl "http://localhost:16016/api/chart?data=产品,Q1,Q2\\n手机,100,200\\n平板,150,250&type=bar&title=测试" -o chart.png`
|
||||
}
|
||||
},
|
||||
{
|
||||
method: 'POST',
|
||||
path: '/api/table',
|
||||
description: '通过 JSON 请求体生成表格图片',
|
||||
'Content-Type': 'application/json',
|
||||
params: {
|
||||
data: { type: 'string', required: true, description: 'CSV 格式数据（第一行表头）' },
|
||||
title: { type: 'string', default: '', description: '表格标题' },
|
||||
theme: { type: 'string', default: 'default', options: ['default', 'dark', 'macarons', 'gradient', 'retro', 'ocean', 'forest', 'sunset', 'lavender', 'minimal'], description: '主题风格' },
|
||||
fontSize: { type: 'number', default: 14, description: '字体大小' },
|
||||
cellPadding: { type: 'number', default: 12, description: '单元格内边距' },
|
||||
borderWidth: { type: 'number', default: 1, description: '边框宽度' },
|
||||
stripeRows: { type: 'boolean', default: true, description: '是否斑马纹' },
|
||||
pixelRatio: { type: 'number', default: 2, description: '像素倍率（清晰度）' },
|
||||
maxWidth: { type: 'number', default: 1200, description: '最大宽度(px)' }
|
||||
},
|
||||
returns: 'image/png',
|
||||
example: {
|
||||
request: `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`,
|
||||
response: 'PNG 图片二进制流'
|
||||
}
|
||||
},
|
||||
{
|
||||
method: 'GET',
|
||||
path: '/api/table',
|
||||
description: '通过 URL 参数生成表格图片',
|
||||
params: {
|
||||
data: { type: 'string', required: true, description: 'CSV 数据（换行用 \\n 分隔）' },
|
||||
title: { type: 'string', description: '表格标题' },
|
||||
theme: { type: 'string', default: 'default', description: '主题风格' },
|
||||
fontSize: { type: 'number', default: 14 },
|
||||
stripeRows: { type: 'boolean', default: true }
|
||||
},
|
||||
returns: 'image/png',
|
||||
example: {
|
||||
request: `curl "http://localhost:16016/api/table?data=产品,价格,库存\\n手机,2999,100\\n平板,1999,50&title=产品列表" -o table.png`
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -476,7 +869,8 @@ app.get('/api/docs', (req, res) => {
|
||||
app.listen(PORT, '0.0.0.0', () => {
|
||||
console.log(`🚀 数据可视化图表生成器已启动`);
|
||||
console.log(`📊 Web UI: http://0.0.0.0:${PORT}`);
|
||||
console.log(`📡 API: http://0.0.0.0:${PORT}/api/chart`);
|
||||
console.log(`📡 图表API: http://0.0.0.0:${PORT}/api/chart`);
|
||||
console.log(`📋 表格API: http://0.0.0.0:${PORT}/api/table`);
|
||||
console.log(`📖 文档: http://0.0.0.0:${PORT}/api/docs`);
|
||||
console.log(`❤️ 健康: http://0.0.0.0:${PORT}/api/health`);
|
||||
});
|
||||
@@ -378,3 +378,82 @@ body {
|
||||
.panel-section {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* ===== 模式切换 ===== */
|
||||
.mode-switch {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ===== 表格预览 ===== */
|
||||
.table-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.table-preview img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* ===== 滑块样式 ===== */
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: #e2e8f0;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
Reference in New Issue
Block a user