Vega/Vega-Lite

开头首先奉上Vega官方网站 :
Vega
Vega-Lite
Vega编辑器

简介

Vega

Vega是华盛顿数据交互实验室（IDL）研发的可视化描述语言，改变了传统的可视化流程，不需要写晦涩的前端代码，可通过想象描述出一个图形的细节，通过Vega进行展示，进一步降低了数据可视化的门槛。

Vega-Lite

Vega-Lite是交互式图形的高级语法。它提供了简明的JSON语法，用于快速生成可视化以支持分析。Vega-Lite规范可以编译为Vega规范。
个人把Vega-Lite理解为简化版的Vega,如果你对Vega复杂代码配置比较头疼,或者你的需求不是复杂的图表,建议使用Vega-Lite,使用Vega-Lite需要结合Vega-Embed来使用,具体的使用方法在文章开头的官方网站中有文档说明。

属性

Vega 主要配置项

{
  "$schema": "https://vega.github.io/schema/vega/v5.json", // 版本
  "width": ..., // 视图宽度
  "height": ..., // 视图高度
  "autosize": ..., // 视图自动大小设置
  "signals": ..., // 动态变量,可触发交互更新
  "data": ..., // 数据
  "scales": ..., // 转换数据为图表对应的X,Y轴
  "axes": ..., // 坐标轴配置
  "legends": ..., // 图例
  "marks": ... // 图形标记,形状,语法核心,用于描述图形,例如矩形,弧形
  // 更多配置项请参考官方文档
}

Vega-Lite 主要配置项

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json", // 版本
  "background": ..., // 背景
  "padding": ..., // 内边距
  "autosize": ..., // 自动大小
  "config": ..., // 顶级配置
  "title": ..., // 标题
  "data": ..., // 数据
  "transform": ..., // 数据转换
  "width": ..., // 宽度
  "height": ..., // 高度
  "mark": ..., // 标记
  "encoding": {
    "x": {
      "field": ..., // 数据中的键名
      "type": ..., // 数据对应的类型
      "axis": {
          "title": "" // X轴标题
      },
      ...
    },
    "y": ...,
    "color": ..., // 对应legends
    ...
  }
  // 更多配置项请参考官方文档
}

安装Vega/Vega-Lite

npm install vega
npm install vega-lite
npm install vega-embed // 用于编译Vega/Vega-Lite语法,渲染出图表

在Vue文件中使用

首先引入对应包

在你的html结构中给一个div设置id

在Data中定义一个对象,里面写好对应的配置

在methods中创建一个函数,调用vegaEmbed,第一个参数为第二步的html结构中盒子的id, 第二个参数就是你的配置对象

然后我们调用chart方法,就可以渲染出图表了~

Vega-Lite配置示范

下面我们把这份配置放入Vega编辑器中做一些修改配置项示范,帮助大家了解对应的配置项该如何使用

配置对应键名

我们将data里存放数据的对象中,键名a修改为了value,这时,视图是无法正常渲染数据的,因为在encoding的X轴配置项中,我们在field中配置的数据键名是a,这时我们只需要将a修改为我们在数据中修改的键名value即可,也就是field对应的是我们数据中某一个键名。

三组数据

上面是我们的数据为两个键名所展示图,如果我们的数据有三个,那么我们可以为他配置color,在Vega-Lite中, color会为你生成legends。

切换折线图

当我们需要折线图的时候,在配置代码相对简单的时候,我们可以直接修改mark中的视图类型,来改变视图。

配色

当你觉得颜色不是很满意或者想用自己的配色方案时,你可以在color中新增一个配置项scale, 在里面配置range属性,将range属性设置为有效CSS颜色字符串数组

标题

当你想给X轴或者Y轴甚至legends设置标题的时候,可以直接在对应的x,y,color对象中设置title属性

工具提示

当我们将鼠标悬停在图表上时,想要图表有对应的提示,我们可以在encoding中,与x,y,color,同一级设置tooltip提示,配置对应的键名,类型,标题即可

宽高

这时可能大家会发现,图表是不是有些小了,接下来我们就给它设置宽度和高度

堆叠柱状图

当你的用来做为X轴的数据发生数据重复的时候,Vega会自动将数据分类,并渲染出堆叠柱状图,

总结

Vega/Vega-Lite的优势在于一串JSON代码,即可渲染出图表,并且通过对代码中相应配置项的修改,可以做出各类各样的图表,如果你在你的项目中配置了vega-embed,并结合textarea标签,你就可以在页面中通过修改配置项,实时渲染出不同的图表。

本次主要讲解了Vega-Lite中对于柱状图,折线图,堆叠柱状图的简单配置,下次会为大家讲解Vega饼图,多列柱状图。