如果你正在处理一大堆数据，想要用图表来更好地展示它们，那么 Vega 可能是一个不错的选择。它是一种可视化语法，可以很容易地构建定制化的、交互式的图表。
而 vega-canvas 则是 Vega 语法在浏览器端使用的一种方式，它将 Vega 代码转换成 Canvas API 调用，将可视化结果渲染到 Canvas 上。
本文将介绍如何使用 npm 包 vega-canvas 来构建基于 Vega 的图表，通过一个简单的柱状图的例子，展示如何使用 Vega 语法来描述数据可视化，并使用 vega-canvas 将其渲染到画布上。
安装
首先，需要将 vega-canvas 安装为 npm 包：
npm install vega vega-canvas
同时，需要在 HTML 文件中引入 Vega-core 库：
<script src="https://cdn.jsdelivr.net/npm/vega@5.21.0/build/vega.min.js"></script>
这是 Vega 库的一个相对稳定的版本。如果你已经将 Vega 库下载到本地，可以使用本地路径替代 CDN 链接。
使用 Vega 语法
Vega 语法的核心是数据描述（Data Description）和可视化描述（Visual Description）：
- 数据描述：数据是可视化的基础，Vega 语法中将数据描述成源（Source）、转换（Transformation）和终端（Terminal）三部分。源指原始数据，转换指对数据进行处理的方式，终端指最终展示出来的数据。
- 可视化描述：可视化描述通常放在数据描述后面，即用描述数据的方式构建可视化模型。常用的操作包括选择数据、定义坐标轴和图例、生成几何元素等。
在本例中，我们将使用一个简单的数据集，展示某个公司的销售情况：
-- -------------------- ---- ------- - --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ----- --------- ------ -------- ------ --------- ------ -------- ------ --------- ------ -------- ----- -
数据描述和可视化描述可以通过 JSON 文件来构建。以下是一个简单的柱状图的描述：
-- -------------------- ---- -------
-
---------- ---------------------------------------------
-------------- -- ------ --- -------
------- -------- ---------
------- ------
----------- -
---- --------- -------- ------- -----------
---- --------- -------- ------- ---------------
-
-- 数据描述中，我们使用 API
vega.loader()加载 JSON 文件，定义数据源的名称为"table"。 - 可视化描述中，我们使用
"bar"表示柱状图，定义 x 轴使用"month"字段，y 轴使用"sales"字段。
渲染到 Canvas
有了 Vega 语法的 JSON 文件，就可以使用 vega-canvas 将其渲染到 Canvas 上：
-- -------------------- ---- ------- ------ - ------------ - ---- --------- ------ ---- ---- ------- ------ - ------------ - ---- -------------- -- -- ---- ----- ----- ---- - ------ ----- ----- - ---- ----- ------ - ---- -- -- ------ ----- ----- ------ - ------------------- -------- ----- ------- - ------------------------ ----- ------- - ----------------- --------------------- ---------------- -- - -- - ------ ------ ---------------------------------- ---
以上代码的核心是 renderModule() 方法，该方法将 JSON 文件渲染到 Canvas 上，并返回一个 Promise。在 Promise 完成后，我们将 Canvas 对象插入到页面中。
完整代码
以下是完整的 HTML 和 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------ ------------
-------
------
------- ---------------------
------- --------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
--------
----- ---- - -
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- -----
--------- ------ -------- ------
--------- ------ -------- ------
--------- ------ -------- -----
--
----- ---- - -
---------- ---------------------------------------------
-------------- -- ------ --- -------
------- -------- -------- --------- ------
------- ------
----------- -
---- --------- -------- ------- -----------
---- --------- -------- ------- ---------------
-
--
----- ----- - ----
----- ------ - ----
----- ------ - ----------------------------------
------------ - ------
------------- - -------
----- ------- - ------------------------
----- ------- - -----------------
--------------------- ---------------- -- -
------------------- ------------
---
---------
-------
-------总结
本文介绍了 Vega 语法、npm 包 vega-canvas 的使用，以及如何将某个公司的销售情况渲染为柱状图。通过学习本文，读者可以了解到使用 Vega 和 vega-canvas 构建可视化数据的基本过程和方法，进一步加深对于前端数据可视化的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeece5e7a6cc516fbab6e2c