数据可视化：在 React 项目中使用 Vega 图表 (二)

上一篇讲了如何在 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