企业官网建设流程全解析

deer-flow chart-visualization 技能实战：双轴图（generate_dual_axes_chart）参数规范与调用链路

【免费下载链接】deer-flowAn open-source long-horizon SuperAgent harness that researches, codes, and creates. With the help of sandboxes, memories, tools, skill, subagents and message gateway, it handles different levels of tasks that could take minutes to hours.项目地址: https://gitcode.com/GitHub_Trending/de/deer-flow

本文以 deer-flow 技能库chart-visualization中的双轴图参考文档为核心，完整梳理generate_dual_axes_chart的输入字段、默认值与使用约束，并结合技能入口 SKILL.md 与执行脚本 generate.js 的源码，说明一份双轴图 spec 从 Agent 组装参数到输出图像 URL 的完整调用链。读完后你可以直接编写可运行的双轴图 payload，并理解其在技能流水线中的角色与适用边界。

1. 双轴图的定位：趋势与对比同屏展示

双轴图（dual-axes）的核心能力是在同一画布上叠加柱状与折线（或两条不同量纲的曲线），用于同时展示趋势与对比，典型场景如营收 vs 利润、温度 vs 降雨。

从 SKILL.md 的图表选择指南可以看到，generate_dual_axes_chart被明确归入Time Series（时间序列）一类，且只在"两个序列量纲不同（two different scales）"时才被推荐选用：

• Time Series：generate_line_chart（趋势）或generate_area_chart（累积趋势）；量纲不同的两个序列则用generate_dual_axes_chart。

这意味着双轴图不是普通折线图的替代，而是解决"两条曲线无法共用同一 Y 轴"这一特定问题的图表类型。

2. 输入字段规范

以下内容完整继承自参考文档 generate_dual_axes_chart.md，并在参数说明中补充了与技能整体约定一致的取值细节。

2.1 必填字段

两点关键约束值得注意：

1. series[].data的长度必须与categories一致，否则无法对齐 X 轴刻度；
2. axisYTitle是系列级字段（而非顶层字段），这正是"双轴"语义的体现——每个系列可以声明自己所属 Y 轴的含义，左轴与右轴各自独立标注。

与同目录其他图表参考（如 generate_column_chart.md 使用扁平data: array<object>）相比，双轴图采用categories + series的结构化数据形态，这是多系列图表（如 line、dual-axes 类）共用的数据约定。

2.2 可选字段

可选字段在chart-visualization各图表参考中保持一致的默认值体系（600×400画布、default主题与纹理、空字符串标题），因此你在其他图表参考中积累的样式经验可以直接迁移到双轴图上。

3. 一条可复制的完整示例

以下 payload 展示"营收 vs 利润"场景：柱状系列与折线系列量纲不同，分别通过axisYTitle声明各自的 Y 轴含义：

node ./scripts/generate.js '{ "tool": "generate_dual_axes_chart", "args": { "categories": ["2022", "2023", "2024"], "series": [ { "type": "column", "data": [1200, 1580, 2010], "axisYTitle": "营收（万元）" }, { "type": "line", "data": [86, 152, 240], "axisYTitle": "利润（万元）" } ], "title": "近三年营收与利润", "theme": "default", "width": 600, "height": 400 } }'

执行约定来自 SKILL.md：在chart-visualization技能目录下执行node ./scripts/generate.js '<payload_json>'，脚本成功后在 stdout 输出生成的图表图像 URL。技能清单的 frontmatter 要求nodejs >= 18.0.0（脚本使用了全局fetch），且需要能访问图表生成服务端（见第 5 节）。

4. 技能工作流中的位置：四步流水线

chart-visualization技能在 SKILL.md 中定义了固定工作流，双轴图是其中第 2 步的产物之一：

1. Intelligent Chart Selection（智能选图）：分析数据特征确定图表类型——时间序列且量纲不同即命中generate_dual_axes_chart；
2. Parameter Extraction（参数提取）：读取references/下对应文件（即本文核心文档）确认必填/可选字段，把用户数据映射为args；
3. Chart Generation（图表生成）：以 JSON payload 调用scripts/generate.js，payload 结构为{"tool": "generate_chart_type_name", "args": {...}}；
4. Result Return（结果返回）：脚本输出图像 URL，随后向用户同时返回图像 URL与完整的args规格（即 spec），便于复现与二次编辑。

因此参考文档中"返回双轴图图像 URL，并随_meta.spec给出详细参数"这一条，对应的是技能层对 Agent 的交付约定：URL 用于展示，_meta.spec用于可追溯地还原生成参数。

5. 源码级实现：payload 如何变成图像 URL

下面从 generate.js 的源码说明一次双轴图请求的底层路径。

5.1 工具名到图表类型的映射

脚本顶部维护了与前端src/utils/callTool.ts保持一致的CHART_TYPE_MAP（generate.js#L6-L32），其中双轴图的映射为：

const CHART_TYPE_MAP = { // ... generate_dual_axes_chart: "dual-axes", // ... };

即 payload 中的"tool": "generate_dual_axes_chart"会被归一化为服务端识别的类型字符串"dual-axes"。若传入未知工具名，脚本会打印Unknown tool并跳过该项（generate.js#L131-L135），批量场景下不会中断后续图表。

5.2 服务端地址与请求体

• 服务端地址（generate.js#L34-L39）：优先读取环境变量VIS_REQUEST_SERVER，缺省回退到https://antv-studio.alipay.com/api/gpt-vis。这决定了本地运行该技能时的适用前提：要么可直连默认服务端，要么通过VIS_REQUEST_SERVER指向自建/代理端点。
• 请求体组装（generate.js#L62-L77）：generateChartUrl把图表类型与你的args合并为{ type: "dual-axes", source: "chart-visualization-creator", ...options }后以POST application/json发出；响应中success为假时抛出errorMessage，成功时返回resultObj（即图像 URL）并打印到 stdout。
• 入参解析（generate.js#L97-L116）：第一个命令行参数既可以是 JSON 字符串，也可以是 JSON 文件路径（脚本先尝试fs.existsSync判断），并且支持传入数组批量生成多张图（generate.js#L118）。

此外可以注意到，脚本对地图类工具（generate_district_map/generate_path_map/generate_pin_map）走独立的generateMap分支并额外携带serviceId（来自环境变量SERVICE_ID），而双轴图属于普通图表分支，只需第 5.2 节所述的标准 payload，无需SERVICE_ID。

6. 使用建议与避坑要点

结合参考文档的"使用建议"与脚本行为，实践中有四条约束值得遵守：

1. 克制使用：仅在确有不同量纲或图例对比需求时选用双轴图，避免滥用导致误读；
2. 系列数量 ≤ 2：超过两个系列会让双轴语义（左右轴归属）变得含混，阅读复杂度急剧上升；
3. 量级悬殊时用次坐标轴缩放：若两条曲线差值巨大，应依赖次坐标轴进行缩放，而不是直接叠加；
4. data长度对齐：series[].data与categories长度不一致是最常见的构造错误，应在 Agent 提取参数阶段校验；rough纹理与academy/dark主题可安全混用于任何theme取值组合，但配色建议通过style.palette显式指定以区分柱状与折线。

7. 小结与延伸阅读

generate_dual_axes_chart是 deer-flowchart-visualization技能中专门处理"异量纲双序列"的图表工具：输入遵循categories + series契约，样式与画布参数有统一的默认值体系，执行侧由 generate.js 统一完成工具名映射、HTTP 请求与 URL 输出，Agent 最终向用户交付"图像 URL + 完整 spec"。

延伸阅读（均以仓库根目录为起点）：

• 双轴图参数规范原文：skills/public/chart-visualization/references/generate_dual_axes_chart.md
• 技能工作流与 payload 格式：skills/public/chart-visualization/SKILL.md
• 同系列参考（对比数据形态差异）：柱状图、折线图
• 26 种图表的完整参考目录：skills/public/chart-visualization/references/

【免费下载链接】deer-flowAn open-source long-horizon SuperAgent harness that researches, codes, and creates. With the help of sandboxes, memories, tools, skill, subagents and message gateway, it handles different levels of tasks that could take minutes to hours.项目地址: https://gitcode.com/GitHub_Trending/de/deer-flow