Vega Lite水平条形图顶部图例左对齐配置咨询

要让顶部水平图例与图表左边缘对齐，只需在图例配置中添加"align": "left"，同时保留已有的layout.top.bounds="full"和center=false设置即可。

修改后的图例配置片段 #

"legend":{
    "labelColor":"#333",
    "labelFontSize":11,
    "padding":1,
    "symbolSize":30,
    "symbolType":"square",
    "titleColor":"#333",
    "titleFontSize":14,
    "titlePadding":10,
    "title":null,
    "direction":"horizontal",
    "orient":"top",
    "align": "left", // 新增左对齐配置
    "layout":{
        "top":{
            "bounds":"full",
            "margin":10,
            "center":false
        }
    }
}

完整配置代码 #

{
    "$schema":"https://vega.github.io/schema/vega-lite/v5.json",
    "description":"A simple bar chart with embedded data.",
    "width":630,
    "data":{
        "values":[
            {
                "Local":"ALL",
                "Ano":"2023",
                "Valor":27076
            },
            {
                "Local":"SE",
                "Ano":"2023",
                "Valor":14132
            },
            {
                "Local":"CW",
                "Ano":"2023",
                "Valor":6434
            },
            {
                "Local":"SO",
                "Ano":"2023",
                "Valor":1036
            },
            {
                "Local":"NO",
                "Ano":"2023",
                "Valor":2684
            },
            {
                "Local":"NW",
                "Ano":"2023",
                "Valor":2790
            },
            {
                "Local":"ALL",
                "Ano":"2024*",
                "Valor":55584
            },
            {
                "Local":"SE",
                "Ano":"2024*",
                "Valor":29507
            },
            {
                "Local":"CW",
                "Ano":"2024*",
                "Valor":11190
            },
            {
                "Local":"SO",
                "Ano":"2024*",
                "Valor":10961
            },
            {
                "Local":"NO",
                "Ano":"2024*",
                "Valor":2454
            },
            {
                "Local":"NW",
                "Ano":"2024*",
                "Valor":1472
            }
        ]
    },
    "layer":[
        {
            "mark":"bar"
        },
        {
            "mark":{
                "type":"text",
                "align":"left",
                "baseline":"middle",
                "font":"Arial",
                "dx":4
            },
            "encoding":{
                "text":{
                    "field":"Valor",
                    "type":"quantitative"
                }
            }
        }
    ],
    "encoding":{
        "y":{
            "field":"Local",
            "type":"nominal",
            "axis":{
                "title":null,
                "labelFont":"Arial",
                "labelFontSize":14
            }
        },
        "x":{
            "field":"Valor",
            "type":"quantitative",
            "axis":{
                "title":null,
                "labelFont":"Arial",
                "labelFontSize":12
            }
        },
        "yOffset":{
            "field":"Ano"
        },
        "color":{
            "field":"Ano"
        }
    },
    "config":{
        "autosize":{
            "type":"fit-x",
            "contains":"padding"
        },
        "background":"#fff",
        "font":"Arial",
        "axis":{
            "domainColor":"#cbcbcb",
            "grid":false,
            "gridColor":"#cbcbcb",
            "gridWidth":1,
            "labelColor":"#000",
            "labelFontSize":10,
            "titleColor":"#333",
            "tickColor":"#cbcbcb",
            "tickSize":10,
            "titleFontSize":14,
            "titlePadding":10,
            "labelPadding":4,
            "title":null
        },
        "text":{
            "fontSize":14
        },
        "axisBand":{
            "grid":false
        },
        "legend":{
            "labelColor":"#333",
            "labelFontSize":11,
            "padding":1,
            "symbolSize":30,
            "symbolType":"square",
            "titleColor":"#333",
            "titleFontSize":14,
            "titlePadding":10,
            "title":null,
            "direction":"horizontal",
            "orient":"top",
            "align": "left",
            "layout":{
                "top":{
                    "bounds":"full",
                    "margin":10,
                    "center":false
                }
            }
        },
        "view":{
            "stroke":null
        },
        "bar":{
            "binSpacing":2,
            "fill":"#135aa3",
            "stroke":null
        },
        "range":{
            "category":[
                "#135aa3",
                "#f47080"
            ]
        }
    }
}

原理说明 #

• align: "left" 指定顶部布局的图例向左对齐
• layout.top.bounds="full" 让图例的布局范围覆盖整个图表容器（包含轴标签区域），而非仅绘图区，确保对齐到图表最左边缘

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