Vega-Lite 是一个基于 Vega 的高级图表语法,用于生成交互式的数据可视化。本文将介绍如何使用 npm 包安装和使用 Vega-Lite,并提供实际示例代码。
安装 Vega-Lite
使用 npm 安装 Vega-Lite 很容易。在终端或命令行中运行以下命令:
--- ------- ---------
这将安装最新版本的 Vega-Lite。
使用 Vega-Lite
要使用 Vega-Lite,我们需要导入它并调用 vegaEmbed()
方法。下面是一个简单的例子,演示如何使用 Vega-Lite 绘制一张柱状图:
------ ----------- ---- ------------ ----- ---- - - ---------- -------------------------------------------------- ------- - ------ ------------------------------------------------------------------------------ -- ------- ------ ----------- - ---- --------- -------- ------- ---------------- ---- --------- ---------- ------- ---------- - -- ----------------- ------
此代码将在指定的元素 #vis
中呈现柱状图。 spec
对象描述了图表的特征,包括数据源、标记类型以及编码方式。更多关于 Vega-Lite 规范的信息,请参阅官方文档。
Vega-Lite 示例
下面是一些更复杂的示例,演示了 Vega-Lite 的更多功能。这些示例可以在 Vega-Lite Example Gallery 中找到,也可以通过 npm 包下载并运行。
美国州长政治党派分布
以下代码使用 Vega-Lite 绘制美国各州州长的政治党派分布图:
------ ----------- ---- ------------ ----- ---- - - ---------- -------------------------------------------------- ------- - ------ -------------------------------------------------------------------------------- -- ------- ------ ----------- - ---- --------- -------- ------- ----------- ---- ------------- -------- ------- --------------- - -- ----------------- ------
分组条形图
以下代码演示了如何使用 Vega-Lite 绘制分组条形图:
------ ----------- ---- ------------ ----- ---- - - ---------- -------------------------------------------------- ------- - ------ ---------------------------------------------------------------------------------- -- ------- ------ ----------- - ---- --------- ------ ------- ----------- ---- --------- --------- ------- ---------------- -------- --------- ------- ------- ---------- - -- ----------------- ------
散点图
以下代码使用 Vega-Lite 绘制散点图:
------ ----------- ---- ------------ ----- ---- - - ---------- -------------------------------------------------- -------------- -- ----------- ------- ---------- --- ----- --- ------- --- ------- ------- ------- - ------ ------------------------------------------------- -- ------- -------- ----------- - ---- --------- ------------- ------- ---------------- ---- --------- ------------------- ------- ---------------- -------- --------- --------- ------- ----------- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------