如何在OpenSearch Vega中基于嵌套数组对象绘制多折线图

核心思路 #

你的数据结构是每个时间点（Date）对应一个包含多个应用的TPS数组（Type），要实现多折线图必须先把嵌套的Type数组扁平化，让每条数据对应「时间点+应用名+TPS值」的结构，再按应用名（key字段）分组绘制折线。

完整Vega配置示例 #

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 800,
  "height": 400,
  "padding": 5,
  "signals": [
    // 保留你已有的时间范围等信号配置
  ],
  "data": [
    {
      "name": "source",
      "url": "你的OpenSearch聚合请求URL",
      "format": {
        "property": "aggregations.maxtps30min.value"
      },
      "transform": [
        // 关键：扁平化Type数组，同时保留原Date字段
        {
          "type": "flatten",
          "fields": ["Type"],
          "as": ["typeData"]
        },
        // 提取Type对象中的应用名和TPS值到顶层字段
        {
          "type": "calculate",
          "as": "appKey",
          "expr": "datum.typeData.key"
        },
        {
          "type": "calculate",
          "as": "tpsValue",
          "expr": "datum.typeData.MAX_TPS"
        },
        // 把字符串格式的Date转为时间类型，优化X轴显示
        {
          "type": "timeparse",
          "field": "Date",
          "format": "%Y-%m-%d %H:%M:%S",
          "as": "parsedDate"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xScale",
      "type": "time",
      "domain": {"data": "source", "field": "parsedDate"},
      "range": "width",
      "nice": true
    },
    {
      "name": "yScale",
      "type": "linear",
      "domain": {"data": "source", "field": "tpsValue"},
      "range": "height",
      "nice": true,
      "zero": true
    },
    {
      "name": "colorScale",
      "type": "ordinal",
      "domain": {"data": "source", "field": "appKey"},
      "range": "category"
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xScale",
      "title": "时间",
      "format": "%Y-%m-%d %H:%M",
      "labelAngle": -45
    },
    {
      "orient": "left",
      "scale": "yScale",
      "title": "MAX_TPS"
    }
  ],
  "legends": [
    {
      "fill": "colorScale",
      "title": "应用类型"
    }
  ],
  "marks": [
    {
      "type": "line",
      "from": {"data": "source"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "parsedDate"},
          "y": {"scale": "yScale", "field": "tpsValue"},
          "stroke": {"scale": "colorScale", "field": "appKey"},
          "strokeWidth": {"value": 2}
        },
        "update": {
          "opacity": {"value": 1}
        },
        "hover": {
          "opacity": {"value": 0.7},
          "strokeWidth": {"value": 3}
        }
      }
    },
    {
      "type": "point",
      "from": {"data": "source"},
      "encode": {
        "enter": {
          "x": {"scale": "xScale", "field": "parsedDate"},
          "y": {"scale": "yScale", "field": "tpsValue"},
          "fill": {"scale": "colorScale", "field": "appKey"},
          "size": {"value": 60}
        },
        "hover": {
          "size": {"value": 100}
        }
      }
    }
  ]
}

关键配置说明 #

• 数据转换：
  • flatten：把每个Date对应的Type数组拆分成独立数据条目，每条保留原Date和单个Type对象。
  • calculate：从Type对象中提取应用名和TPS值到顶层字段，简化后续编码逻辑。
  • timeparse：将字符串时间转为Vega可识别的时间类型，确保X轴按时间顺序正确排列。
• 分组绘制：通过stroke（折线颜色）绑定appKey字段，Vega会自动为每个应用生成独立折线。
• 交互优化：添加折线 hover 加粗、数据点 hover 放大效果，提升可读性。

替换现有配置 #

只需将上述配置中的url替换为你的OpenSearch聚合请求地址，保留你已有的信号（如时间范围控件）即可。

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