图表可视化

当用户需要可视化数据时使用此技能。它从26种可用图表中智能选择最合适的类型，根据详细规范提取参数，并使用JavaScript脚本生成图表图像。

文件预览

28 个文件

references

scripts

SKILL.md

3.3 KB · 可预览

---
name: chart-visualization
description: This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.
compatibility:
  nodejs: ">=18.0.0"
---

# Chart Visualization Skill

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

## Workflow

To visualize data, follow these steps:

### 1. Intelligent Chart Selection
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` or `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` or `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.

### 2. Parameter Extraction
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.

### 3. Chart Generation
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>'
```

### 4. Result Return
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.

## 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.

## License

This `SKILL.md` is provided by [antvis/chart-visualization-skills](https://github.com/antvis/chart-visualization-skills).
Licensed under the [MIT License](https://github.com/antvis/chart-visualization-skills/blob/master/LICENSE).

SKILL.md

raw

元数据

name	chart-visualization
description	当用户需要可视化数据时使用此技能。它从26种可用图表中智能选择最合适的类型，根据详细规范提取参数，并使用JavaScript脚本生成图表图像。
compatibility	{ "nodejs": ">=18.0.0" }

图表可视化技能 此技能提供了将数据转换为可视化图表的完整工作流程。它处理图表选择、参数提取和图像生成。 工作流程 要可视化数据，请按以下步骤操作： 1. 智能图表选择 分析用户的数据特征，确定最合适的图表类型。使用以下指南（并查阅 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. 参数提取 一旦选择了图表类型，阅读 references/ 目录下对应的文件（例如 references/generate_line_chart.md）以确定必需字段和可选字段。 从用户输入中提取数据，并将其映射到期望的 args 格式。 3. 图表生成 使用 JSON 载荷调用 scripts/generate.js 脚本。 载荷格式： jsonCopy code{ "tool": "generate_chart_type_name", "args": { "data": [...], "title": "...", "theme": "...", "style": { ... } } } 执行命令： bashCopy codenode ./scripts/generate.js '<payload_json>' 4. 结果返回 脚本将输出生成的图表图像的 URL。 向用户返回以下内容： 图像 URL。 用于生成的完整 args（规范）。 参考资料 每个图表类型的详细规范位于 references/ 目录中。查阅这些文件以确保传递给脚本的 args 符合预期的模式。 许可证 此 SKILL.md 由 antvis/chart-visualization-skills 提供。 基于 MIT 许可证 发布。