Vega可视化规范详解：从基础结构到自动尺寸调整-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00555/article/details/148394416

Vega可视化规范详解：从基础结构到自动尺寸调整

vega A visualization grammar. 项目地址: https://gitcode.com/gh_mirrors/ve/vega

什么是Vega规范

Vega规范是一种基于JSON格式的声明式语言，用于定义交互式数据可视化。它采用JSON（JavaScript Object Notation）作为描述语言，通过定义各种属性和组件来构建完整的可视化图表。

基础规范结构

一个最基本的Vega规范包含以下核心组成部分：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "图表描述信息",
  "width": 500,
  "height": 200,
  "padding": 5,
  "autosize": "pad",
  
  "signals": [],
  "data": [],
  "scales": [],
  "projections": [],
  "axes": [],
  "legends": [],
  "marks": []
}

顶层属性详解

1. 基本属性

| 属性名 | 类型 | 说明 | |-------------|-------------------|--------------------------------------------------------------------| | $schema | URL | 指定使用的Vega模式版本 | | description | String | 可视化的文字描述，在5.10版本后会影响容器的aria-label无障碍属性 | | background | Color/Signal | 整个视图的背景色（默认为透明） | | width | Number/Signal | 数据区域的宽度（像素） | | height | Number/Signal | 数据区域的高度（像素） | | padding | Number/Object/Signal | 可视化周围的填充（像素） | | usermeta | Object | 开发者自定义的元数据，Vega解析器会忽略 |

2. 核心组件

signals: 动态变量，用于参数化可视化
data: 数据集定义和转换规则
scales: 将数据值映射到视觉值的比例尺
projections: 地理投影转换
axes: 坐标轴可视化
legends: 图例可视化
marks: 图形标记（如矩形、线条等）
title: 图表标题
encode: 顶层组标记的视觉属性编码

自动尺寸调整(Autosize)详解

Vega提供了灵活的视图尺寸调整机制，可以满足不同场景下的布局需求。

1. Autosize配置参数

{
  "type": "pad",
  "resize": false,
  "contains": "content"
}

type: 尺寸调整类型（必填）
- pad (默认): 自动扩展视图尺寸以容纳所有内容
- fit: 调整布局以适应指定尺寸
- fit-x: 仅调整宽度以适应
- fit-y: 仅调整高度以适应
- none: 不自动调整尺寸
resize: 布尔值，是否在每次视图更新时重新计算布局（默认false）
contains: 尺寸计算方式
- content (默认): 将width/height视为数据区域尺寸
- padding: 将width/height视为包含padding的总尺寸