跳到主要内容

语法简介

1. 描述文件

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

描述文件基本使用思路:

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

2. 引用数据集

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

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

3. Vega属性

示例结构:

{
/* //元信息,在自定义图表中可不写
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"description": "A specification outline example.",
"width": 500,
"height": 200,
"padding": 5,
"autosize": "pad",
*/

"signals": [],
"data": [],
"scales": [],
"projections": [],
"axes": [],
"legends": [],
"marks": []
}

属性列表,其中粗体属性对应上面的三个主要部分:

属性说明
Specification图表元数据信息,包含大小、边距等。除特殊图表,建议不指定,否则无法在仪表盘自动缩放。
Config其他属性的样式描述信息,如描述标题字体大小
Data定义、加载、解析作图数据
Transform数据处理,建议在数据视图中完成
Triggers触发器,当数据集或某个图形属性变化时通知变量变化
Projections地理坐标系投影,将经纬度转换为可视化地图
Scales比例尺,转换数据从原始数据变为图形大小、坐标等
Schemes颜色模版,可作为比例尺的范围
Axes描绘坐标轴,如X轴、Y轴
Legends图例,如颜色、形状、大小
Title图表内的标题
Marks形状,语法核心,用于描述图形,如需要矩形、弧形等
Signals动态变量,可触发交互更新
Event Streams事件流,定义某些交互事件的操作行为
Expressions表达式,用于数据或变量的中的数据计算
Layout多图形时的布局,如同时绘制一个柱图和图片的位置
Types其他属性所需的参数类型

4. 开始画图

制作你的第一个柱状图。

5. 图表调试

  1. 可在console控制台使用如下对象 BDPVegaView 代替Vega的view
    • 查看数据来源name的详情:BDPVegaView.data('name') ,更多用法请查看官方文档
  2. 调式某个对象时,可在原有上增加 warn(),同样输出在 console控制台
    • 在数据更新时计算变量并输出结果: "update": "warn([50, min(width, height)/3 + 50])",