Kibana 仪表板内 Vega 可视化中信号元素的显示未使用自动调整大小完全显示

Question

我想在 Kibana 中显示 Vega，并启用自动调整大小以便能够在仪表板中将其调整为任何大小，但我无法让它向我显示信号（无线电类型）不得不使用滚动条。

这里我展示了一个示例代码，您可以在其中看到我遇到的问题。在这种情况下，我还没有将信号链接到任何东西，因为我首先需要解决的是它可以很容易地看到，而不需要使用滚动条:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",


  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28},
        {"category": "B", "amount": 55},
        {"category": "C", "amount": 43},
        {"category": "D", "amount": 91},
        {"category": "E", "amount": 81},
        {"category": "F", "amount": 53},
        {"category": "G", "amount": 19},
        {"category": "H", "amount": 87}
      ]
    }
  ],

  "signals": [
{  
      "name": "radio_signal", "value": "ALL",
      "bind": {"input": "radio", "options": ["ALL", "OK", "NOK"]}
    },    

{
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
    
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],

"axes": [
  {
    "orient": "bottom",
    "scale": "xscale",
    "title": "X-Axis",
  },

    { "orient": "left", 
    "scale": "yscale",
    "title": "Y-Axis", 
    "tickCount": 4,"offset": 6 }
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data":"table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    },

    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {
          "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
          "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
          "text": {"signal": "tooltip.amount"},
          "fillOpacity": [
            {"test": "isNaN(tooltip.amount)", "value": 0},
            {"value": 1}
          ]
        }
      }
    }
  ]
}

Answer 1

您需要根据无线电信号名称的长度将 height 和 width 信号略微调整 10 到 20，这实际上会略微缩小您的可视化范围。我遇到过需要减去 40 的情况，所以稍微调整一下这个值。例如，尝试将其添加到信号规范中...

...
signals: [
  ...
  {
    height: height - 10
  }
  {
    width: width -10
  }
  ...
]
...

Kibana 仪表板内 Vega 可视化中信号元素的显示未使用自动调整大小完全显示

The display of a signal element in the Vega visualization within a Kibana dashboard is not fully displayed using autosize

vega

kibana-7