mcpField
C
chart-visualization

chart-visualization

github.com/bytedance数据与数据库84.6k2.6k 次安装1 天前更新
代码仓库

关于 chart-visualization

此技能将数据转化为可视化图表,涵盖图表类型选择、参数提取和图像生成。它通过生成脚本支持多种图表与图示格式。

主要功能

  1. 01根据数据选择图表类型
  2. 02参照说明提取参数
  3. 03通过 JSON 参数生成图表
  4. 04支持地图、图示和统计图表

适用场景

  1. 01可视化趋势和类别比较
  2. 02呈现关系、流向或层级
  3. 03展示区域数据或表格摘要

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/bytedance/deer-flow --skill chart-visualization

安装后在 Claude Code 中输入/chart-visualization确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
generate_area_chart.md
generate_bar_chart.md
generate_boxplot_chart.md
generate_column_chart.md
generate_district_map.md
generate_dual_axes_chart.md
generate_fishbone_diagram.md
generate_flow_diagram.md
generate_funnel_chart.md
generate_histogram_chart.md
generate_line_chart.md
generate_liquid_chart.md
generate_mind_map.md
generate_network_graph.md
generate_organization_chart.md
generate_path_map.md
generate_pie_chart.md
generate_pin_map.md
generate_radar_chart.md
generate_sankey_chart.md
generate_scatter_chart.md
generate_spreadsheet.md
generate_treemap_chart.md
generate_venn_chart.md
generate_violin_chart.md
generate_word_cloud_chart.md
scripts/
generate.js

详细介绍

图表可视化技能

此技能提供将数据转换为可视化图表的完整工作流,涵盖图表选择、参数提取和图像生成。

工作流

要将数据可视化,请按照以下步骤操作:

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 脚本。

负载格式:

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

执行命令:

node ./scripts/generate.js '<payload_json>'
4. 返回结果

脚本会将每个生成图表的结果输出到标准输出(图表类型会输出图像 URL;地图工具会输出文本或 JSON)。 如果缺少 tool、tool 未知或图表服务请求失败,错误信息会写入标准错误。批次中任何一项失败时,进程都会以状态码 1 退出,并在此之前输出成功项目的 URL。只有当命令以状态码 0 退出时,才可提供 URL。 向用户返回以下内容:

  • 图像 URL。
  • 生成图表时使用的完整 args(规格)。

参考资料

每种图表类型的详细规格都位于 references/ 目录中。请查阅这些文件,确保传递给脚本的 args 符合预期架构。

许可证

此 SKILL.md 由 antvis/chart-visualization-skills 提供。 根据 MIT License 授权。

评论

支持 Markdown