如何实现Vega-Lite列编码分面图表的响应式自适应宽高调整

Vega-Lite默认分面图表的每个子单元格为固定尺寸，全局autosize和直接设置顶层width不会作用于分面子图，因此无法实现自适应。按以下步骤修改即可实现容器尺寸适配：

核心配置修改点 #

1. 新增全局autosize配置，开启自动适配和重绘开关
2. 在config.view中声明离散/连续维度的宽度为容器适配模式，让分面子单元格可以动态分配宽度
3. 若需要高度也自适应，同理配置高度相关参数即可

完整适配后配置 #

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "autosize": {
        "type": "fit",
        "contains": "padding",
        "resize": true
    },
    "width": "container",
    "height": 300,
    "config": {
        "style": {
            "cell": {
                "stroke": "transparent"
            }
        },
        "view": {
            "discreteWidth": "container",
            "continuousWidth": "container"
        }
    },
    "mark": {
        "type": "bar",
        "width": {
            "band": 0.7
        },
        "tooltip": true,
        "cornerRadiusEnd": 3,
        "cursor": "pointer"
    },
    "encoding": {
        "x": {
            "field": "groupBy",
            "type": "nominal",
            "axis": null,
            "sort": {
                "encoding": "x",
                "order": "ascending"
            },
            "scale": {
                "paddingOuter": 0.5
            }
        },
        "y": {
            "field": "y",
            "type": "quantitative",
            "aggregate": "count",
            "axis": {
                "title": "Number"
            }
        },
        "tooltip": [
            {
                "field": "x",
                "title": "Pasted field 3"
            },
            {
                "field": "y",
                "type": "quantitative",
                "aggregate": "count",
                "title": "Number of records"
            }
        ],
        "color": {
            "scale": {
                "domain": [
                    "Office Supplies",
                    "Technology",
                    "Furniture",
                    null
                ],
                "range": [
                    "rgb(207, 223, 255)",
                    "rgb(208, 240, 253)",
                    "rgb(194, 245, 233)",
                    "rgb(238, 238, 238)"
                ]
            },
            "field": "groupBy",
            "title": "Pasted field 15",
            "type": "nominal"
        },
        "column": {
            "field": "x",
            "axis": {
                "title": "testing"
            },
            "type": "nominal",
            "spacing": 0,
            "header": {
                "titleOrient": "bottom",
                "labelOrient": "bottom"
            }
        }
    },
    "transform": [],
    "data": {
        "values": [
            {
                "x": "High",
                "y": "recwvEUHpISbJqckL",
                "groupBy": "Office Supplies"
            },
            {
                "x": "High",
                "y": "reckQZaPsli0YcpvJ",
                "groupBy": "Office Supplies"
            },
            {
                "x": "Low",
                "y": "recZiThOpq7XVfN73",
                "groupBy": "Office Supplies"
            },
            {
                "x": "Medium",
                "y": "recvjzdY3x8qbGF94",
                "groupBy": "Office Supplies"
            },
            {
                "x": "Critical",
                "y": "recvkzoTPyG1XY5V1",
                "groupBy": "Technology"
            },
            {
                "x": "High",
                "y": "recvlmkwSHXroRzqW",
                "groupBy": "Technology"
            },
            {
                "x": "Medium",
                "y": "recvmnPqANnukXq59",
                "groupBy": "Technology"
            },
            {
                "x": "Not Specified",
                "y": "recvmuosdhj24sFlE",
                "groupBy": "Technology"
            },
            {
                "x": "Medium",
                "y": "recvmNkfVu2XjKs94",
                "groupBy": "Office Supplies"
            },
            {
                "x": "Not Specified",
                "y": "recvRlJuppQLbjODM",
                "groupBy": "Furniture"
            },
            {
                "x": "Critical",
                "y": "recvUd9XcD5OzZF4b",
                "groupBy": "Technology"
            },
            {
                "x": "Not Specified",
                "y": "recvVHCgzxHXFVjG3",
                "groupBy": "Office Supplies"
            }
        ]
    }
}

前端嵌入适配逻辑 #

如果是在网页中嵌入使用，需要配合容器尺寸监听主动触发图表重绘，示例代码如下：

const chartContainer = document.getElementById('你的图表容器ID');
let chartView;

// 初始化图表
vegaEmbed('#你的图表容器ID', 上述配置对象, { renderer: 'canvas' })
  .then(res => {
    chartView = res.view;
    // 监听容器尺寸变化，触发图表重绘
    const observer = new ResizeObserver(() => {
      chartView.resize().run();
    });
    observer.observe(chartContainer);
  });

关键注意事项 #

• 若需要高度也随容器自适应，将height也设置为"container"，同时在config.view中新增discreteHeight: "container"、continuousHeight: "container"即可
• 分面间距可通过column.spacing参数调整，避免容器较小时分面内容重叠
• 若分面数量为动态值，可额外增加逻辑根据分面数量调整最小宽度阈值，避免内容挤压

内容的提问来源于stack exchange，提问作者noodles life