feat: initial release v0.3.0
- Support 9 chart types: line, bar, pie, scatter, bubble, donut, mixed, polar, radar - Multi-format output: ANSI, SVG, PNG, Markdown - Go + Fiber + gonum/plot - Docker support - Morandi color palette
This commit is contained in:
205
skill.md
Normal file
205
skill.md
Normal file
@@ -0,0 +1,205 @@
|
||||
# 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 格式
|
||||
Reference in New Issue
Block a user