vega.github.io 暂未发现付费内容

Vega 是一个声明式数据可视化语法的官方网站（vega.github.io），核心用途是让你用 JSON 描述图表的外观和交互行为，再渲染成基于 HTML5 Canvas 或 SVG 的网页视图。它适合需要精细控制可视化细节、或希望把图表配置以纯数据形式保存和分享的开发者；如果你只想用最少的代码快速出图，同一生态里的 Vega-Lite 或 Vega-Altair 会更省事。

Vega 的核心机制

Vega 把可视化拆成一份 JSON 规格（specification），其中描述数据、图形标记（marks）、坐标尺度、视觉编码和交互。浏览器读取这份 JSON 后生成视图，渲染目标可以是 Canvas 或 SVG。

这种"声明式"意味着你描述要什么，而不是一步步写绘制指令。好处是规格本身可保存、可分享、可程序化生成；代价是复杂图表需要理解 Vega 的语法结构。

生态里有哪些工具

Vega 项目由多个层次组成，抽象程度从低到高：

此外还有几个组件：Vega-Datasets 提供示例数据集，Vega Themes 提供颜色、字体、线宽、间距等默认配置，Vega-Tooltips 用自定义 HTML 提示框替代浏览器默认 title 属性，VlConvert 提供在 Rust、命令行和 Python 中转换 Vega-Lite 规格的能力。

网站上能找到什么

网站汇集了各工具的文档、教程、示例和在线编辑器入口，主要入口包括：

• Examples：可直接查看和运行的示例规格
• Docs：语法与 API 文档
• Tutorials：入门教程
• Online Editor：在浏览器里编写、测试可视化
• GitHub：各项目的源码仓库

Vega 是 NumFOCUS 赞助的项目。

什么时候选 Vega，什么时候选别的

• 需要底层控制、自定义交互，或要把图表规格当作数据来生成和分享：用 Vega。
• 目标是快速出图做分析，接受更高层抽象：用 Vega-Lite。
• 在 Python 环境里工作：用 Vega-Altair，需要性能加速时叠加 VegaFusion。
• 只是要把已有图表放进网页：用 Vega-Embed。

一个实用的判断方法是：先用 Vega-Lite 或 Altair 试，如果发现语法表达不了你要的交互或细节，再下沉到 Vega。

Vega 项目生态是一组围绕“声明式数据可视化”构建的工具，按抽象层次从低到高分为四类：工具包（Vega、Vega-Lite、Vega-Altair、VegaFusion）、系统（Vega-Embed、Vega-Editor）、组件（Vega-Datasets、Vega Themes、Vega-Tooltips）以及转换工具 VlConvert。如果你需要直接描述图形细节，从 Vega 入手；如果只想快速出图，从 Vega-Lite 或 Vega-Altair 入手；如果要把图放进网页，用 Vega-Embed。

工具包：从底层语法到高层 API

Vega 与 Vega-Lite 的关系是“编译”：Vega-Lite 规格可以编译成 Vega 规格，因此两者不是互斥选择，而是同一技术栈的不同抽象层。Vega-Altair 则把 Vega-Lite 的能力包装成 Python API，让你少写代码、多探索数据。

系统：嵌入与在线编辑

• Vega-Embed：把交互式 Vega 和 Vega-Lite 视图嵌入网页，可作为嵌入式 Web 组件发布，并支持交互参数。
• Vega-Editor：Web 应用，用于编写和测试 Vega 与 Vega-Lite 可视化，内置大量示例规格，覆盖视觉编码和交互技术。

这两个工具解决的是“写完之后怎么用”：Vega-Editor 负责开发调试，Vega-Embed 负责上线嵌入。

组件：数据集、主题与提示

• Vega-Datasets：Vega 和 Vega-Lite 示例中使用的数据集集合。
• Vega Themes：一个配置对象，提供颜色、字体、线宽、间距等视觉属性的默认设置。
• Vega-Tooltips：Vega 和 Vega-Lite 的提示插件，用自定义 HTML tooltip 替代 HTML title 属性来实现 tooltip 处理。

主题和提示属于“不改数据、只改呈现”的配置层，适合在多个图表间统一风格。

VlConvert：规格转换

VlConvert 提供 Rust 库、CLI 工具和 Python 库，用于转换 Vega-Lite 图表规格。当你的流水线需要在不同格式或语言环境之间搬运 Vega-Lite 规格时，它是专门的转换入口。

怎么选

• 只想画图、不想碰底层细节：Vega-Lite（JSON）或 Vega-Altair（Python）。
• 需要精细控制图形与交互：Vega。
• 数据量大、渲染慢：考虑 VegaFusion。
• 要嵌入网页：Vega-Embed。
• 要在线试写：Vega-Editor。
• 要统一视觉风格：Vega Themes。
• 要自定义 tooltip：Vega-Tooltips。

Vega 是 NumFOCUS 赞助项目，上述各组件的示例、文档、教程和在线编辑器入口均可在其官网对应页面找到。

三者是同一生态里不同抽象层级的选择：Vega 是底层可视化语法，用 JSON 直接描述视觉编码与交互；Vega-Lite 是更高层的简洁 JSON 语法，适合快速生成分析用图表，并可编译为 Vega；Vega-Altair 是构建在 Vega-Lite 之上的 Python 声明式库，提供更友好的 API。如果你用 Python 做数据分析，通常从 Vega-Altair 入手；如果需要在网页里精细控制图形与交互，直接用 Vega；如果介于两者之间、想用 JSON 快速出图，选 Vega-Lite。

三者的定位与关系

Vega 项目提供了一套声明式数据可视化工具生态，各组件层层构建、提供不同抽象层级。核心关系可以这样理解：

关键机制是编译：Vega-Lite 的规格可以编译成 Vega。也就是说，高层语法最终会落到 Vega 这一层来渲染。Vega-Altair 则再往上包一层 Python API，让 Python 用户不必直接写 JSON。

如何选择

选择的核心维度是你用什么语言工作，以及需要多细的控制粒度。

• 用 Python、想快速探索数据：选 Vega-Altair。它的 API 简单一致，构建在 Vega-Lite 之上，适合把时间花在分析而不是写代码上。
• 想用 JSON 快速出图、又需要一定表达力：选 Vega-Lite。语法简洁，支持交互式多视图，还能编译到 Vega。
• 需要精细控制视觉编码和交互行为：直接用 Vega。它是最底层的语法，用 JSON 描述外观与交互，通过 Canvas 或 SVG 渲染。
• Python 场景下需要服务端加速：可以了解 VegaFusion，它为 Vega 语法提供服务器端加速，最初的应用就是加速 Vega-Altair 这个 Python 接口到 Vega-Lite 的链路。

生态里的其他组件

除了三个语法/库，Vega 生态还有一些配套工具，按用途分：

系统类

• Vega-Embed：把交互式 Vega 和 Vega-Lite 视图嵌入网页，可作为带交互参数的嵌入式 Web 组件发布。
• Vega-Editor：用于编写和测试 Vega、Vega-Lite 可视化的 Web 应用，内置示例规格，展示视觉编码和交互技术。

组件类

• Vega-Datasets：Vega 和 Vega-Lite 示例中使用的数据集集合。
• Vega Themes：包含颜色、字体、线宽、间距等视觉属性默认设置的配置对象。
• Vega-Tooltips：Vega 和 Vega-Lite 的提示框插件，用自定义 HTML 提示框替代 HTML title 属性。
• VlConvert：提供 Rust 库、CLI 工具和 Python 库，用于转换 Vega-Lite 图表规格。

一句话决策

Python 分析选 Vega-Altair；JSON 快速出图选 Vega-Lite；要底层精细控制选 Vega。三者不是替代关系，而是同一生态中从高到低的抽象层级，Vega-Lite 可编译为 Vega，Vega-Altair 又构建在 Vega-Lite 之上。

Vega 是一套声明式可视化语法：你用 JSON 描述数据、标记、编码和交互行为，由 Vega 渲染成基于 HTML5 Canvas 或 SVG 的网页视图。它适合需要精细控制图形与交互、又希望配置可保存和分享的场景。上手路径可以概括为三步：在 Vega-Editor 里写并调试规格，参考官方示例与文档补齐语法，最后用 Vega-Embed 把视图嵌入网页。

先理解 Vega 的定位

Vega 是 NumFOCUS 赞助的项目，核心是一个可视化语法（visualization grammar）。一份 Vega 规格就是一段 JSON，它同时描述“画什么”和“怎么交互”，输出为网页视图。围绕它还有一组分工不同的工具：

如果你只是想快速出图，可以从 Vega-Lite 或 Vega-Altair 入手；需要更细粒度的图形和交互控制时，再直接写 Vega 规格。

用 Vega-Editor 编写和测试规格

Vega-Editor 是一个 Web 应用，用于编写和测试 Vega 与 Vega-Lite 可视化，内置了一批示例规格，覆盖视觉编码和交互技术。典型流程是：

1. 打开在线编辑器，从示例规格中挑一个接近你需求的作为起点。
2. 修改 JSON 中的 data，把数据源换成你自己的数据。
3. 调整 marks 和编码字段，改变图形类型与视觉映射。
4. 在交互配置中定义参数和事件，观察视图的实时变化。
5. 反复迭代，直到规格符合预期。

编辑器会即时渲染结果，因此每次修改都能立刻看到效果，这是验证语法和交互行为最快的方式。官方还提供 Examples、Docs 和 Tutorials 三类资源，遇到不熟悉的语法时优先查文档和教程。

用 Vega-Embed 嵌入网页

Vega-Embed 让嵌入交互式 Vega 和 Vega-Lite 视图变得简单，并支持带交互参数的嵌入。基本思路是：在页面中引入 Vega-Embed，指定要渲染的容器和规格，由它完成渲染。

需要准备的输入包括：一份合法的 Vega 或 Vega-Lite 规格（JSON），以及页面上的目标容器元素。动作是调用 Vega-Embed 的嵌入接口并传入规格。预期结果是容器内出现可交互的可视化视图，交互参数按规格定义生效。Vega-Embed 通过 jsDelivr 分发，也可以从 GitHub 获取源码和文档。

常见卡点

• 规格不渲染：先确认 JSON 本身合法，再检查规格是否符合 Vega 或 Vega-Lite 的语法要求；在 Vega-Editor 中粘贴同一份规格可以快速定位问题。
• 交互不生效：交互行为需要在规格中显式描述，Vega-Embed 只负责按规格渲染，不会自动补充交互。
• 提示框样式受限：默认提示使用 HTML title 属性，若需要自定义 HTML 提示框，可引入 Vega-Tooltips 插件。
• 主题不统一：颜色、字体、线宽、间距等可通过 Vega Themes 配置对象统一设置，避免逐处修改。
• 数据准备繁琐：Vega-Datasets 提供了示例中使用的数据集集合，可作为练习和对照的素材。

接下来做什么

先用 Vega-Editor 复现一个官方示例，再把它改成自己的数据；确认渲染和交互都正常后，用 Vega-Embed 嵌入到一个简单网页中验证端到端流程。需要更高层抽象时，再考虑 Vega-Lite 或 Vega-Altair，它们最终都可以落到 Vega 这一层来理解和调试。

Vega 适合“用 JSON 描述可视化设计、并输出为网页交互视图”的场景。如果你的可视化需要可复用、可分享、可版本管理的声明式定义，并且最终要跑在浏览器里（HTML5 Canvas 或 SVG），Vega 是直接匹配的技术栈；如果你只想在 Python 里快速画分析图，通常从 Vega-Altair 入手更省力。

Vega 的核心机制：声明式 JSON + 网页渲染

Vega 是一种可视化语法（visualization grammar），也是一门声明式语言。你不需要写绘制图形的命令式代码，而是用 JSON 描述“视觉外观和交互行为”，再由渲染器生成网页视图。

• 输入：一份 JSON 规格（specification），描述数据、标记、编码和交互。
• 动作：Vega 解析这份规格，按声明生成视图。
• 输出：基于 HTML5 Canvas 或 SVG 的交互式网页视图。

因为规格是纯 JSON，它天然适合保存、分享和纳入版本控制，也方便在不同项目间复用同一套可视化设计。

适合的使用场景

需要可复用、可分享的可视化设计

当可视化定义本身需要被保存、传递、审阅或复用，而不是只存在于某段绘图脚本里时，声明式 JSON 的优势最明显。同一份规格可以在不同页面、不同项目中重复使用。

需要交互行为和多视图图形

Vega 支持描述交互行为，也支持交互式多视图图形。这类需求常见于分析仪表盘、数据探索界面，以及需要联动多个视图的展示场景。

需要嵌入网页

如果可视化最终要作为网页的一部分发布，Vega 的输出形态（Canvas 或 SVG）与网页技术栈天然契合，配合 Vega-Embed 可以把交互式视图嵌入页面，并以交互参数的形式发布。

需要与 Python 数据探索结合

在 Python 生态中做数据分析时，可以用 Vega-Altair 以更简洁的 API 生成可视化，它构建在 Vega-Lite 语法之上，适合把时间花在探索数据而不是写绘图代码上。

按抽象层次选择工具

Vega 项目生态是分层构建的，不同组件提供不同的抽象级别。选哪一层，取决于你想要的控制力和编写成本。

选择逻辑可以概括为：要最大控制力选 Vega；要快速产出选 Vega-Lite；要在 Python 里写选 Vega-Altair。 由于 Vega-Lite 规格可以编译为 Vega，从高层入手并不会把你锁死在高层。

配套系统与组件

围绕核心语法，生态里还有一批可直接使用的系统与组件：

• Vega-Embed：把交互式 Vega 和 Vega-Lite 视图嵌入网页，支持以交互参数形式发布。
• Vega-Editor：用于编写和测试 Vega、Vega-Lite 可视化的 Web 应用，内置示例规格，展示视觉编码和交互技巧。
• VegaFusion：为 Vega 语法提供服务器端加速，最初的应用方向是加速 Vega-Altair 这一 Python 接口。
• Vega-Datasets：Vega 和 Vega-Lite 示例中使用的数据集集合。
• Vega Themes：一组默认视觉属性配置，涵盖颜色、字体、线宽、间距等。
• Vega-Tooltips：为 Vega 和 Vega-Lite 提供工具提示插件，用自定义 HTML 提示替代 HTML title 属性。
• VlConvert：提供 Rust 库、CLI 工具和 Python 库，用于转换 Vega-Lite 图表规格。

怎么判断是否适合你

可以用下面几个问题快速判断：

• 可视化是否需要以可保存、可分享的形式存在？是 → 适合。
• 是否最终要渲染在网页上，用 Canvas 或 SVG？是 → 适合。
• 是否需要交互行为或多视图联动？是 → 适合。
• 是否主要在 Python 中做分析、希望少写代码？是 → 从 Vega-Altair 入手。
• 是否只需要一张静态图、且不关心规格复用？那声明式的收益有限，用更轻的方式即可。

Vega 是 NumFOCUS 赞助的项目。想进一步了解，可以从官网提供的 Examples、Docs、Tutorials、Online Editor 和 GitHub 入口开始。