antv-g2-chart

Name: antv-g2-chart
Author: antvis

433stars35forks

How to install antv-g2-chart?

antvis/chart-visualization-skills/antv-g2-chart

$npx -y skills add antvis/chart-visualization-skills --skill antv-g2-chart

Installs into the current project.

Summary

Generate G2 v5 chart code. Use when user asks for G2 charts, bar charts, line charts, pie charts, scatter plots, area charts, or any data visualization with G2 library.

Files · 1

View on GitHub

SKILL.md

1	# G2 v5 Chart Code Generator
2
3	You are an expert in AntV G2 v5 charting library. Generate accurate, runnable code following G2 v5 best practices.
4
5	---
6
7	## 1. Core Constraints / 核心约束 (MUST follow)
8
9	1. `container` is mandatory: `new Chart({ container: 'container', ... })`
10	2. Use Spec Mode ONLY: `chart.options({ type: 'interval', data, encode: {...} })`（V4 链式 API 见 Forbidden Patterns）
11	3. `chart.options()` 只能调用一次：多次调用会完整覆盖前一次配置，只有最后一次生效。多 mark 叠加必须用 `type: 'view'` + `children` 数组，而不是多次调用 `chart.options()`
12	4. `encode` object: `encode: { x, y }`（禁止 V4 的 `.position('x*y')`）
13	5. `transform` must be array: `transform: [{ type: 'stackY' }]`
14	6. `labels` is plural: Use `labels: [{ text: 'field' }]` not `label: {}`
15	7. `coordinate` 规则：
16	- 坐标系类型直接写：`coordinate: { type: 'theta' }`、`coordinate: { type: 'polar' }`
17	- transpose 是变换不是坐标系类型，必须写在 `transform` 数组里：`coordinate: { transform: [{ type: 'transpose' }] }`
18	- ❌ 禁止：`coordinate: { type: 'transpose' }`
19	8. 范围编码（甘特图、candlestick 等）：`encode: { y: 'start', y1: 'end' }`，禁止 `y: ['start', 'end']`
20	9. 样式原则：用户描述中提到的样式（radius、fillOpacity、color、fontSize 等）必须完整保留；用户未提及的装饰性样式（`shadowBlur`、`shadowColor`、`shadowOffsetX/Y` 等）不要自行添加
21	10. `animate` 规则：用户未明确要求动画时不要添加 `animate` 配置（G2 自带默认动画），只有用户明确描述动画需求时才添加
22	11. `scale.color.palette` 只能用合法值：palette 通过 d3-scale-chromatic 查找，非法名称会抛 `Unknown palette` 错误。不要推断或创造不存在的名称（如 `'blueOrange'`、`'redGreen'`、`'hot'`、`'jet'`、`'coolwarm'` 等均非法）。合法的常用值：顺序色阶 `'blues'\|'greens'\|'reds'\|'ylOrRd'\|'viridis'\|'plasma'\|'turbo'`；发散色阶 `'rdBu'\|'rdYlGn'\|'spectral'`；不确定时用 `range: ['#startColor', '#endColor']` 自定义替代
23	12. *禁止在用户代码中使用 `d3.`**：G2 内部使用 d3，但 `d3` 对象不会暴露到用户代码作用域，调用 `d3.sum()` 等会抛 `ReferenceError: d3 is not defined`。如需聚合，优先使用 G2 内置选项（如 `sortX` 的 `reducer: 'sum'`），不得不自定义时用原生 JS：`d3.sum(arr, d=>d.v)` → `arr.reduce((s,d)=>s+d.v,0)`；`d3.max(arr, d=>d.v)` → `Math.max(...arr.map(d=>d.v))`
24	13. 用户未指定配色时，禁止使用白色或近白色作为图形填充色：`style: { fill: '#fff' }`、`style: { fill: 'white' }`、`style: { fill: '#ffffff' }` 等在白色背景下会让图形完全不可见。未指定配色时应依赖 G2 的 `encode.color` 自动分配主题色，或使用有明确视觉区分度的颜色（如 `'#5B8FF9'`）。以下是合法例外：label 文字 `fill: '#fff'`（深色背景内标签）、分隔线 `stroke: '#fff'`（堆叠/pack/treemap 的分隔白线）
25	14. `padding` 只接受 `number \| 'auto'`，禁止数组形式：`padding: [40, 30, 40, 50]` 在 G2 v5 中无效（会被忽略或报错）。四边统一用 `padding: 40`；分方向控制用 `paddingTop` / `paddingRight` / `paddingBottom` / `paddingLeft` 单独设置；默认 `'auto'` 已自动为坐标轴/图例预留空间，大多数情况无需手动配置。禁止设置 `padding: 0`——会关闭自动计算，导致坐标轴/图例被截断；只需调整某一方向时单独设置对应方向即可
26	15. `autoFit: true` 时禁止同时设置 `width`：`autoFit` 会完全忽略 `width`，同时出现时 `width` 无效。`autoFit: true` 时只设 `height`；需要固定宽高时去掉 `autoFit` 改用 `width` + `height`
27	16. 用户未指定容器时： `container` 默认为 `'container'`，不要通过 `document.createElement('div')` 进行创建，代码末尾必须有 `chart.render();`
28	17. 禁止在数据中存放 hex 色值并通过 `encode.color` 映射：`encode.color` 映射到数据中包含 hex 字符串（如 `'#1e3a5f'`）的字段时，Ordinal scale 会将 hex 字符串当作「类别 key」而非颜色值处理——最终渲染颜色来自 G2 默认调色板而非数据中的 hex 值，且图例会显示无意义的 hex 字符串。正确做法：移除数据中的 color 字段，将 hex 色值放入 `scale.color.range`，`encode.color` 指向有业务含义的字段（如 `'group'`），通过 `scale.color.domain` + `range` 精确配对。例外情况：若必须直接使用数据中的动态颜色，需显式配置 `scale: { color: { type: 'identity' } }`。
29	18. Label 可见性与防重叠：柱状图 `position: 'inside'` 的 label 必须添加 `transform: [{ type: 'contrastReverse' }]`；数据密集图表（折线图多系列、散点图、分组柱状图）label 必须添加 `overlapDodgeY` 或 `overlapHide`；堆叠图/TreeMap/旭日图等空间有限 mark 的 label 必须添加 `overflowHide`；禁止使用 `dx` 偏移定位 label，应使用 `position` 控制位置。详见 [标签配置](references/components/g2-comp-label-config.md)
30	19. 深色背景文本对比度：容器背景为深色/黑色时必须使用 `theme: 'classicDark'`（或 `theme: { type: 'classicDark', view: { viewFill: '色值' } }`），G2 会自动将所有组件文本切换为浅色；浅色背景下禁止将文本设为浅灰色（如 `labelFill: '#ccc'`）；饼图 `scale.color.range` 中禁止包含与背景相同或近似的颜色。详见 [深色主题适配](references/concepts/g2-concept-dark-theme-adaptation.md)
31
32	### 1.1 Forbidden Patterns / 禁止使用的写法
33
34	禁止使用 V4 语法，必须使用 V5 Spec 模式：
35
36
37	```javascript
38	// ❌ 禁止：V4 createView
39	const view = chart.createView();
40	view.options({...});
41
42	// ❌ 禁止：V4 链式 API 调用
43	chart.interval()
44	.data([...])
45	.encode('x', 'genre')
46	.encode('y', 'sold')
47	.style({ radius: 4 });
48
49	// ❌ 禁止：V4 链式 encode
50	chart.line().encode('x', 'date').encode('y', 'value');
51
52	// ❌ 禁止：V4 source
53	chart.source(data);
54
55	// ❌ 禁止：V4 position
56	chart.interval().position('genre*sold');
57
58	// ✅ 正确：V5 Spec 模式
59	chart.options({
60	type: 'interval',
61	data: [...],
62	encode: { x: 'genre', y: 'sold' },
63	style: { radius: 4 },
64	});
65	```
66
67	原因：V5 使用 Spec 模式，结构清晰，易于序列化、动态生成和调试。
68
69	#### `createView` 的正确 V5 替代方案
70
71	`chart.createView()` 在 V4 中用于"多视图共享容器但数据各异"，V5 中对应两种场景：
72
73	场景 A：同一坐标系内叠加多个 mark（最常见）
74	→ 用 `type: 'view'` + `children` 数组，`children` 中不能再嵌套 `view` 或者 `children` ：
75
76	```javascript
77	// ✅ 多 mark 叠加（折线 + 散点）
78	chart.options({
79	type: 'view',
80	data,
81	children: [
82	{ type: 'line', encode: { x: 'date', y: 'value' } },
83	{ type: 'poin

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

antv-g2-chart

433stars35forks

View on GitHub

How to install antv-g2-chart?

antvis/chart-visualization-skills/antv-g2-chart

$npx -y skills add antvis/chart-visualization-skills --skill antv-g2-chart

Installs into the current project.

Summary

Generate G2 v5 chart code. Use when user asks for G2 charts, bar charts, line charts, pie charts, scatter plots, area charts, or any data visualization with G2 library.

Files · 1

View on GitHub

SKILL.md

1	# G2 v5 Chart Code Generator
2
3	You are an expert in AntV G2 v5 charting library. Generate accurate, runnable code following G2 v5 best practices.
4
5	---
6
7	## 1. Core Constraints / 核心约束 (MUST follow)
8
9	1. `container` is mandatory: `new Chart({ container: 'container', ... })`
10	2. Use Spec Mode ONLY: `chart.options({ type: 'interval', data, encode: {...} })`（V4 链式 API 见 Forbidden Patterns）
11	3. `chart.options()` 只能调用一次：多次调用会完整覆盖前一次配置，只有最后一次生效。多 mark 叠加必须用 `type: 'view'` + `children` 数组，而不是多次调用 `chart.options()`
12	4. `encode` object: `encode: { x, y }`（禁止 V4 的 `.position('x*y')`）
13	5. `transform` must be array: `transform: [{ type: 'stackY' }]`
14	6. `labels` is plural: Use `labels: [{ text: 'field' }]` not `label: {}`
15	7. `coordinate` 规则：
16	- 坐标系类型直接写：`coordinate: { type: 'theta' }`、`coordinate: { type: 'polar' }`
17	- transpose 是变换不是坐标系类型，必须写在 `transform` 数组里：`coordinate: { transform: [{ type: 'transpose' }] }`
18	- ❌ 禁止：`coordinate: { type: 'transpose' }`
19	8. 范围编码（甘特图、candlestick 等）：`encode: { y: 'start', y1: 'end' }`，禁止 `y: ['start', 'end']`
20	9. 样式原则：用户描述中提到的样式（radius、fillOpacity、color、fontSize 等）必须完整保留；用户未提及的装饰性样式（`shadowBlur`、`shadowColor`、`shadowOffsetX/Y` 等）不要自行添加
21	10. `animate` 规则：用户未明确要求动画时不要添加 `animate` 配置（G2 自带默认动画），只有用户明确描述动画需求时才添加
22	11. `scale.color.palette` 只能用合法值：palette 通过 d3-scale-chromatic 查找，非法名称会抛 `Unknown palette` 错误。不要推断或创造不存在的名称（如 `'blueOrange'`、`'redGreen'`、`'hot'`、`'jet'`、`'coolwarm'` 等均非法）。合法的常用值：顺序色阶 `'blues'\|'greens'\|'reds'\|'ylOrRd'\|'viridis'\|'plasma'\|'turbo'`；发散色阶 `'rdBu'\|'rdYlGn'\|'spectral'`；不确定时用 `range: ['#startColor', '#endColor']` 自定义替代
23	12. *禁止在用户代码中使用 `d3.`**：G2 内部使用 d3，但 `d3` 对象不会暴露到用户代码作用域，调用 `d3.sum()` 等会抛 `ReferenceError: d3 is not defined`。如需聚合，优先使用 G2 内置选项（如 `sortX` 的 `reducer: 'sum'`），不得不自定义时用原生 JS：`d3.sum(arr, d=>d.v)` → `arr.reduce((s,d)=>s+d.v,0)`；`d3.max(arr, d=>d.v)` → `Math.max(...arr.map(d=>d.v))`
24	13. 用户未指定配色时，禁止使用白色或近白色作为图形填充色：`style: { fill: '#fff' }`、`style: { fill: 'white' }`、`style: { fill: '#ffffff' }` 等在白色背景下会让图形完全不可见。未指定配色时应依赖 G2 的 `encode.color` 自动分配主题色，或使用有明确视觉区分度的颜色（如 `'#5B8FF9'`）。以下是合法例外：label 文字 `fill: '#fff'`（深色背景内标签）、分隔线 `stroke: '#fff'`（堆叠/pack/treemap 的分隔白线）
25	14. `padding` 只接受 `number \| 'auto'`，禁止数组形式：`padding: [40, 30, 40, 50]` 在 G2 v5 中无效（会被忽略或报错）。四边统一用 `padding: 40`；分方向控制用 `paddingTop` / `paddingRight` / `paddingBottom` / `paddingLeft` 单独设置；默认 `'auto'` 已自动为坐标轴/图例预留空间，大多数情况无需手动配置。禁止设置 `padding: 0`——会关闭自动计算，导致坐标轴/图例被截断；只需调整某一方向时单独设置对应方向即可
26	15. `autoFit: true` 时禁止同时设置 `width`：`autoFit` 会完全忽略 `width`，同时出现时 `width` 无效。`autoFit: true` 时只设 `height`；需要固定宽高时去掉 `autoFit` 改用 `width` + `height`
27	16. 用户未指定容器时： `container` 默认为 `'container'`，不要通过 `document.createElement('div')` 进行创建，代码末尾必须有 `chart.render();`
28	17. 禁止在数据中存放 hex 色值并通过 `encode.color` 映射：`encode.color` 映射到数据中包含 hex 字符串（如 `'#1e3a5f'`）的字段时，Ordinal scale 会将 hex 字符串当作「类别 key」而非颜色值处理——最终渲染颜色来自 G2 默认调色板而非数据中的 hex 值，且图例会显示无意义的 hex 字符串。正确做法：移除数据中的 color 字段，将 hex 色值放入 `scale.color.range`，`encode.color` 指向有业务含义的字段（如 `'group'`），通过 `scale.color.domain` + `range` 精确配对。例外情况：若必须直接使用数据中的动态颜色，需显式配置 `scale: { color: { type: 'identity' } }`。
29	18. Label 可见性与防重叠：柱状图 `position: 'inside'` 的 label 必须添加 `transform: [{ type: 'contrastReverse' }]`；数据密集图表（折线图多系列、散点图、分组柱状图）label 必须添加 `overlapDodgeY` 或 `overlapHide`；堆叠图/TreeMap/旭日图等空间有限 mark 的 label 必须添加 `overflowHide`；禁止使用 `dx` 偏移定位 label，应使用 `position` 控制位置。详见 [标签配置](references/components/g2-comp-label-config.md)
30	19. 深色背景文本对比度：容器背景为深色/黑色时必须使用 `theme: 'classicDark'`（或 `theme: { type: 'classicDark', view: { viewFill: '色值' } }`），G2 会自动将所有组件文本切换为浅色；浅色背景下禁止将文本设为浅灰色（如 `labelFill: '#ccc'`）；饼图 `scale.color.range` 中禁止包含与背景相同或近似的颜色。详见 [深色主题适配](references/concepts/g2-concept-dark-theme-adaptation.md)
31
32	### 1.1 Forbidden Patterns / 禁止使用的写法
33
34	禁止使用 V4 语法，必须使用 V5 Spec 模式：
35
36
37	```javascript
38	// ❌ 禁止：V4 createView
39	const view = chart.createView();
40	view.options({...});
41
42	// ❌ 禁止：V4 链式 API 调用
43	chart.interval()
44	.data([...])
45	.encode('x', 'genre')
46	.encode('y', 'sold')
47	.style({ radius: 4 });
48
49	// ❌ 禁止：V4 链式 encode
50	chart.line().encode('x', 'date').encode('y', 'value');
51
52	// ❌ 禁止：V4 source
53	chart.source(data);
54
55	// ❌ 禁止：V4 position
56	chart.interval().position('genre*sold');
57
58	// ✅ 正确：V5 Spec 模式
59	chart.options({
60	type: 'interval',
61	data: [...],
62	encode: { x: 'genre', y: 'sold' },
63	style: { radius: 4 },
64	});
65	```
66
67	原因：V5 使用 Spec 模式，结构清晰，易于序列化、动态生成和调试。
68
69	#### `createView` 的正确 V5 替代方案
70
71	`chart.createView()` 在 V4 中用于"多视图共享容器但数据各异"，V5 中对应两种场景：
72
73	场景 A：同一坐标系内叠加多个 mark（最常见）
74	→ 用 `type: 'view'` + `children` 数组，`children` 中不能再嵌套 `view` 或者 `children` ：
75
76	```javascript
77	// ✅ 多 mark 叠加（折线 + 散点）
78	chart.options({
79	type: 'view',
80	data,
81	children: [
82	{ type: 'line', encode: { x: 'date', y: 'value' } },
83	{ type: 'poin

People who liked this also viewed

6 picks

Type