chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chart Generation Skill

图表生成技能

Generate clean, minimal charts with shadcn-inspired grayscale styling using QuickChart.io (no dependencies needed).

使用QuickChart.io生成采用shadcn风格灰度设计的极简、整洁图表（无需任何依赖）。

Quick Usage

快速使用

Users can describe charts naturally:

/chart show me monthly revenue: Jan $12k, Feb $15k, Mar $18k, Apr $14k

/chart compare Q4 performance - Revenue was 450, Costs 320, Profit 130

/chart visualize team breakdown: Engineering 45%, Product 25%, Design 20%, Operations 10%

/chart create an area chart of daily active users over the past week

/chart horizontal bar ranking: Chile 89, Mexico 76, Peru 65, Colombia 58

/chart plot this data as a line chart [paste CSV or JSON]

用户可以用自然语言描述图表需求：

/chart 展示月度收入：1月1.2万美元，2月1.5万美元，3月1.8万美元，4月1.4万美元

/chart 对比第四季度业绩 - 收入450，成本320，利润130

/chart 可视化团队人员占比：技术部45%，产品部25%，设计部20%，运营部10%

/chart 创建过去一周日活跃用户的面积图

/chart 横向柱状排名：智利89，墨西哥76，秘鲁65，哥伦比亚58

/chart 将以下数据生成为折线图 [粘贴CSV或JSON数据]

Data Input Formats

数据输入格式

Inline (Simple)

内联（简单格式）

Label1 Value1, Label2 Value2, Label3 Value3

标签1 数值1, 标签2 数值2, 标签3 数值3

From file

从文件读取

/chart line chart from /path/to/data.csv

/chart 从/path/to/data.csv生成折线图

Chart Types

图表类型

Type	Keywords	Description
Bar (vertical)	`bar` , `bar chart`	Vertical bars
Bar (horizontal)	`horizontal bar` , `hbar`	Horizontal bars
Line	`line` , `line chart`	Time series, trends
Area	`area` , `area chart`	Filled line chart
Pie	`pie` , `pie chart`	Proportions
Doughnut	`doughnut` , `donut`	Ring-style proportions

类型	关键词	说明
垂直柱状图	`bar` , `bar chart`	垂直柱状展示
水平柱状图	`horizontal bar` , `hbar`	水平柱状展示
折线图	`line` , `line chart`	时间序列、趋势展示
面积图	`area` , `area chart`	填充式折线图
饼图	`pie` , `pie chart`	占比展示
环形图	`doughnut` , `donut`	环形占比展示

Options

可选参数

title:
```
title "My Chart Title"
```

output:

save to /path/to/chart.png

(default:

~/Downloads/chart_YYYYMMDD_HHMMSS.png

)

size:
```
size 800x600
```
(width x height in pixels, default: 600x400)

title：
```
title "我的图表标题"
```

output：

save to /path/to/chart.png

（默认路径：

~/Downloads/chart_YYYYMMDD_HHMMSS.png

）

size：
```
size 800x600
```
（像素宽x高，默认：600x400）

Color Palette (Grayscale - shadcn/Zinc)

调色板（灰度 - shadcn/Zinc色系）

Color	Hex	Usage
zinc-900	`#18181B`	Primary series
zinc-700	`#3F3F46`	Secondary series
zinc-500	`#71717A`	Third series
zinc-400	`#A1A1AA`	Fourth series
zinc-300	`#D4D4D8`	Fifth series
zinc-200	`#E4E4E7`	Sixth series
zinc-100	`#F4F4F5`	Grid lines

颜色	十六进制码	用途
zinc-900	`#18181B`	主数据系列
zinc-700	`#3F3F46`	次要数据系列
zinc-500	`#71717A`	第三数据系列
zinc-400	`#A1A1AA`	第四数据系列
zinc-300	`#D4D4D8`	第五数据系列
zinc-200	`#E4E4E7`	第六数据系列
zinc-100	`#F4F4F5`	网格线

Style Elements

样式元素

Clean, minimal design
Grayscale color palette
Subtle grid lines (zinc-100)
Rounded corners on bars (radius: 4)
Smooth curves on lines (tension: 0.3)
No borders, light aesthetic
Semi-transparent fills for area charts

极简、整洁的设计
灰度调色板
柔和的网格线（zinc-100）
柱状图圆角（半径：4）
折线图平滑曲线（张力：0.3）
无边框，轻量化视觉效果
面积图半透明填充

Instructions

操作流程

When the user requests a chart:

Parse the request to identify:
- Chart type (bar, line, area, pie, doughnut, horizontal bar)
- Data (inline or file path)
- Title (if provided)
- Output path (default:
```
~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png
```
  )
- Size (default: 600x400)
Build the Chart.js configuration using this shadcn-style template:

json

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  },
  "options": {
    "layout": {
      "padding": { "top": 20, "right": 30, "bottom": 20, "left": 20 }
    },
    "plugins": {
      "title": {
        "display": true,
        "text": "Chart Title",
        "align": "start",
        "font": { "size": 16, "weight": "600", "family": "Inter, system-ui, sans-serif" },
        "color": "#18181B",
        "padding": { "bottom": 20 }
      },
      "legend": { "display": false },
      "datalabels": { "display": false }
    },
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": { "display": false },
        "grid": { "color": "#F4F4F5" },
        "ticks": { "color": "#71717A", "padding": 10, "font": { "size": 11 } }
      },
      "x": {
        "border": { "display": false },
        "grid": { "display": false },
        "ticks": { "color": "#71717A", "padding": 10, "font": { "size": 11 } }
      }
    }
  }
}

Generate the chart using POST to QuickChart.io:

bash

curl -X POST https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d '{
    "version": "4",
    "backgroundColor": "white",
    "width": 600,
    "height": 400,
    "chart": CHART_CONFIG_JSON
  }' \
  --output ~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png

Show the result by reading the generated image file with the Read tool

当用户请求生成图表时：

解析请求，确定以下信息：
- 图表类型（柱状、折线、面积、饼图、环形图、水平柱状图）
- 数据来源（内联或文件路径）
- 标题（若提供）
- 输出路径（默认：
```
~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png
```
  ）
- 尺寸（默认：600x400）
基于shadcn风格模板构建Chart.js配置：

json

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  },
  "options": {
    "layout": {
      "padding": { "top": 20, "right": 30, "bottom": 20, "left": 20 }
    },
    "plugins": {
      "title": {
        "display": true,
        "text": "图表标题",
        "align": "start",
        "font": { "size": 16, "weight": "600", "family": "Inter, system-ui, sans-serif" },
        "color": "#18181B",
        "padding": { "bottom": 20 }
      },
      "legend": { "display": false },
      "datalabels": { "display": false }
    },
    "scales": {
      "y": {
        "beginAtZero": true,
        "border": { "display": false },
        "grid": { "color": "#F4F4F5" },
        "ticks": { "color": "#71717A", "padding": 10, "font": { "size": 11 } }
      },
      "x": {
        "border": { "display": false },
        "grid": { "display": false },
        "ticks": { "color": "#71717A", "padding": 10, "font": { "size": 11 } }
      }
    }
  }
}

通过POST请求调用QuickChart.io生成图表：

bash

curl -X POST https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d '{
    "version": "4",
    "backgroundColor": "white",
    "width": 600,
    "height": 400,
    "chart": CHART_CONFIG_JSON
  }' \
  --output ~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png

展示结果：使用读取工具打开生成的图片文件并展示给用户

Chart Type Configurations

各类型图表配置示例

Bar Chart

柱状图

json

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  }
}

json

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  }
}

Horizontal Bar Chart

水平柱状图

json

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  },
  "options": {
    "indexAxis": "y"
  }
}

json

{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [10, 20, 30],
      "backgroundColor": "#18181B",
      "borderRadius": 4
    }]
  },
  "options": {
    "indexAxis": "y"
  }
}

Line Chart

折线图

json

{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{
      "data": [10, 20, 30],
      "borderColor": "#18181B",
      "borderWidth": 2,
      "tension": 0.3,
      "pointRadius": 0,
      "fill": false
    }]
  }
}

json

{
  "type": "line",
  "data": {
    "labels": ["1月", "2月", "3月"],
    "datasets": [{
      "data": [10, 20, 30],
      "borderColor": "#18181B",
      "borderWidth": 2,
      "tension": 0.3,
      "pointRadius": 0,
      "fill": false
    }]
  }
}

Area Chart (Filled Line)

面积图（填充式折线图）

json

{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{
      "data": [10, 20, 30],
      "borderColor": "#18181B",
      "backgroundColor": "rgba(24, 24, 27, 0.1)",
      "borderWidth": 2,
      "tension": 0.3,
      "pointRadius": 0,
      "fill": true
    }]
  }
}

json

{
  "type": "line",
  "data": {
    "labels": ["1月", "2月", "3月"],
    "datasets": [{
      "data": [10, 20, 30],
      "borderColor": "#18181B",
      "backgroundColor": "rgba(24, 24, 27, 0.1)",
      "borderWidth": 2,
      "tension": 0.3,
      "pointRadius": 0,
      "fill": true
    }]
  }
}

Multi-Series Area Chart

多系列面积图

json

{
  "type": "line",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr"],
    "datasets": [
      {
        "label": "Desktop",
        "data": [100, 150, 120, 180],
        "borderColor": "#18181B",
        "backgroundColor": "rgba(24, 24, 27, 0.15)",
        "borderWidth": 2,
        "tension": 0.3,
        "fill": true
      },
      {
        "label": "Mobile",
        "data": [80, 120, 140, 160],
        "borderColor": "#71717A",
        "backgroundColor": "rgba(113, 113, 122, 0.15)",
        "borderWidth": 2,
        "tension": 0.3,
        "fill": true
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": { "display": true, "position": "bottom", "labels": { "color": "#71717A", "usePointStyle": true } }
    }
  }
}

json

{
  "type": "line",
  "data": {
    "labels": ["1月", "2月", "3月", "4月"],
    "datasets": [
      {
        "label": "桌面端",
        "data": [100, 150, 120, 180],
        "borderColor": "#18181B",
        "backgroundColor": "rgba(24, 24, 27, 0.15)",
        "borderWidth": 2,
        "tension": 0.3,
        "fill": true
      },
      {
        "label": "移动端",
        "data": [80, 120, 140, 160],
        "borderColor": "#71717A",
        "backgroundColor": "rgba(113, 113, 122, 0.15)",
        "borderWidth": 2,
        "tension": 0.3,
        "fill": true
      }
    ]
  },
  "options": {
    "plugins": {
      "legend": { "display": true, "position": "bottom", "labels": { "color": "#71717A", "usePointStyle": true } }
    }
  }
}

Pie / Doughnut Chart

饼图/环形图

json

{
  "type": "doughnut",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [45, 30, 25],
      "backgroundColor": ["#18181B", "#71717A", "#D4D4D8"],
      "borderWidth": 0
    }]
  },
  "options": {
    "cutout": "60%"
  }
}

json

{
  "type": "doughnut",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{
      "data": [45, 30, 25],
      "backgroundColor": ["#18181B", "#71717A", "#D4D4D8"],
      "borderWidth": 0
    }]
  },
  "options": {
    "cutout": "60%"
  }
}

Examples

示例

Bar Chart

柱状图

/chart compare our Q4 numbers - Revenue hit 450, Costs were 320, and Profit came in at 130

Generated curl:

bash

curl -X POST https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d '{
    "version": "4",
    "backgroundColor": "white",
    "width": 600,
    "height": 400,
    "chart": {
      "type": "bar",
      "data": {
        "labels": ["Revenue", "Costs", "Profit"],
        "datasets": [{"data": [450, 320, 130], "backgroundColor": "#18181B", "borderRadius": 4}]
      },
      "options": {
        "layout": {"padding": {"top": 20, "right": 30, "bottom": 20, "left": 20}},
        "plugins": {
          "title": {"display": true, "text": "Q4 Financial Summary", "align": "start", "font": {"size": 16, "weight": "600"}, "color": "#18181B", "padding": {"bottom": 20}},
          "legend": {"display": false}
        },
        "scales": {
          "y": {"beginAtZero": true, "border": {"display": false}, "grid": {"color": "#F4F4F5"}, "ticks": {"color": "#71717A", "padding": 10}},
          "x": {"border": {"display": false}, "grid": {"display": false}, "ticks": {"color": "#71717A", "padding": 10}}
        }
      }
    }
  }' \
  --output ~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png

/chart 对比我们的第四季度数据 - 收入450，成本320，利润130

生成的curl命令：

bash

curl -X POST https://quickchart.io/chart \
  -H 'Content-Type: application/json' \
  -d '{
    "version": "4",
    "backgroundColor": "white",
    "width": 600,
    "height": 400,
    "chart": {
      "type": "bar",
      "data": {
        "labels": ["收入", "成本", "利润"],
        "datasets": [{"data": [450, 320, 130], "backgroundColor": "#18181B", "borderRadius": 4}]
      },
      "options": {
        "layout": {"padding": {"top": 20, "right": 30, "bottom": 20, "left": 20}},
        "plugins": {
          "title": {"display": true, "text": "第四季度财务汇总", "align": "start", "font": {"size": 16, "weight": "600"}, "color": "#18181B", "padding": {"bottom": 20}},
          "legend": {"display": false}
        },
        "scales": {
          "y": {"beginAtZero": true, "border": {"display": false}, "grid": {"color": "#F4F4F5"}, "ticks": {"color": "#71717A", "padding": 10}},
          "x": {"border": {"display": false}, "grid": {"display": false}, "ticks": {"color": "#71717A", "padding": 10}}
        }
      }
    }
  }' \
  --output ~/Downloads/chart_$(date +%Y%m%d_%H%M%S).png

Area Chart

面积图

/chart show monthly visitors as an area chart - Jan had 186, Feb 305, Mar 237, Apr 73, May 209, Jun 214

/chart 以面积图展示月度访客量：1月186，2月305，3月237，4月73，5月209，6月214

Multi-Series Comparison

多系列对比

/chart compare desktop vs mobile traffic:
Desktop: Jan 100, Feb 150, Mar 120
Mobile: Jan 80, Feb 120, Mar 140

/chart 对比桌面端与移动端流量：
桌面端：1月100，2月150，3月120
移动端：1月80，2月120，3月140

From Data

从文件数据生成

/chart visualize this CSV as a line chart:
date,users
2024-01-01,150
2024-01-02,180
2024-01-03,220

/chart 将以下CSV数据生成为折线图：
date,users
2024-01-01,150
2024-01-02,180
2024-01-03,220

Output

输出

Charts are saved to

~/Downloads/chart_YYYYMMDD_HHMMSS.png

by default (with timestamp). Use the Read tool to display the generated image to the user.

图表默认保存至

~/Downloads/chart_YYYYMMDD_HHMMSS.png

（带时间戳）。使用读取工具打开生成的图片并展示给用户。

No Dependencies

无需依赖

This skill uses QuickChart.io's free API - no local packages required. Just curl.

本技能使用QuickChart.io的免费API，无需安装本地包，仅需使用curl即可。