上一篇讲了如何在 React 项目中用 Vega-Lite 绘制基本的 area chart 图表。
本篇将介绍如何绘制多层图表,如何添加图例。
多层图表
通过上一篇文章,我们知道了可以通过 mark
, encoding
等来描述我们想要的图表。要实现多层图表,只需要把多个包含上述属性的图表对象放进 layer
数组中就可以。就像栈一样, 从栈顶压入,后压入的(index 大的)图层在上层。
我们在之前的数据中加入用户评论数量 “user_comments”:
"data": {
"values": [
{ "user_comments": 0, "active_users": 0, "date": "2019-10-01" },
{ "user_comments": 3, "active_users": 2, "date": "2019-10-02" },
{ "user_comments": 1, "active_users": 0, "date": "2019-10-03" },
{ "user_comments": 1, "active_users": 1, "date": "2019-10-04" },
{ "user_comments": 2, "active_users": 0, "date": "2019-10-05" },
{ "user_comments": 1, "active_users": 0, "date": "2019-10-06" },
{ "user_comments": 2, "active_users": 1, "date": "2019-10-07" }
]
},
按照与上篇文章案例相同的 Vega-Lite 语法,写一个描述 user_comments 的单层图表。
其实只需要替换部分 y 轴的信息即可。
{
"mark": {"type": "area", "color": "#e0e0e0", "interpolate": "monotone"},
"encoding": {
"x":{
"field": "date",
"type": "ordinal",
"timeUnit": "yearmonthdate",
"axis": {"title": "Date", "labelAngle": -45}
},
"y": {
"field": "user_comments",
"type": "quantitative",
"axis": {
"title": "User Comments",
"format": "d",
"values": [1,2,3]
}
}
}
}
接下来,创建 layer
数组。把上述对象放入数组中,图表没有任何变化,此时仍然是单层图表。
...
"layer":[
{
"mark": {"type": "area", "color": "#e0e0e0", "interpolate": "monotone"},
"encoding": {
"x":{
"field": "date",
"type": "ordinal",
"timeUnit": "yearmonthdate",
"axis": {"title": "Date", "labelAngle": -45}
},
"y": {
"field": "user_comments",
"type": "quantitative",
"axis": {
"title": "User Comments",
"format": "d",
"values": [1,2,3]
}
}
}
}
],
...
把上一篇中 Active Users 的对象加入数组,列在 User Comments 之后:
"layer":[
{
"mark": {"type": "area&