Vega-Lite：添加不基於字段值/自動顏色/自動形狀的自定義圖例

Question

我正在尋找一種方法來 output 自定義多字段數據的圖例。 理想情況下，我想對我可能擁有的所有字段（總共可能有大約 20 個）以及每種顏色和任意文本的 output 圖例或至少一個字段名稱進行靜態顏色編碼。

在下面的示例中，我想要一個圖例來顯示“ blue stroke系列 1 red stroke系列 2”。

我很樂意展示我目前擁有的東西，但我已經嘗試將“圖例”放置在它可能適合的任何地方，但它並沒有做任何事情。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 10},
      {"x": 2, "y": 7},
      {"x2": 1, "y2": 11},
      {"x2": 2, "y2": 12}
    ]
  },
  "encoding": {"x": {"type": "quantitative"}, 
               "y": {"type": "quantitative"}},
  "layer": [
    {
      "layer": [
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "x"}, 
            "y": {"field": "y"},
            "color": {"value": "blue"}
            
            }
        },
        {
          "mark": "line",
          "encoding": {
            "x": {"field": "x2"},
            "y": {"field": "y2"},
            "color": {"value": "red"}
          }
        }
      ]
    }
  ]
}

Answer 1

Vega-Lite 中的圖例是根據編碼創建的，因此如果您想要顯示圖例，您需要構建適當的編碼。 對於分層圖表，一種方法是為每一層使用datum編碼，然后您可以構建自定義色標，將這些編碼映射到所需的顏色。 例如（ 在編輯器中打開）：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 10},
      {"x": 2, "y": 7},
      {"x2": 1, "y2": 11},
      {"x2": 2, "y2": 12}
    ]
  },
  "encoding": {
    "x": {"type": "quantitative"},
    "y": {"type": "quantitative"},
    "color": {
      "type": "nominal",
      "scale": {"domain": ["Series1", "Series2"], "range": ["blue", "red"]}
    }
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x"},
        "y": {"field": "y"},
        "color": {"datum": "Series1"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x2"},
        "y": {"field": "y2"},
        "color": {"datum": "Series2"}
      }
    }
  ]
}