chart-designer by claude-office-skills/skills
npx skills add https://github.com/claude-office-skills/skills --skill chart-designer我帮助您设计有效的数据可视化方案,通过推荐合适的图表类型、为流行的图表库生成配置以及应用数据可视化最佳实践。
我能做什么:
我不能做什么:
告诉我:
我将建议:
我将提供:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 图表类型 | 最适合 | 数据要求 |
|---|
| 条形图 | 比较类别 | 类别 + 数值 |
| 分组条形图 | 多系列比较 | 类别 + 多个系列 |
| 堆叠条形图 | 部分与整体比较 | 类别 + 组成部分数值 |
| 图表类型 | 最适合 | 数据要求 |
|---|---|---|
| 折线图 | 随时间的变化 | 时间序列数据 |
| 面积图 | 累积趋势 | 时间序列(可选堆叠) |
| 迷你图 | 紧凑趋势 | 简单时间序列 |
| 图表类型 | 最适合 | 数据要求 |
|---|---|---|
| 直方图 | 数值分布 | 数值 |
| 箱形图 | 分布摘要 | 带有四分位数的数值 |
| 散点图 | 相关性 | 两个数值变量 |
| 图表类型 | 最适合 | 数据要求 |
|---|---|---|
| 饼图 | 简单比例(≤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]
}
]
};
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如果效果不佳,请考虑:
---
## 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: {} // 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
由 Claude Office Skills 社区构建。欢迎贡献!
每周安装数
26
代码仓库
GitHub 星标数
5
首次出现
1 天前
安全审计
安装于
claude-code23
gemini-cli6
github-copilot6
codex6
amp6
cline6
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:
What I cannot do:
Tell me:
I'll suggest:
I'll provide:
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
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]
}
]
};
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#73c0deIf this doesn't work well, consider:
---
## 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
Built by the Claude Office Skills community. Contributions welcome!
Weekly Installs
26
Repository
GitHub Stars
5
First Seen
1 day ago
Security Audits
Gen Agent Trust HubPassSocketFailSnykPass
Installed on
claude-code23
gemini-cli6
github-copilot6
codex6
amp6
cline6
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
105,000 周安装