简介
vega-loader 是一个 JavaScript 库，用于将 Vega 和 Vega-Lite 规范的 JSON 数据加载到浏览器中。该库配合 Vega 和 Vega-Lite 库使用，可以用于生成交互式和可视化图表。
安装
npm 安装
npm install vega vega-lite vega-loader --save
CDN 引入
// 引入 Vega 和 Vega-Lite 库 <script src="https://cdn.jsdelivr.net/npm/vega@5"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script> // 引入 Vega-Loader 库 <script src="https://cdn.jsdelivr.net/npm/vega-loader@4"></script>
使用示例
1. 使用 Vega-Lite 数据加载
-- -------------------- ---- -------
-- -- --------- -- ----------- -
------ -------- ---- ------------
------ ------ ---- --------------
-- -- --------- ---- --
----- ---- - -
---------- --------------------------------------------------
------- ------- ------------------
------- --------
----------- -
---- --------- ------------- ------- ----------------
---- --------- ------------------- ------- ---------------
-
--
-- -- ----------- ----
----------------------------- -- -
-- - --------- ----- ---- --
---------------- - -----
-- -- --------- ----
---------------------------------- -- -
---------------- ---------------
---
---2. 使用 Vega 数据加载
-- -------------------- ---- -------
-- -- ---- - ----------- -
------ ---- ---- -------
------ ------ ---- --------------
-- -- ---- ---- --
----- ---- - -
---------- ---------------------------------------------
-------- ----
--------- ----
---------- -------- -- -------- -- ------ -- --------- ---
------- -
-
------- --------
------ -------------------
------------ -
-
------- ---------
------- ----------------- ------- -- ---- -- ----------------- -------- -- -----
-
-
-
--
--------- -
-
------- ----
------- ---------
-------- --------
------- ------
--------- -------- -------- -------- ----------- --------
--
-
------- ----
------- ---------
-------- ---------
------- ------
------- -----
--------- -------- -------- -------- ---------- -------
-
--
------- -
---------- --------- -------- ---- -------- ----------- ---------
---------- ------- -------- ---- -------- ---------- -------
--
-------- -
-
------- ---------
------- -------- ---------
--------- -
-------- -
---- --------- ---- -------- ----------- ---------
---- --------- ---- -------- ---------- --------
------- --------- ---
-------------- --------- -----
-
-
-
-
--
-- -- ----------- ----
-------------------------------- -- -
-- - ---- ----- ---- --
------------------- - -----
-- -- ---- ----
--------------------------- -- -
---------- ---------------
---
---总结
通过使用 vega-loader 库，我们可以方便地加载 Vega 和 Vega-Lite 规范的 JSON 数据，并通过 Vega 和 Vega-Lite 库生成交互式和可视化图表。这一系列流程为前端开发人员提供了更加便捷的数据可视化方案，也提升了 web 应用的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf58b5cbfe1ea0610fea