Back to Details

vega

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vega / Vega-Lite Visualizer

Vega / Vega-Lite 可视化工具

Quick Start: Structure data as array of objects → Choose mark type (bar/line/point/area/arc/rect) → Map encodings (x, y, color, size) to fields → Set data types (quantitative/nominal/ordinal/temporal) → Wrap in 
```vega-lite
or 
```vega
fence. Always include 
$schema
, use valid JSON with double quotes, field names are case-sensitive. Use Vega-Lite for 90% of charts; Vega only for radar, word cloud, force-directed.
快速入门： 将数据整理为对象数组 → 选择标记类型（柱状/折线/点/面积/圆弧/矩形）→ 将编码（x、y、颜色、尺寸）映射到字段 → 设置数据类型（quantitative/nominal/ordinal/temporal）→ 用
```vega-lite
或
```vega
代码块包裹。务必包含
$schema
，使用双引号的有效JSON，字段名称区分大小写。90%的图表使用Vega-Lite即可；仅雷达图、词云图、力导向图需使用Vega。

Critical Syntax Rules

关键语法规则

Rule 1: Always Include Schema

规则1：务必包含Schema

json
"$schema": "https://vega.github.io/schema/vega-lite/v5.json"
json
"$schema": "https://vega.github.io/schema/vega-lite/v5.json"

Rule 2: Valid JSON Only

规则2：仅使用有效JSON

❌ {field: "x",}     → Trailing comma, unquoted key
✅ {"field": "x"}    → Proper JSON
❌ {field: "x",}     → 多余逗号，未加引号的键
✅ {"field": "x"}    → 正确的JSON格式

Rule 3: Field Names Must Match Data

规则3：字段名称必须与数据匹配

❌ "field": "Category"  when data has "category"
✅ "field": "category"  → Case-sensitive match
❌ "field": "Category"  而数据中是"category"
✅ "field": "category"  → 区分大小写的精确匹配

Rule 4: Type Must Be Valid

规则4：类型必须有效

✅ quantitative | nominal | ordinal | temporal
❌ numeric | string | date
✅ quantitative | nominal | ordinal | temporal
❌ numeric | string | date

Common Pitfalls

常见问题

IssueSolution
Chart not renderingCheck JSON validity, verify 
$schema
Data not showingField names must match exactly
Wrong chart typeMatch mark to data structure
Colors not visibleCheck color scale contrast
Dual-axis issuesAdd 
resolve: {scale: {y: "independent"}}
问题解决方案
图表无法渲染检查JSON有效性，验证
$schema
是否正确
数据未显示字段名称必须完全匹配
图表类型错误标记类型需与数据结构匹配
颜色不可见检查颜色刻度的对比度
双轴问题添加
resolve: {scale: {y: "independent"}}

Output Format

输出格式

markdown
```vega-lite
{...}
```
Or for full Vega:
markdown
```vega
{...}
```
markdown
```vega-lite
{...}
```
或者使用完整版Vega：
markdown
```vega
{...}
```

Related Files

相关文件

For advanced chart patterns and complex visualizations, refer to references below:
  • examples.md — Stacked bar, grouped bar, multi-series line, area, heatmap, radar (Vega), word cloud (Vega), and interactive chart examples
如需进阶图表模式和复杂可视化效果，请参考以下资料：
  • examples.md — 包含堆叠柱状图、分组柱状图、多序列折线图、面积图、热力图、雷达图（Vega）、词云图（Vega）以及交互式图表示例