Question

我对弹性搜索和kibana非常新。我在kibana可视化中使用vega插件。但是无法使用弹性搜索aggs创建条形图。当我使用kibana dev工具时，我得到了正确的结果。

我在运行此示例代码后附加了以下详细信息我得到一个空白页

可视化部分：

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "autosize": "fit",
  "padding": 6,
  "data": [
    {
      "name": "traffic-revenue",
      "url": {
        "index": "brnl_tms_plaza",
         "body": {
          "size": "0",
          "aggs": {
            "group_by_vehicle_subcat": {
              "terms": {
                "field": "VehicleSubCatCode.keyword"
              }
            }
          }
        },
        "format": {
          "property": "aggregations.group_by_vehicle_subcat.buckets"
        }
      }
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "traffic-revenue",
        "field": "key"
      },
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {
        "data": "traffic-revenue",
        "field": "doc_count"
      },
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale"
    },
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",

      "from": {
        "data": "traffic-revenue"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "key",
            "axis": {"title": "Vehicle category"}
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "field": "doc_count",
            "axis": {"title": "Vehicle Rate Count"}
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {"fill": {"value": "red"}}
      }
    }
  ]
}

数据集

{
  "took": 7,
  "timed_out": false,
  "_shards": {
    "total": 5,
    "successful": 5,
    "skipped": 0,
    "failed": 0
  },
  "hits": {
    "total": 48,
    "max_score": 0,
    "hits": []
  },
  "aggregations": {
    "group_by_vehicle_subcat": {
      "doc_count_error_upper_bound": 0,
      "sum_other_doc_count": 0,
      "buckets": [
        {
          "key": "LMV",
          "doc_count": 35
        },
        {
          "key": "BUS",
          "doc_count": 3
        },
        {
          "key": "LCV",
          "doc_count": 3
        },
        {
          "key": "MAV-5",
          "doc_count": 3
        },
        {
          "key": "MAV-4 with trailer",
          "doc_count": 2
        },
        {
          "key": "MAV-3 without trailer",
          "doc_count": 1
        },
        {
          "key": "MINI-BUS",
          "doc_count": 1
        }
      ]
    }
  }
}

Answer 1

我建议使用静态数据调试你的vega代码，以确保它被正确定义。

我不确定原因，但是当我将autosize属性设置为none并显式设置高度和宽度时，我能够绘制可视化。

这是一个基于您提供的vega规范，应该在在线vega编辑器中运行。

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "autosize": "none",
  "width": 400,
  "height": 500,
  "padding": 20,
  "data": [
    {
      "name": "traffic-revenue",
      "values": [
        {"key": "a", "doc_count": 5},
        {"key": "b", "doc_count": 22},
        {"key": "c", "doc_count": 1},
        {"key": "d", "doc_count": 7},
        {"key": "e", "doc_count": 12},
        {"key": "f", "doc_count": 2}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {
        "data": "traffic-revenue",
        "field": "key"
      },
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {
        "data": "traffic-revenue",
        "field": "doc_count"
      },
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale"
    },
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {
        "data": "traffic-revenue"
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "key",
            "axis": {"title": "Vehicle category"}
          },
          "width": {
            "scale": "xscale",
            "band": 1
          },
          "y": {
            "scale": "yscale",
            "field": "doc_count",
            "axis": {"title": "Vehicle Rate Count"}
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        },
        "update": {
          "fill": {"value": "steelblue"}
        },
        "hover": {"fill": {"value": "red"}}
      }
    }
  ]
}

您可能已经知道这一点，因为您的elasticsearch数据上有格式标记，但如果您的可视化使用静态定义的数据，而不是从elasticsearch查询中提取数据，请尝试直接使用这里描述的vega调试功能https://vega.github.io/vega/docs/api/debugging/。

在浏览器控制台中运行以下内容可让您查看vega正在接收它的格式的数据。 VEGA_DEBUG.view.data（＆＃34;＆＃34）

ElasticSearch-Kibana-Vega插件

可视化部分：

数据集

1 个答案: