可视化图表(Vega)语法简介

来自BDP个人版帮助中心
跳转至: 导航搜索

什么是可视化图表

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

Vega实现思想基于大家熟知的D3.js,用一种更高层的语法重新描述可视化图形,D3的作者同时也是Vega作者之一,在Vega的使用中经常会使用到D3的逻辑规则。相比D3,Vega提供了更广阔的可视化范围,提供了可视化平台,D3基本仅支持SVG,Vega还支持Canvas,同时保留了扩展性,可方便扩展到如WebGL的其他系统。

可视化图表(Vega)语法简介

1.描述文件

使用Vega时需要一个JSON组成的描述文件,用于描述需要绘制的图形,描述文件中包含了关于图表相关的各种属性,在自定义图表中需要完成这个文件。 描述文件基本使用思路:

  • 1.数据(Data),作图使用的数据,可来自数据视图或外部数据
  • 2.转换(Scales),转换数据至图形中的坐标,如定义图形宽度、高度,确定图形如何画
  • 3.画图(Marks),将转换出来的坐标用图形绘制出来


2.引用数据集

为方便在Vega中使用数据集结果,预置了以下变量

  • 1.数据集:ds0,数据集列表的一维数组,顺序为数据集的相对位置,如 ds0为第一个数据集;
  • 2.维度和数值:当确定了某个数据集时,可使用 x0、y0 分别引用维度和数值,x、y 均为小写,配合相应字段所在的位置,如"x0"代表引用当前数据集的第一个维度字段,注意需要半角引号。

语法简介-1.png

3.Vega属性

示例结构:
语法简介-2.png
属性列表,其中粗体属性对应上面的三个主要部分:
语法简介-3.png

4.开始画图

5.图表调试

  • 1.可在console控制台使用如下对象 BDPVegaView 代替Vega的view

查看数据来源name的详情:BDPVegaView.data('name') ,更多用法请查看官方文档

  • 2.调式某个对象时,可在原有上增加 warn(),同样输出在 console控制台

在数据更新时计算变量并输出结果: "update": "warn([50, min(width, height)/3 + 50])",