相关包
打开搜索引擎,一搜 Vega,发现相关的包有好几个,Vega, Vega-Lite, Vega-Embed,React-Vega 等等,不免让人头晕。
别急,它们之间的关系三四句话就能说明白,以下是极简介绍:
- Vega:一套数据可视化的语法。它强大、灵活。用 JSON 描述配置,以 Canvas 或者 SVG 出图。
- Vega-Lite:一套描述 Vega 配置的语法。它简易、快速。同样使用 JSON,其结果可以编译为 Vega 版本的配置。
- Vega-Embed:一个可以让你在 web 项目中使用 Vega、 Vega-Lite 的工具。
- React-Vega: 顾名思义,可以让你在 React 项目中使用 Vega、 Vega-Lite 的工具。
Vega-Lite 是描述 Vega 语法的高阶语法(有点类似 React 高阶组件的概念),它短平快的风格可以让你迅速上手,但与 Vega 相比有一些功能上的限制。
在实际使用中,可以先通过 Vega-Lite 快速把想法实现为图表,再在其编译的 Vega 版配置结果上进一步修改,增加复杂功能。
项目案例
现在网上已经有一些用 Vega 实现柱状图(bar chart)的文章,本文将主要介绍如何在 React 项目中用 Vega-Lite 语法实现一个 area chart。
图表
基本图表
制作一个 area chart,表现国庆七天假期内的用户数量变化。
(可以粘贴到 Vega editor 中)
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"mark": {"type": "area", "color": "#0084FF", "interpolate": "monotone"},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"timeUnit": "yearmonthdate",
"axis": {"title": "Date"}
},
"y": {
"field": "active_users",
"type": "quantitative",
"axis": {"title": "Active Users"}
},
"opacity": {"value": 1}
},
"width": 400,
"height": 300,
"data": {
"values": [
{"active_users": 0, "date": "2019-10-01"},
{"active_users": 2, "date": "2019-10-02"},
{"active_users": 0, "date": "2019-10-03"},
{"active_users": 1, "date": "2019-10-04"},
{"active_users": 0, "date": "2019-10-05"},
{"active_users": 0, "date": "2019-10-06"},
{"active_users": 1, "date": "2019-10-07"}
]
},
"config": {}
}
Y 轴显示整数
看到这里,有人会问了,这什么产品这么惨,才这么点活跃用户数?
这里数据量写小是为了凸显 y 轴显示的问