我在Kibana中创建了一个仪表板，还包含了一些Vega可视化。我的问题是，当窗口大小发生变化时，我无法使Vega条形图在动态调整大小的意义上做出响应：
仪表板上的条形图
设置：
autosize: {
type: "fit",
contains: "padding",
resize: true,
}
仪表板上的条形图
调整大小后的条形图-数据未调整到窗口
调整大小后的条形图
我也试着按照这里的指示https://vega.github.io/vega-lite/docs/size.html并使用了将width或height设置为"container"，但没有任何效果，或者我对它们的定义不正确。
完整的Vega规范如下：
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
title: Test
autosize: {
type: "fit",
contains: "padding",
resize: true,
},
// Define the data source
data: {
url: {
%context%: true
%timefield%: time
index: test
body: {
"aggs":{
"date_hist":{
"date_histogram": {
"field": "time",
"calendar_interval": "day",
"format": "strict_date"
},
"aggs":{
"state":{
"terms": {
"field": "f.keyword",
"include":["active","revoked"],
"min_doc_count": 0,
"size": 10000
}
},
"increased":{
"bucket_script": {
"buckets_path": {
"in": "state['active']>_count",
"out": "state['revoked']>_count"
},
"script": "params.in - params.out"
}
},
"active_patients":{
"cumulative_sum": {
"buckets_path": "increased"
}
}
}
}
},
"size":0
}
}
format: {property: "aggregations.date_hist.buckets"}
}
mark: bar
encoding: {
x: {
field: key_as_string
type: ordinal
axis: {title: "Date", "labelAngle": 45}
}
y: {
field: active_patients.value
type: quantitative
axis: {title: " "}
}
"color": {"value": "#00A6CE "}
}
}
如果有任何帮助，我将不胜感激！
您需要创建一个信号来监听窗口大小调整事件。此信号将读取容器宽度。
"signals": [
{
"name": "width",
"init": "containerSize()[0]",
"on": [{ "events": "window:resize", "update": "containerSize()[0]" }]
}
],
之后，您需要在xscale上定义一个范围来读取之前创建的信号。
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "your_value"},
"range": [0, { "signal": "width" }],
"padding": 0.05
},
]