Kibana 中的 Vega/Vega-lite - 如何使圖表響應大小調整

Question

我在 Kibana 中創建了一個儀表板，還包括了一些 Vega 可視化。 我的問題是，當 window 大小發生變化時，我無法使 Vega 條形圖響應動態調整大小：

儀表板上的條形圖

設置：

autosize: {
 type: "fit",
 contains: "padding",
 resize: true,
            }

儀表板上的條形圖

調整大小后的條形圖 - 數據未調整為 window

調整大小后的條形字符

我還嘗試按照此處https://vega.github.io/vega-lite/docs/size.html "container"說明進行操作，但沒有正確設置width或height ，但我沒有正確定義它們。

完整的 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 "}
  }
}

我將不勝感激任何幫助！

Answer 1

您需要創建一個信號來監聽 window 調整大小事件。 該信號將讀取容器寬度。

"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
    },
]