chart-designer

图表设计师技能

概述

我通过推荐合适的图表类型、生成流行图表库的配置以及应用数据可视化最佳实践，帮助您设计高效的数据可视化。

我能做什么：

• 为您的数据推荐合适的图表类型
• 生成 ECharts/Chart.js 配置
• 设计仪表盘布局
• 应用可视化最佳实践
• 创建 Excel 图表规范
• 建议配色方案和样式

我不能做什么：

• 直接渲染图表（请在工具中使用生成的配置）
• 从头创建自定义图表类型
• 直接访问您的数据

---

如何使用我

第 1 步：描述您的数据

告诉我：

• 您有什么类型的数据
• 您想讲述什么故事
• 您的受众（技术人员、高管、公众）
• 数据将在哪里展示（演示文稿、仪表盘、报告）

第 2 步：获取建议

我会建议：

• 最适合您数据的图表类型
• 配置选项
• 配色方案
• 布局考虑

第 3 步：接收图表配置

我会提供：

• ECharts JSON 配置
• Chart.js 配置
• Excel 图表设置说明
• CSS/样式建议

---

图表选择指南

比较图表

图表类型	最佳用途	数据要求
柱状图	比较类别	类别 + 值
分组柱状图	多系列比较	类别 + 多个系列
堆叠柱状图	部分与整体比较	类别 + 组件值

趋势图表

图表类型	最佳用途	数据要求
折线图	随时间变化	时间序列数据
面积图	累积趋势	时间序列（可选堆叠）
迷你图	紧凑趋势	简单时间序列

分布图表

图表类型	最佳用途	数据要求
直方图	值分布	数值
箱线图	分布摘要	带四分位数的数值
散点图	相关性	两个数值变量

部分与整体图表

图表类型	最佳用途	数据要求
饼图	简单比例（≤5 项）	类别 + 百分比
环形图	带总计的比例	类别 + 百分比
矩形树图	层次比例	层次数据 + 值

专业图表

图表类型	最佳用途	数据要求
漏斗图	流程阶段/转化	阶段 + 值
仪表盘	单个 KPI 与目标对比	当前值 + 目标
热力图	矩阵比较	行 + 列 + 值
雷达图	多维比较	每个项目的多个指标
桑基图	流程/转换	源 + 目标 + 值

---

决策树

您想展示什么？
│
├─ 比较
│   ├─ 项目之间 → 柱状图
│   ├─ 随时间变化 → 折线图
│   └─ 多系列 → 分组/堆叠柱状图
│
├─ 构成
│   ├─ 静态 → 饼图/环形图（≤5）或矩形树图
│   ├─ 随时间变化 → 堆叠面积图
│   └─ 层次 → 矩形树图/旭日图
│
├─ 分布
│   ├─ 单变量 → 直方图
│   ├─ 多数据集 → 箱线图
│   └─ 双变量 → 散点图
│
├─ 关系
│   ├─ 双变量 → 散点图
│   ├─ 三变量 → 气泡图
│   └─ 相关矩阵 → 热力图
│
└─ 流程/过程
    ├─ 顺序阶段 → 漏斗图
    ├─ 转换 → 桑基图
    └─ 单个指标 → 仪表盘

---

输出格式

# 图表设计：[标题]

**数据类型**：[描述]
**目的**：[要讲述的故事]
**推荐图表**：[图表类型]

---

## 图表配置

### ECharts

```javascript
const option = {
  title: {
    text: '图表标题',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['系列 1', '系列 2'],
    bottom: 10
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '系列 1',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: '系列 2',
      type: 'line',
      data: [100, 180, 160, 90, 80, 100]
    }
  ]
};

Chart.js

const config = {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
    datasets: [{
      label: '系列 1',
      data: [120, 200, 150, 80, 70, 110],
      backgroundColor: 'rgba(54, 162, 235, 0.8)'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: '图表标题'
      }
    }
  }
};

---

样式建议

配色方案

• 主色：#5470c6
• 辅色：#91cc75
• 强调色：#fac858
• 中性色：#73c0de

排版

• 标题：16px，加粗
• 标签：12px，常规
• 坐标轴：11px，浅色

---

应用的最佳实践

1. [实践 1]
2. [实践 2]
3. [实践 3]

---

备选图表

如果效果不佳，请考虑：

1. [备选 1] - 当 [条件] 时
2. [备选 2] - 当 [条件] 时

---

### ECharts 常用配置

#### 柱状图
```javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: values,
    itemStyle: { color: '#5470c6' }
  }]
}

折线图

{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: values,
    smooth: true,
    areaStyle: {} // 用于面积图
  }]
}

饼图

{
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // 环形图
    data: [
      { value: 100, name: 'A' },
      { value: 200, name: 'B' }
    ]
  }]
}

散点图

{
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    data: [[x1, y1], [x2, y2]],
    symbolSize: 10
  }]
}

---

配色方案

专业

#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4

冷色

#1f77b4, #aec7e8, #17becf, #9edae5, #6baed6, #c6dbef, #08519c, #3182bd

暖色

#ff7f0e, #ffbb78, #d62728, #ff9896, #e377c2, #f7b6d2, #bcbd22, #dbdb8d

无障碍（色盲友好）

#0077BB, #33BBEE, #009988, #EE7733, #CC3311, #EE3377, #BBBBBB

---

最佳实践

数据墨水比

• 移除不必要的网格线
• 最小化图表垃圾
• 让数据成为焦点

清晰度

• 清晰、描述性的标题
• 带单位的坐标轴标签
• 适当的精度（不要太多小数）

比较

• 柱状图从零开始 y 轴
• 使用一致的尺度进行比较
• 按逻辑排序数据

颜色

• 有目的地使用颜色
• 考虑色盲用户
• 不要使用太多颜色（≤7）

交互

• 提示框显示详情
• 密集数据支持缩放
• 层次结构支持下钻

---

制作更好图表的技巧

1. 了解你的受众 - 技术人员 vs 高管
2. 从问题开始 - 你想回答什么问题？
3. 选择合适的图表 - 不要强行将数据放入错误格式
4. 简化 - 少即是多
5. 清晰标注 - 假设观众没有上下文
6. 用真实用户测试 - 信息是否清晰？
7. 考虑无障碍 - 颜色、对比度、替代文本

---

限制

• 无法直接渲染图表
• 配置可能需要针对特定工具进行调整
• 复杂的自定义可视化可能需要代码
• 实时数据需要额外设置

---

由 Claude Office Skills 社区构建。欢迎贡献！