我能够实现vega-lite图表呈现如下：
x1c 0d1x的数据
它的代码看起来像这样：

{
  "width": 400,
  "config": {"view": {"continuousWidth": 600, "continuousHeight": 300}},
  "data": {"name": "data-eb6aa7311f370dcc2f64d37c32c9e387"},
  "usermeta": {"embedOptions": {"renderer": "svg"}},
  "layer":[
    {
      "mark": {"type": "bar", "width": {"band": 0.2}},
      "encoding": {
        "x": {"field": "title", 
              "type": "nominal",
              "axis": { "title": "Quizzes"}
             },
        "y": {"field": "my-score", 
              "type": "quantitative",
              "axis": { "title": "Percentage Score"}
             }
      }
    },
    {
      "mark": {"type": "line", "color": "red"},
      "encoding": {
        "x": {"field": "title", "type": "nominal"},
        "y": {"field": "max", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "circle", "color": "red", "size":100, "opacity": "100"},
      "encoding": {
        "x": {"field": "title", "type": "nominal"},
        "y": {"field": "max", "type": "quantitative"},
      }
    },
    {
      "mark": {"type": "line", "color": "#02c754"},
      "encoding": {
        "x": {"field": "title", "type": "nominal"},
        "y": {"field": "avg", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "circle", "color": "#02c754", "size":100, "opacity": "100"},
      "encoding": {
        "x": {"field": "title", "type": "nominal"},
        "y": {"field": "avg", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "line", "color": "#02b6de"},
      "encoding": {
        "x": {"field": "title", "type": "nominal"},
        "y": {"field": "min", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "circle", "color": "#02b6de", "size":100, "opacity": "100"},
      "encoding": {
        "x": {"field": "title", "type": "nominal"},
        "y": {"field": "min", "type": "quantitative"}
      }
    }
    
  ],
  "title": "Quiz Scores",
  "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json",
  "datasets": {
    "data-eb6aa7311f370dcc2f64d37c32c9e387": [ 
      {
        "title": "Quiz-1",
        "my-score": 62,
        "max": 80,
        "avg": 45,
        "min": 15
      },
      {
        "title": "Quiz-2",
        "my-score": 48,
        "max": 48,
        "avg": 30,
        "min": 10
      },
      {
        "title": "Quiz-3",
        "my-score": 54,
        "max": 62,
        "avg": 36,
        "min": 12
      },
      {
        "title": "Quiz-4",
        "my-score": 27,
        "max": 69,
        "avg": 50,
        "min": 9
      },
      {
        "title": "Quiz-5",
        "my-score": 40,
        "max": 48,
        "avg": 30,
        "min": 11
      },
      {
        "title": "Quiz-6",
        "my-score": 50,
        "max": 55,
        "avg": 28,
        "min": 5
      },
    ]
  }
}

字符串
我想为同样的事情渲染图例，就像这样：

的
我不知道我怎么能做到这一点。我检查了here的例子，或者确切地说是这个例子。但是stock data used by this example有不同的模式：{symbol, date, price}，它为symbol中的不同值呈现不同的颜色。vega-lite似乎可以从这个模式自动生成图例。但是，在我的例子中，架构的格式为{title, my-score, max, avg, min}。如何实现上图所示的图例（还要注意条形图的图例有些宽）？我可以有一些不同的图例，只要它们是合理的。但是我必须转换数据以匹配模式到什么vega-lite股票示例模式吗？
PS：你可以在这个URL上尝试我的可视化。