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

相关包

打开搜索引擎,一搜 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。

图表

1024

基本图表

制作一个 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 轴显示的问

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值