chart-designer

图表设计技能

概述

我可以通过推荐合适的图表类型、为常用图表库生成配置，并应用数据可视化最佳实践，帮助你设计有效的数据可视化。

我可以做什么：

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

我不能做什么：

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

---

如何使用我

第 1 步：描述你的数据

请告诉我：

• 你拥有的数据类型
• 你想讲述什么故事
• 你的受众（技术人员、管理层、公众）
• 图表的展示位置（演示文稿、仪表板、报告）

第 2 步：获取建议

我会建议：

• 最适合你数据的图表类型
• 配置选项
• 配色方案
• 布局注意事项

第 3 步：获取图表配置

我会提供：

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

---

图表选择指南

对比图表

图表类型	适用场景	数据要求
柱状图	比较类别	类别 + 数值
分组柱状图	比较多个系列	类别 + 多个系列
堆叠柱状图	比较部分与整体	类别 + 组成部分的数值

趋势图表

图表类型	适用场景	数据要求
折线图	展示随时间的变化	时间序列数据
面积图	展示累积趋势	时间序列（可选堆叠）
迷你图	展示紧凑趋势	简单时间序列

分布图表

图表类型	适用场景	数据要求
直方图	展示数值分布	数值
箱线图	概括分布情况	含四分位数的数值
散点图	展示相关性	两个数值变量

部分与整体图表

图表类型	适用场景	数据要求
饼图	展示简单比例（≤5 个项目）	类别 + 百分比
环形图	展示比例及总量	类别 + 百分比
矩形树图	展示层级比例	层级数据 + 数值

专用图表

图表类型	适用场景	数据要求
漏斗图	展示流程阶段/转化	阶段 + 数值
仪表盘	对比单个 KPI 与目标	当前值 + 目标值
热力图	展示矩阵对比	行 + 列 + 数值
雷达图	进行多维度对比	每个项目包含多个指标
桑基图	展示流向/转换	来源 + 目标 + 数值

---

决策树

What do you want to show?
│
├─ Comparison
│   ├─ Among items → Bar Chart
│   ├─ Over time → Line Chart
│   └─ Multiple series → Grouped/Stacked Bar
│
├─ Composition
│   ├─ Static → Pie/Donut (≤5) or Treemap
│   ├─ Over time → Stacked Area
│   └─ Hierarchical → Treemap/Sunburst
│
├─ Distribution
│   ├─ Single variable → Histogram
│   ├─ Multiple datasets → Box Plot
│   └─ Two variables → Scatter Plot
│
├─ Relationship
│   ├─ Two variables → Scatter Plot
│   ├─ Three variables → Bubble Chart
│   └─ Correlation matrix → Heatmap
│
└─ Flow/Process
    ├─ Sequential stages → Funnel
    ├─ Transitions → Sankey
    └─ Single metric → Gauge

---

输出格式

# Chart Design: [Title]

**Data Type**: [Description]
**Purpose**: [What story to tell]
**Recommended Chart**: [Chart type]

---

## Chart Configuration

### ECharts

```javascript
const option = {
  title: {
    text: 'Chart Title',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Series 1', 'Series 2'],
    bottom: 10
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Series 1',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [100, 180, 160, 90, 80, 100]
    }
  ]
};

Chart.js

const config = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Series 1',
      data: [120, 200, 150, 80, 70, 110],
      backgroundColor: 'rgba(54, 162, 235, 0.8)'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart Title'
      }
    }
  }
};

---

样式建议

配色方案

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

字体排版

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

---

已应用的最佳实践

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

---

替代图表

如果效果不理想，可以考虑：

1. [替代方案 1]——适用于[条件]
2. [替代方案 2]——适用于[条件]

---

## ECharts Common Configurations

### Bar Chart
```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: {} // for area chart
  }]
}

饼图

{
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // donut
    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. 了解受众——技术人员还是管理层
2. 从问题出发——你想要回答什么问题？
3. 选择合适的图表——不要强行用不合适的格式呈现数据
4. 化繁为简——越简单越好
5. 清晰标注——假设查看者不了解背景信息
6. 让真实用户测试——信息是否清晰？
7. 考虑无障碍访问——颜色、对比度、替代文本

---

局限性

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

---

由 Claude Office Skills 社区打造。欢迎贡献！