AntV G2 Chart作者 antvis

AntV G2 Chart Skill.

有意识地使用 G2 v5 语法，而不是混用其他图表库的语法。

数据可视化
图表
JavaScript

来源审查 · AntV G2 ChartSKILL.md

任务数据可视化 产出内容 • 一份包含容器和渲染设置的完整 G2 v5 图表规范。 • 修正后的标记、编码、变换和组合选择。 • 针对具体图表审查标签、颜色语义、工具提示和数据含义。 开始之前 需要 @antv/g2 v5 或文档所述的浏览器包。可选的参考资料检索使用外部 AntV 上下文服务。

编辑摘要 · 已审查来源 2026-10-07 · 非生成示例

01 功能说明

以 G2 v5 规范模式编写图表

一份 G2 v5 实现指南，结合了声明式规范规则、定向参考资料检索、常见错误预防和基于数据的视觉选择。

基于来源的工作流并非执行基准测试

工作方法

AntV G2 Chart 专注于使用 @antv/g2 v5 实现图表。它要求生成的示例从完整的声明式规范开始，并涵盖容器缺失、标记名称错误、误用单数形式的标签属性以及变换位置错误等常见问题。它还提供文档检索端点，用于定向查询 G2 概念和示例。

该来源对多标记组合的说明尤其清晰：线和点应放在视图的 children 中，而不是反复更改根 type。其视觉指南区分了引擎默认值与该技能选用的覆盖值，并要求仅在含义明确时添加单位、来源标签和标题。它不是用于关系图、图示编辑器或数据透视表的通用 AntV 工具。

预期交付物

一份包含容器和渲染设置的完整 G2 v5 图表规范。
修正后的标记、编码、变换和组合选择。
针对具体图表审查标签、颜色语义、工具提示和数据含义。

查看示例任务简述

从任务简述到审查

01
理解数据和意图
确定字段、单位、比较需求和图表要回答的问题，不臆造缺失的语义。
02
检索相关参考资料
当需要确认 API 或图表类型的细节时，使用文档所述的 G2 检索服务。
03
构建完整规范
选择有效的标记和通道，使用变换数组，并在视图内组合叠加内容。
04
渲染并审查
在目标容器中检查实际的标记、标签、图例、主题以及密集数据下的表现。

02 适用场景

适用场景

需要 @antv/g2 v5 或文档所述的浏览器包。可选的参考资料检索使用外部 AntV 上下文服务。

适合的场景

G2 v5 实现适合使用该库的声明式规范风格创建图表。
迁移和调试有助于识别从旧版 G2 用法或其他可视化语法中复制而来的语法。
多标记图表阐明应如何组合相互独立的叠加内容。

需要检查的限制

并非适用于所有 AntV 库G6 网络图、X6 图示和 S2 数据透视表不在所述范围内。
成功渲染不等于数据有效正确渲染并不能证明数据、聚合或解读有效。
参考资料需要网络访问文档所述的检索端点是一项外部服务，使用时必须检查其可用性。

请提供这些输入

数据集和字段含义提供实际值、类型、单位以及任何允许的聚合方式。
可视化问题说明图表应比较或揭示什么。
运行时环境说明 G2 版本、容器、主题和交互要求。

03 关键决策

关键决策

完整的初始规范
与一系列局部的根级更改相比，完整规范更便于理解生成的图表。
语义化颜色
颜色应编码有意义的分组或状态，而不是为单序列比较添加彩虹色。
默认值与覆盖值并不相同
该来源区分了选定的半径、宽度和不透明度值与它们所覆盖的引擎行为。

04 示例任务

尝试聚焦的任务简述

以下示例任务简述尚未经过测试。使用前请检查该技能的设置。

检查设置

通过仓库支持的方式安装该技能，并根据需要将 @antv/g2 添加到目标应用程序。图表包和智能体技能是两个独立的依赖项。

上游源文件

https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g2-chart/SKILL.md

需要 @antv/g2 v5 或文档所述的浏览器包。可选的参考资料检索使用外部 AntV 上下文服务。

从一项交付物开始

运行该技能前，请调整此任务简述中的范围、来源材料和约束条件。

示例任务简述

使用 antv-g2-chart，根据提供的月度收入数据构建 G2 v5 图表。通过 view 及其 children 叠加线和点，保留所提供的货币单位，并使用包含显式容器和 render 调用的完整初始规范。避免多余的颜色图例，并在添加密集标签前进行检查。

检查结果

根据以下可观察的标准检查实际输出。

图表包含显式容器和 render 调用。
叠加标记作为视图的独立 children 进行组合。
标签、单位和颜色编码与所提供的数据含义一致。

OpenDesign 为编码智能体提供本地设计工作区。此条目不表示该技能已捆绑提供，也不表示其中包含其外部工具、凭据和软件依赖项。

下载 OpenDesign 阅读快速入门

05 来源与许可证

来源和许可证

本页描述的是下方链接所指向的固定来源修订版。上游行为和要求可能会发生变化。

来源所有者: antvis
仓库: antvis/chart-visualization-skills
技能文件: skills/antv-g2-chart/SKILL.md
许可证: MIT
已审查的快照: 2026-10-07 · a105fa12a9fa

编辑来源摘要

一份 G2 v5 实现指南，结合了声明式规范规则、定向参考资料检索、常见错误预防和基于数据的视觉选择。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数是带有时间属性的受欢迎程度信号，并不代表技能使用量或质量评分。

06 开始前的问题

开始前的问题

我可以通过两次更改根 type 来叠加标记吗？

来源说不可以：这样做会更新根标记，而不是创建相互独立的叠加内容。应使用包含 children 的 view。

它涵盖 G6 网络图吗？

不涵盖。来源明确将 G6、X6 和 S2 任务排除在此 G2 图表技能的范围之外。

建议的样式值都是 G2 引擎默认值吗？

并非全部如此。来源区分了其建议的显式覆盖值与引擎自身的默认值。

OpenDesign

为下一轮设计迭代留出空间。

将任务简述、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流之前，请检查其自身的设置。

下载 OpenDesign 浏览设计技能