Vega Lite 中的图例对齐

Question

希望你们一切都好。

我正在进行一些测试，想知道是否有人有类似情况的经验。

我正在使用水平条形图，并将图例放在顶部。目前，使用设置 orient="top" 和 Direction="horizontal"，图例与 Y 轴线对齐。但是，我的目标是将图例与图表的左边距对齐。

这是显示当前对齐方式的说明性图像。如果有人有任何以这种方式调整图例对齐方式的技巧或经验，我将非常感谢您的帮助。

当前版本

我希望它看起来像这样。

可以吗？

预先感谢您的协助。

我尝试了命令 orient="top" 和 Direction="horizontal"，但它没有改变位置。

{
    "$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",
            "layout":{
                "top":{
                    "bounds":"full",
                    "margin":10,
                    "center":false
                }
            }
        },
        "view":{
            "stroke":null
        },
        "bar":{
            "binSpacing":2,
            "fill":"#135aa3",
            "stroke":null
        },
        "range":{
            "category":[
                "#135aa3",
                "#f47080"
            ]
        }
    }
}

Answer 1

给你。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "width": 630,
  "padding": {"top": 30},
  "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": 0,
      "symbolSize": 30,
      "symbolType": "square",
      "titleColor": "#333",
      "titleFontSize": 14,
      "titlePadding": 10,
      "title": null,
      "direction": "horizontal",
      "orient": "none",
      "legendX": -40,
      "legendY": -20
    },
    "view": {"stroke": null},
    "bar": {"binSpacing": 2, "fill": "#135aa3", "stroke": null},
    "range": {"category": ["#135aa3", "#f47080"]}
  }
}