Vega-Lite分层折线图图例创建失败，求解决方案

问题分析 #

你提供的代码存在两个核心问题导致图例不显示：

1. JSON语法错误：多处键未加双引号、数组元素间缺逗号，导致Vega-Lite无法正确解析配置；
2. 颜色编码不统一：各层的color.datum值命名混乱（如第二层用"_source.wl_radar"，其他用字段名），且未明确颜色比例尺的定义域，系统无法识别这些值作为图例项。

修正后的Datum方案代码 #

以下是修复语法并调整颜色编码后的代码，可正常显示图例：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "title": {
    "text": "Main title",
    "anchor": "start"
  },
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "MESSAGEDATE",
      "index": "mms-maws-ott",
      "body": {
        "size": 10000,
        "_source": ["MESSAGEDATE", "wl_pressure", "station_id", "wl_radar"]
      }
    },
    "format": {"property": "hits.hits"}
  },
  "transform": [
    {"calculate": "toDate(datum._source['MESSAGEDATE'])", "as": "time"},
    {"calculate": "datum._source['wl_radar'] - datum._source['wl_pressure']", "as": "Offset"}
  ],
  "encoding": {
    "x": {
      "field": "time",
      "type": "temporal",
      "title": "Date"
    },
    "color": {
      "scale": {"domain": ["Bubble", "Radar", "Offset"]},
      "legend": {"title": "Series"}
    }
  },
  "layer": [
    {
      "mark": {"type": "line"},
      "encoding": {
        "y": {
          "field": "_source.wl_pressure",
          "type": "quantitative",
          "title": "Bubble"
        },
        "color": {"datum": "Bubble"}
      }
    },
    {
      "mark": {"type": "line"},
      "encoding": {
        "y": {
          "field": "_source.wl_radar",
          "type": "quantitative",
          "title": "Radar"
        },
        "color": {"datum": "Radar"}
      }
    },
    {
      "mark": {"type": "line"},
      "encoding": {
        "y": {
          "field": "Offset",
          "type": "quantitative",
          "title": "Offset"
        },
        "color": {"datum": "Offset"}
      }
    }
  ]
}

关键修改点 #

• 补全所有缺失的双引号和逗号，确保JSON语法合法；
• 在顶层encoding中定义颜色比例尺的domain，包含所有系列名称；
• 统一各层color.datum为清晰的系列名称（与domain对应），让系统自动生成图例。

更简洁的Fold方案 #

如果觉得分层配置繁琐，推荐用fold转换将多列数据转为长格式，无需手动分层即可自动生成图例：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "title": {
    "text": "Main title",
    "anchor": "start"
  },
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "MESSAGEDATE",
      "index": "mms-maws-ott",
      "body": {
        "size": 10000,
        "_source": ["MESSAGEDATE", "wl_pressure", "station_id", "wl_radar"]
      }
    },
    "format": {"property": "hits.hits"}
  },
  "transform": [
    {"calculate": "toDate(datum._source['MESSAGEDATE'])", "as": "time"},
    {"calculate": "datum._source['wl_radar'] - datum._source['wl_pressure']", "as": "Offset"},
    {
      "fold": ["_source.wl_pressure", "_source.wl_radar", "Offset"],
      "as": ["Series", "Value"]
    },
    {
      "calculate": "datum.Series === '_source.wl_pressure' ? 'Bubble' : (datum.Series === '_source.wl_radar' ? 'Radar' : 'Offset')",
      "as": "SeriesName"
    }
  ],
  "encoding": {
    "x": {
      "field": "time",
      "type": "temporal",
      "title": "Date"
    },
    "y": {
      "field": "Value",
      "type": "quantitative",
      "title": "Value"
    },
    "color": {
      "field": "SeriesName",
      "type": "nominal",
      "title": "Series"
    }
  },
  "mark": {"type": "line"}
}

方案说明 #

• fold转换将三个数值列合并为Series（列名）和Value（数值）两列；
• 通过calculate将原始列名转换为友好的系列名称；
• 直接用color编码SeriesName，自动生成图例，配置更简洁。

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