Kibana Vega公式转换后页面空白，自定义字段无法识别求助

哈哈，这个问题我之前在Kibana里用Vega可视化赛车赛道数据的时候也踩过坑！页面空白+自定义字段不识别，大概率是这几个地方出了问题，我帮你一步步拆解排查：

1. Transform的位置放错了（核心问题） #

你现在把transform放在了顶层，但Vega的规则是：针对某个数据源的转换逻辑，必须嵌套在对应的data对象内部，而不是和data同级。顶层的transform是全局转换，不会作用到你从Elasticsearch拉取的数据源上。

修正写法： #

data: [
  {
    name: "raceData", // 给数据源起个名字，方便后续引用
    url: {
      "%context%": true,
      index: "performance.capture.August.*",
      body: {
        size: 10000,
        _source: ["var_Track_X", "var_Track_Z", "var_Performance"]
      }
    },
    // Transform必须放在这个data对象内部
    transform: [
      {type: "formula", expr: "-1 * datum._source.var_Track_X", as: "var_Playercar_X_Flipped"}
    ]
  }
]

2. 字段引用的语法错误 #

你在encoding里写的field: var_Playercar_X_Flipped是没有加引号的，这会被Vega当成变量表达式，而不是字段名。Vega找不到这个变量，就会导致解析失败，页面直接空白。

修正写法： #

encoding: {
  x: {
    field: "var_Playercar_X_Flipped", // 必须加引号！
    type: "quantitative",
    axis: { title: false }
  }
}

3. 字段路径是否正确？ #

你提到试过加_source.前缀，但可能没搞对实际的字段结构。Elasticsearch返回的数据在Vega里，字段是嵌套在_source对象下的，所以必须用datum._source.var_Track_X来引用，而不是直接datum.var_Track_X。

如果不确定字段路径，可以在transform里加一个debug转换，在浏览器控制台查看返回的datum结构：

transform: [
  {type: "debug", log: true}, // 开启后按F12看控制台输出
  {type: "formula", expr: "-1 * datum._source.var_Track_X", as: "var_Playercar_X_Flipped"}
]

4. 先确认Elasticsearch查询是否返回数据 #

页面空白也可能是因为你的查询根本没拿到数据！先去Kibana的Discover页面，用同样的performance.capture.August.*索引，搜索var_Track_X、var_Track_Z这些字段，确认有数据返回。如果查询结果为空，那可视化自然啥也显示不出来。

完整的可运行示例 #

把上面的修正点整合起来，完整的Vega spec应该是这样的：

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 800,
  "height": 400,
  "data": [
    {
      "name": "raceData",
      "url": {
        "%context%": true,
        "index": "performance.capture.August.*",
        "body": {
          "size": 10000,
          "_source": ["var_Track_X", "var_Track_Z", "var_Performance"]
        }
      },
      "transform": [
        // {type: "debug", log: true}, // 调试用，可注释掉
        {
          "type": "formula",
          "expr": "-1 * datum._source.var_Track_X",
          "as": "var_Playercar_X_Flipped"
        }
      ]
    }
  ],
  "mark": "point", // 用点标记来展示数据，你可以换成line等其他类型
  "encoding": {
    "x": {
      "field": "var_Playercar_X_Flipped",
      "type": "quantitative",
      "axis": {"title": false}
    },
    "y": {
      "field": "_source.var_Track_Z",
      "type": "quantitative",
      "title": "Track Z Position"
    },
    "color": {
      "field": "_source.var_Performance",
      "type": "quantitative",
      "title": "Performance Metric"
    }
  }
}

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