0

我对弹性搜索和 kibana 很陌生。我在 kibana 可视化中使用 vega 插件。但无法使用弹性搜索聚合创建条形图。当我使用 kibana 开发工具时，我得到了正确的结果。

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

可视化部分：

{
  "$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
        }
      ]
    }
  }
}
4

1 回答 1

0

我建议使用静态数据调试你的 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"}}
      }
    }
  ]
}

您可能已经知道这一点，因为您的弹性搜索数据上有格式标签，但如果您的可视化正在处理静态定义的数据，而不是从弹性搜索查询中提取数据时，请尝试使用 vega 调试功能直接查看数据源此处描述https://vega.github.io/vega/docs/api/debugging/。

在浏览器控制台中运行以下命令应该可以让您以 vega 接收的格式查看数据。VEGA_DEBUG.view.data("")

于 2018-03-27T13:59:33.553 回答