请求提供Kibana中用Vega脚本渲染指定列表格的可行方案

以下是适配你需求的Vega脚本，可直接在Kibana的Vega可视化中使用，渲染包含指定列的表格：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "signals": [
    {
      "name": "rowHeight",
      "value": 30
    },
    {
      "name": "headerHeight",
      "value": 35
    },
    {
      "name": "cellPadding",
      "value": 8
    }
  ],
  "data": [
    {
      "name": "tableData",
      "url": {
        "%context%": true,
        "%timefield%": "@timestamp",
        "index": "你的索引名称", // 替换为实际Elasticsearch索引名
        "body": {
          "size": 1000, // 根据数据量调整
          "query": {
            "match_all": {} // 替换为你的查询条件，比如时间范围过滤
          }
        }
      },
      "format": {"property": "hits.hits"},
      "transform": [
        {
          "calculate": "datum._source.key",
          "as": "key"
        },
        {
          "calculate": "datum._source.last_5_days.doc_count",
          "as": "last_5_days_doc_count"
        },
        {
          "calculate": "datum._source.last_5_days.avg_time_taken_5d.value",
          "as": "avg_time_5d"
        },
        {
          "calculate": "datum._source.today.avg_time_taken_today.value",
          "as": "avg_time_today"
        },
        {
          "calculate": "datum._source.today.count_today",
          "as": "count_today"
        },
        // 添加行索引用于定位
        {
          "window": [{"op": "row_number", "as": "rowIndex"}]
        }
      ]
    },
    {
      "name": "columns",
      "values": [
        {"field": "key", "label": "Key", "width": 150},
        {"field": "last_5_days_doc_count", "label": "近5天文档数", "width": 120},
        {"field": "avg_time_5d", "label": "近5天平均耗时", "width": 140},
        {"field": "avg_time_today", "label": "今日平均耗时", "width": 140},
        {"field": "count_today", "label": "今日计数", "width": 100}
      ]
    }
  ],
  "scales": [
    {
      "name": "xScale",
      "type": "band",
      "domain": {"data": "columns", "field": "label"},
      "range": "width",
      "padding": 0
    },
    {
      "name": "yScale",
      "type": "band",
      "domain": {"data": "tableData", "field": "rowIndex"},
      "range": [{"signal": "headerHeight"}, {"signal": "height - 10"}],
      "padding": 0
    }
  ],
  "marks": [
    // 表头背景
    {
      "type": "rect",
      "from": {"data": "columns"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "label"},
          "x2": {"scale": "xScale", "field": "label", "band": 1},
          "y": {"value": 0},
          "y2": {"signal": "headerHeight"},
          "fill": {"value": "#f0f0f0"}
        }
      }
    },
    // 表头文本
    {
      "type": "text",
      "from": {"data": "columns"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "label", "band": 0.5},
          "y": {"signal": "headerHeight / 2"},
          "text": {"field": "label"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontWeight": {"value": "bold"},
          "fontSize": {"value": 12}
        }
      }
    },
    // 表格行背景（隔行变色）
    {
      "type": "rect",
      "from": {"data": "tableData"},
      "encode": {
        "enter": {
          "x": {"value": 0},
          "x2": {"signal": "width"},
          "y": {"scale": "yScale", "field": "rowIndex"},
          "y2": {"scale": "yScale", "field": "rowIndex", "band": 1},
          "fill": {"signal": "datum.rowIndex % 2 === 0 ? '#ffffff' : '#f9f9f9'}
        }
      }
    },
    // 单元格文本
    {
      "type": "text",
      "from": {"data": "tableData"},
      "transform": [
        {"fold": ["key", "last_5_days_doc_count", "avg_time_5d", "avg_time_today", "count_today"], "as": ["column", "value"]},
        {"lookup": "column", "from": {"data": "columns", "key": "field", "fields": ["label", "width"]}}
      ],
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "label", "band": 0.5},
          "y": {"scale": "yScale", "field": "rowIndex", "band": 0.5},
          "text": {"field": "value"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontSize": {"value": 11}
        }
      }
    }
  ]
}

关键配置说明 #

1. 数据源适配

   • 替换"index": "你的索引名称"为实际Elasticsearch索引
   • 如果数据来自聚合结果而非_source，需修改transform中的字段提取路径（比如datum.key、datum.last_5_days.doc_count）
   • 调整query部分为你的业务过滤条件（比如时间范围、关键词匹配）

2. 表格样式自定义

   • 通过signals中的rowHeight、headerHeight调整行高和表头高度
   • 在columns数据中修改width、label来调整列宽和表头显示文本
   • 修改fill值自定义表头、行背景色

3. 常见报错排查

   • 字段不存在报错：检查transform中的字段路径是否与Elastic返回的JSON结构完全匹配
   • 表格无数据：确认Kibana的时间范围与Elastic数据的时间字段匹配，或移除%timefield%配置（如果不需要时间过滤）
   • 布局异常：调整autosize和scales中的范围设置

内容的提问来源于stack exchange，提问作者Umesh Patidar