数
数据图表生成

Name: 数据图表生成
Author: 鹿Sir
作者：鹿Sir办公效率v2
数据图表生成工具，支持折线图、柱状图、饼图、面积图等多种图表类型，直接生成高质量图表图片。
下载量
249
价格
免费
技能文档

---
name: chart-image-cn
description: 数据图表生成工具，支持折线图、柱状图、饼图、面积图等多种图表类型，直接生成高质量图表图片。
title: 数据图表生成
category: 办公效率
---

# 数据图表生成技能

## 技能概述

将数据快速转化为专业的图表图片，支持折线图、柱状图、饼图、面积图、散点图、雷达图等多种类型。适用于报告制作、数据展示、监控面板和文档配图。

## 触发条件

当用户提到以下场景时激活：
- "生成图表"、"画个图"、"数据可视化"
- "折线图"、"柱状图"、"饼图"
- "chart"、"graph"、"plot"
- "数据展示"、"趋势图"、"对比图"

## 工作流程

### 第一步：数据解析

#### 支持的数据格式

```
格式1 - 表格数据：
月份 | 销售额 | 成本 | 利润
1月  | 12000  | 8000 | 4000
2月  | 15000  | 9000 | 6000
3月  | 18000  | 10000| 8000

格式2 - JSON数据：
[
  {"name": "1月", "value": 12000},
  {"name": "2月", "value": 15000}
]

格式3 - 自然语言：
"第一季度销售额分别是12000、15000、18000"
```

#### 数据预处理

- 自动识别数值列和标签列
- 处理缺失值（插值或跳过）
- 单位统一和数值归一化
- 日期格式标准化

### 第二步：图表类型选择

#### 图表选择决策树

```
数据特征 → 推荐图表

单一变量趋势 → 折线图
分类对比 → 柱状图
占比分布 → 饼图/环形图
多维对比 → 雷达图
相关性分析 → 散点图
累计趋势 → 堆叠面积图
分布情况 → 直方图/箱线图
地理分布 → 地图
流程关系 → 桑基图
```

#### 图表类型详解

| 图表类型 | 适用场景 | 数据要求 | 最佳实践 |
|---------|---------|---------|---------|
| 折线图 | 趋势变化 | 时间序列 | 不超过5条线 |
| 柱状图 | 分类对比 | 离散类别 | 类别不超过10个 |
| 饼图 | 占比展示 | 3-7个分类 | 最小扇区>5% |
| 面积图 | 累计趋势 | 时间序列 | 不超过4层堆叠 |
| 散点图 | 相关分析 | 两维数值 | 标注异常点 |
| 雷达图 | 多维评估 | 4-8个维度 | 归一化处理 |
| 瀑布图 | 增减分析 | 正负变化值 | 标注关键节点 |

### 第三步：图表配置

#### 配色方案

```
默认配色（8色循环）：
#5470C6  蓝色
#91CC75  绿色
#FAC858  黄色
#EE6666  红色
#73C0DE  浅蓝
#3BA272  深绿
#FC8452  橙色
#9A60B4  紫色

主题配色：
商务蓝：#1890FF, #36CFC9, #597EF7
暖色系：#FF6B6B, #FFA940, #FFD93D
冷色系：#69C0FF, #95DE64, #B7EB8F
```

#### 布局配置

```
图表尺寸：
- 标准：800×600px
- 宽屏：1200×600px
- 正方形：600×600px
- 自定义：用户指定

边距设置：
- 上边距：60px（标题空间）
- 右边距：40px（图例空间）
- 下边距：60px（X轴标签）
- 左边距：60px（Y轴标签）
```

#### 标注规范

```
标题：16px 加粗，居中或左对齐
轴标签：12px 常规，含单位
数据标签：11px，跟随数据点
图例：12px，顶部或右侧
网格线：浅灰色虚线
```

### 第四步：图表生成

#### 生成方式

优先使用以下方式生成图表：

1. **HTML + CSS**：生成可在浏览器中查看的交互式图表
2. **SVG**：生成矢量图表，可无损缩放
3. **Markdown 表格 + ASCII**：纯文本环境下的简单展示

#### HTML 图表模板

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    /* 图表样式 */
  </style>
</head>
<body>
  <div id="chart">
    <!-- 图表内容 -->
  </div>
</body>
</html>
```

#### SVG 图表结构

```xml
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <!-- 标题 -->
  <text x="400" y="30" text-anchor="middle" font-size="16" font-weight="bold">图表标题</text>
  <!-- 坐标轴 -->
  <!-- 数据图形 -->
  <!-- 图例 -->
</svg>
```

### 第五步：输出与优化

#### 输出格式

| 格式 | 用途 | 特点 |
|------|------|------|
| SVG | 文档/网页 | 矢量无损，可编辑 |
| HTML | 交互展示 | 支持悬停提示 |
| ASCII | 终端/文本 | 纯文字图表 |
| Markdown | 文档嵌入 | 表格+描述 |

#### 图表优化检查

- [ ] 标题是否清晰表达图表主旨
- [ ] 坐标轴标签是否完整（含单位）
- [ ] 数据标签是否不重叠
- [ ] 配色是否区分明显
- [ ] 图例是否必要且位置合理
- [ ] 数据是否从零基线开始（柱状图必须）

## 常见图表示例

### 折线图 - 月度趋势

```
数据：月度销售额
配置：X轴=月份，Y轴=金额（万元）
样式：蓝色实线，圆点标记，显示数据标签
```

### 柱状图 - 部门对比

```
数据：各部门季度业绩
配置：X轴=部门，Y轴=业绩（万元）
样式：渐变色柱体，顶部显示数值
```

### 饼图 - 市场份额

```
数据：各品牌市占率
配置：扇区=品牌，角度=占比
样式：环形图，中心显示总计，外部显示百分比
```

## 注意事项

- 柱状图Y轴必须从零开始
- 饼图分类不宜超过7个
- 折线图不宜超过5条线
- 避免3D效果（影响数据准确性）
- 色彩需考虑色盲友好性
- 大数量级数据考虑使用对数坐标
如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。
浏览技能市场
支持平台：Qoder · QoderWork · Claude · Codex 等 AI 编程助手