chart-visualization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Chart Visualization Skill

图表可视化Skill

This skill provides a comprehensive workflow for transforming data into visual charts. It handles chart selection, parameter extraction, and image generation.

该Skill提供了将数据转换为可视化图表的完整工作流，涵盖图表选择、参数提取和图片生成。

Workflow

工作流

To visualize data, follow these steps:

要进行数据可视化，请遵循以下步骤：

1. Intelligent Chart Selection

1. 智能图表选择

Analyze the user's data features to determine the most appropriate chart type. Use the following guidelines (and consult

references/

for detailed specs):

Time Series: Use
```
generate_line_chart
```
(trends) or
```
generate_area_chart
```
(accumulated trends). Use
```
generate_dual_axes_chart
```
for two different scales.
Comparisons: Use
```
generate_bar_chart
```
(categorical) or
```
generate_column_chart
```
. Use
```
generate_histogram_chart
```
for frequency distributions.

Part-to-Whole: Use

generate_pie_chart

generate_treemap_chart

(hierarchical).

Relationships & Flow: Use

generate_scatter_chart

(correlation),

generate_sankey_chart

(flow), or

generate_venn_chart

(overlap).

Maps: Use

generate_district_map

(regions),

generate_pin_map

(points), or

generate_path_map

(routes).

Hierarchies & Trees: Use

generate_organization_chart

generate_mind_map

Specialized:
- ```
generate_radar_chart
```
  : Multi-dimensional comparison.
- ```
generate_funnel_chart
```
  : Process stages.
- ```
generate_liquid_chart
```
  : Percentage/Progress.
- ```
generate_word_cloud_chart
```
  : Text frequency.
- ```
generate_boxplot_chart
```
  or
```
generate_violin_chart
```
  : Statistical distribution.
- ```
generate_network_graph
```
  : Complex node-edge relationships.
- ```
generate_fishbone_diagram
```
  : Cause-effect analysis.
- ```
generate_flow_diagram
```
  : Process flow.
- ```
generate_spreadsheet
```
  : Tabular data or pivot tables for structured data display and cross-tabulation.

分析用户的数据特征，以确定最合适的图表类型。请遵循以下准则（如需详细规范，请查阅

references/

目录）：

时间序列：使用
```
generate_line_chart
```
（趋势展示）或
```
generate_area_chart
```
（累积趋势展示）。若涉及两种不同刻度，使用
```
generate_dual_axes_chart
```
。
对比分析：使用
```
generate_bar_chart
```
（分类对比）或
```
generate_column_chart
```
。若展示频率分布，使用
```
generate_histogram_chart
```
。
占比分析：使用
```
generate_pie_chart
```
或
```
generate_treemap_chart
```
（层级占比）。
关系与流向：使用
```
generate_scatter_chart
```
（相关性分析）、
```
generate_sankey_chart
```
（流向展示）或
```
generate_venn_chart
```
（重叠分析）。
地图类：使用
```
generate_district_map
```
（区域展示）、
```
generate_pin_map
```
（点位展示）或
```
generate_path_map
```
（路线展示）。

层级与树状结构：使用

generate_organization_chart

或

generate_mind_map

。

特殊类型:
- ```
generate_radar_chart
```
  ：多维度对比。
- ```
generate_funnel_chart
```
  ：流程阶段展示。
- ```
generate_liquid_chart
```
  ：百分比/进度展示。
- ```
generate_word_cloud_chart
```
  ：文本频率展示。
- ```
generate_boxplot_chart
```
  或
```
generate_violin_chart
```
  ：统计分布展示。
- ```
generate_network_graph
```
  ：复杂节点-关系展示。
- ```
generate_fishbone_diagram
```
  ：因果分析。
- ```
generate_flow_diagram
```
  ：流程流向展示。
- ```
generate_spreadsheet
```
  ：结构化数据的表格或透视表展示，支持交叉制表。

2. Parameter Extraction

2. 参数提取

Once a chart type is selected, read the corresponding file in the

references/

directory (e.g.,

references/generate_line_chart.md

) to identify the required and optional fields. Extract the data from the user's input and map it to the expected

args

format.

选定图表类型后，读取

references/

目录下对应的文件（如

references/generate_line_chart.md

），识别必填和可选字段。从用户输入中提取数据，并映射为预期的

args

格式。

3. Chart Generation

3. 图表生成

Invoke the

scripts/generate.js

script with a JSON payload.

Payload Format:

json

{
  "tool": "generate_chart_type_name",
  "args": {
    "data": [...],
    "title": "...",
    "theme": "...",
    "style": { ... }
  }
}

Execution Command:

bash

node ./scripts/generate.js '<payload_json>'

通过JSON调用

scripts/generate.js

脚本。

负载格式:

json

{
  "tool": "generate_chart_type_name",
  "args": {
    "data": [...],
    "title": "...",
    "theme": "...",
    "style": { ... }
  }
}

执行命令:

bash

node ./scripts/generate.js '<payload_json>'

4. Result Return

4. 结果返回

The script will output the URL of the generated chart image. Return the following to the user:

The image URL.
The complete
```
args
```
(specification) used for generation.

脚本将输出生成的图表图片URL。需向用户返回以下内容：

图片URL。
生成图表时使用的完整
```
args
```
（规范参数）。

Reference Material

参考资料

Detailed specifications for each chart type are located in the

references/

directory. Consult these files to ensure the

args

passed to the script match the expected schema.

每种图表类型的详细规范位于

references/

目录中。请查阅这些文件，确保传递给脚本的

args

符合预期的格式要求。