chart-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chart Designer Skill

图表设计Skill

Overview

概述

I help you design effective data visualizations by recommending the right chart types, generating configurations for popular charting libraries, and applying data visualization best practices.

What I can do:

Recommend appropriate chart types for your data
Generate ECharts/Chart.js configurations
Design dashboard layouts
Apply visualization best practices
Create Excel chart specifications
Suggest color schemes and styling

What I cannot do:

Render charts directly (use generated configs in tools)
Create custom chart types from scratch
Access your data directly

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

我能做什么：

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

我不能做什么：

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

How to Use Me

使用方法

Step 1: Describe Your Data

步骤1：描述你的数据

Tell me:

What type of data you have
What story you want to tell
Your audience (technical, executive, public)
Where it will be displayed (presentation, dashboard, report)

请告诉我：

你拥有的数据类型
你想要传达的信息
受众群体（技术人员、管理层、普通大众）
展示场景（演示文稿、仪表盘、报告）

Step 2: Get Recommendations

步骤2：获取推荐方案

I'll suggest:

Best chart type(s) for your data
Configuration options
Color schemes
Layout considerations

我会为你建议：

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

Step 3: Receive Chart Configs

步骤3：获取图表配置

I'll provide:

ECharts JSON configuration
Chart.js configuration
Excel chart setup instructions
CSS/styling recommendations

我会提供：

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

Chart Selection Guide

图表选择指南

Comparison Charts

对比类图表

Chart Type	Best For	Data Requirements
Bar Chart	Comparing categories	Categories + values
Grouped Bar	Multiple series comparison	Categories + multiple series
Stacked Bar	Part-to-whole comparison	Categories + component values

图表类型	适用场景	数据要求
柱状图	对比不同类别	类别 + 数值
分组柱状图	多系列对比	类别 + 多系列数据
堆叠柱状图	占比对比	类别 + 分项数值

Trend Charts

趋势类图表

Chart Type	Best For	Data Requirements
Line Chart	Change over time	Time series data
Area Chart	Cumulative trends	Time series (stacked optional)
Sparkline	Compact trends	Simple time series

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

Distribution Charts

分布类图表

Chart Type	Best For	Data Requirements
Histogram	Value distribution	Numeric values
Box Plot	Distribution summary	Numeric values with quartiles
Scatter Plot	Correlation	Two numeric variables

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

Part-to-Whole Charts

占比类图表

Chart Type	Best For	Data Requirements
Pie Chart	Simple proportions (≤5 items)	Categories + percentages
Donut Chart	Proportions with total	Categories + percentages
Treemap	Hierarchical proportions	Hierarchical data + values

图表类型	适用场景	数据要求
饼图	简单占比（≤5个分类）	类别 + 百分比
环形图	带总计的占比	类别 + 百分比
树图	层级占比	层级数据 + 数值

Specialized Charts

特殊图表

Chart Type	Best For	Data Requirements
Funnel	Process stages/conversion	Stages + values
Gauge	Single KPI vs target	Current value + target
Heatmap	Matrix comparisons	Row + Column + Value
Radar	Multi-dimensional comparison	Multiple metrics per item
Sankey	Flow/transitions	Source + Target + Value

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

Decision Tree

决策树

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

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

Output Format

输出格式

markdown

undefined

markdown

undefined

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]
    }
  ]
};

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

javascript

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'
      }
    }
  }
};

javascript

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'
      }
    }
  }
};

Styling Recommendations

样式建议

Color Palette

配色方案

Primary:
```
#5470c6
```
Secondary:
```
#91cc75
```
Accent:
```
#fac858
```
Neutral:
```
#73c0de
```

主色:
```
#5470c6
```
辅助色:
```
#91cc75
```
强调色:
```
#fac858
```
中性色:
```
#73c0de
```

Typography

字体

Title: 16px, bold
Labels: 12px, regular
Axis: 11px, light

标题: 16px, 粗体
标签: 12px, 常规
坐标轴: 11px, 轻量

Best Practices Applied

应用的最佳实践

[Practice 1]
[Practice 2]
[Practice 3]

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

Alternative Charts

替代图表

If this doesn't work well, consider:

[Alternative 1] - when [condition]
[Alternative 2] - when [condition]

---

如果当前方案不合适，可以考虑：

[替代方案1] - 适用于[场景]
[替代方案2] - 适用于[场景]

---

ECharts Common Configurations

ECharts常用配置

Bar Chart

柱状图

javascript

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

javascript

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

Line Chart

折线图

javascript

{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: values,
    smooth: true,
    areaStyle: {} // for area chart
  }]
}

javascript

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

Pie Chart

饼图

javascript

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

javascript

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

Scatter Plot

散点图

javascript

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

javascript

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

Color Palettes

配色方案

Professional

专业风

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

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

Cool

冷色调

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

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

Warm

暖色调

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

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

Accessible (colorblind-friendly)

无障碍友好（色弱友好）

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

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

Best Practices

最佳实践

Data Ink Ratio

数据墨水比

Remove unnecessary gridlines
Minimize chart junk
Let data be the focus

移除不必要的网格线
减少图表冗余元素
让数据成为焦点

Clarity

清晰度

Clear, descriptive titles
Labeled axes with units
Appropriate precision (not too many decimals)

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

Comparison

对比性

Start y-axis at zero for bar charts
Use consistent scales for comparison
Sort data logically

柱状图的Y轴从0开始
使用一致的刻度进行对比
合理排序数据

Color

色彩

Use color purposefully
Consider colorblind users
Don't use too many colors (≤7)

有目的性地使用色彩
考虑色弱用户
不要使用过多色彩（≤7种）

Interaction

交互性

Tooltips for details
Zoom for dense data
Drill-down for hierarchies

用工具提示展示详情
为密集数据提供缩放功能
为层级数据提供下钻功能

Tips for Better Charts

优化图表的小贴士

Know your audience - technical vs. executive
Start with the question - what are you trying to answer?
Choose the right chart - don't force data into wrong formats
Simplify - less is more
Label clearly - assume viewers have no context
Test with real users - is the message clear?
Consider accessibility - colors, contrast, alt text

了解受众 - 技术人员 vs 管理层
从问题出发 - 你想要解答什么问题？
选择合适的图表 - 不要强行将数据套入不合适的格式
简化设计 - 少即是多
清晰标注 - 假设观众没有上下文背景
真实用户测试 - 信息传达是否清晰？
考虑无障碍性 - 色彩、对比度、替代文本

Limitations

局限性

Cannot render charts directly
Configuration may need adjustment for specific tools
Complex custom visualizations may require code
Real-time data requires additional setup

Built by the Claude Office Skills community. Contributions welcome!

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

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