206 lines
4.3 KiB
Markdown
206 lines
4.3 KiB
Markdown
|
# Chart Skill - 图表生成工具
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
用于生成各种类型的图表，返回多种格式以适配不同场景：
|
|||
|
|
- **ANSI 格式**：终端彩色显示
|
|||
|
|
- **SVG 格式**：Web 内嵌矢量图
|
|||
|
|
- **PNG 格式**：位图下载
|
|||
|
|
- **Markdown 格式**：Web 对话窗口显示
|
|||
|
|
|
|||
|
|
## 支持的图表类型
|
|||
|
|
|
|||
|
|
| 类型 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| `line` | 折线图 |
|
|||
|
|
| `bar` | 柱状图 |
|
|||
|
|
| `pie` | 饼图 |
|
|||
|
|
| `scatter` | 散点图 |
|
|||
|
|
| `bubble` | 气泡图 |
|
|||
|
|
| `donut` | 圆环图 |
|
|||
|
|
| `mixed` | 混合图（柱状+折线） |
|
|||
|
|
| `polar` | 极区图 |
|
|||
|
|
| `radar` | 雷达图 |
|
|||
|
|
|
|||
|
|
## 基本信息
|
|||
|
|
|
|||
|
|
| 属性 | 值 |
|
|||
|
|
|------|-----|
|
|||
|
|
| 端点 | `http://localhost:3100/api/v1/chart` |
|
|||
|
|
| 方法 | `POST` |
|
|||
|
|
| 内容类型 | `application/json` |
|
|||
|
|
|
|||
|
|
## 请求参数
|
|||
|
|
|
|||
|
|
### 参数结构
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "bar",
|
|||
|
|
"title": "图表标题",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["标签1", "标签2", "标签3"],
|
|||
|
|
"datasets": [
|
|||
|
|
{
|
|||
|
|
"name": "数据系列名称",
|
|||
|
|
"values": [100, 150, 120],
|
|||
|
|
"color": "#4CAF50"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"options": {
|
|||
|
|
"width": 600,
|
|||
|
|
"height": 400
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 参数说明
|
|||
|
|
|
|||
|
|
| 字段 | 类型 | 必填 | 说明 |
|
|||
|
|
|------|------|------|------|
|
|||
|
|
| `type` | string | 否 | 图表类型，默认 `line` |
|
|||
|
|
| `title` | string | 否 | 图表标题 |
|
|||
|
|
| `data.labels` | array | 是 | 标签数组 |
|
|||
|
|
| `data.datasets` | array | 是 | 数据系列数组 |
|
|||
|
|
| `datasets[].name` | string | 否 | 数据系列名称 |
|
|||
|
|
| `datasets[].values` | array | **是** | 数值数组 |
|
|||
|
|
| `datasets[].color` | string | 否 | 十六进制颜色，如 `#4CAF50` |
|
|||
|
|
| `options.width` | integer | 否 | 图表宽度（像素） |
|
|||
|
|
| `options.height` | integer | 否 | 图表高度（像素） |
|
|||
|
|
|
|||
|
|
## 响应字段
|
|||
|
|
|
|||
|
|
| 字段 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| `chart_id` | 图表唯一标识 |
|
|||
|
|
| `text` | 纯文本描述 |
|
|||
|
|
| `ansi` | ANSI 彩色文本（用于终端） |
|
|||
|
|
| `svg` | SVG 矢量图代码 |
|
|||
|
|
| `png_url` | PNG 图片下载 URL |
|
|||
|
|
| `markdown` | Markdown 格式（用于 Web） |
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
### 示例 1：柱状图
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "bar",
|
|||
|
|
"title": "月度销售额",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["一月", "二月", "三月", "四月"],
|
|||
|
|
"datasets": [
|
|||
|
|
{ "name": "销售额", "values": [100, 150, 120, 180], "color": "#4CAF50" }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 示例 2：饼图
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "pie",
|
|||
|
|
"title": "市场份额",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["苹果", "三星", "华为", "其他"],
|
|||
|
|
"datasets": [
|
|||
|
|
{ "name": "销量", "values": [35, 25, 20, 20] }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 示例 3：圆环图
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "donut",
|
|||
|
|
"title": "预算分配",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["人力", "设备", "营销", "研发"],
|
|||
|
|
"datasets": [
|
|||
|
|
{ "name": "预算", "values": [40, 20, 25, 15], "color": "#2196F3" }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 示例 4：雷达图
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "radar",
|
|||
|
|
"title": "员工能力评估",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["速度", "力量", "耐力", "智力", "敏捷"],
|
|||
|
|
"datasets": [
|
|||
|
|
{ "name": "张三", "values": [80, 70, 90, 85, 75] }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 示例 5：气泡图
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "bubble",
|
|||
|
|
"title": "产品分析",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["产品A", "产品B", "产品C", "产品D"],
|
|||
|
|
"datasets": [
|
|||
|
|
{ "name": "销量/利润", "values": [100, 250, 150, 300] }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 示例 6：混合图
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "mixed",
|
|||
|
|
"title": "销售与目标对比",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["一月", "二月", "三月", "四月"],
|
|||
|
|
"datasets": [
|
|||
|
|
{ "name": "实际", "values": [100, 150, 120, 180] },
|
|||
|
|
{ "name": "目标", "values": [120, 140, 130, 160] }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 示例 7：极区图
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"type": "polar",
|
|||
|
|
"title": "风向分布",
|
|||
|
|
"data": {
|
|||
|
|
"labels": ["北", "东北", "东", "东南", "南"],
|
|||
|
|
"datasets": [
|
|||
|
|
{ "name": "风速", "values": [10, 20, 15, 25, 30] }
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用场景
|
|||
|
|
|
|||
|
|
| 场景 | 推荐字段 | 说明 |
|
|||
|
|
|------|---------|------|
|
|||
|
|
| 终端显示 | `ansi` | 彩色 ASCII 图表 |
|
|||
|
|
| Web 内嵌 | `svg` | 内联 SVG 代码 |
|
|||
|
|
| Web 展示 | `markdown` | 图片链接 |
|
|||
|
|
| 文件下载 | `png_url` | 下载 PNG 文件 |
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 每次请求生成新的图表，图表会缓存在服务器内存中
|
|||
|
|
2. 图表数据通过 `datasets[].values` 传递，支持多系列
|
|||
|
|
3. 颜色使用十六进制格式，如 `#FF5722`
|
|||
|
|
4. 终端使用 ANSI 格式，Web 使用 Markdown 格式
|