You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Vega-Lite中实现分面图表的自适应宽度?

在Kibana的Vega-Lite中实现分面图表宽度动态适配窗口大小

我在Kibana中使用Vega-Lite,想要让分面图表的宽度能随窗口大小动态调整,以下是最小示例代码:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category":"A", "group": "x", "value":0.1},
      {"category":"A", "group": "y", "value":0.6},
      {"category":"A", "group": "z", "value":0.9},
      {"category":"B", "group": "x", "value":0.7},
      {"category":"B", "group": "y", "value":0.2},
      {"category":"B", "group": "z", "value":1.1},
      {"category":"C", "group": "x", "value":0.6},
      {"category":"C", "group": "y", "value":0.1},
      {"category":"D", "group": "x", "value":0.2},
      {"category":"D", "group": "y", "value":0.3}
    ]
  },
  "facet": {"field" : "category", "type": "nominal"},
  "columns": 2,
  "spec":{
    "width": 200,
    "encoding": {
      "x":{"field": "value", "type":"quantitative"},
      "y":{"field": "group",
      "axis":{"labels":false, "ticks": false, "title":null}}
    },
    "layer": [{
        "mark" : "bar",
        "encoding": {"color": {"field" : "group"}}
    }]
  },
  "resolve": { "scale": {"y": "independent"}},
  "config": {
    "view": {"stroke":"transparent"},
    "facet": {"spacing": 10}
  }
}

根据官方文档,分面图表无法将width设置为container,但真的没有办法实现动态调整尺寸吗?

我目前的解决方法是改用Vega,通过signal计算尺寸:

"signals": [{ 
      "name": "width","value": 500,
      "on": [ { 
        "events": { "source": "window", "type": "resize" }, 
        "update": "containerSize()[0]" 
      } ] 
    },
    {"name": "number_of_culumns", "value": 2},
    {"name": "child_width", "update": "width/number_of_culumns"}
}]
...
...
"width": {"signal": "child_width"}

但Vega的复杂度远高于Vega-Lite。有没有办法在Vega-Lite中实现类似功能?我尝试使用parameters(相当于Vega的signal),但无法将width设置为参数值。

恳请各位提供帮助...

内容的提问来源于stack exchange,提问作者Catrexis

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 19:10:43