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饼图,多列柱状图。