如何在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
相关产品推荐
相关产品推荐

