VEGA Lite，如何为串联图表创建单独的图例

Question

我正在尝试创建多个堆叠条形图的可视化，我想让每个图表使用自己的图例，问题是 Vegalite 为每个图表生成的图例包含所有字段，甚至是该特定图表上不存在的字段.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dashboard with cross-highlighting.",
  "data": {"url": "data/movies.json"},
  "vconcat": [

    {
      "width": 400,
      "height": 150,
      "mark": "bar",
      "params": [{
        "name": "main",
        "select": {"type": "point", "encodings": ["x"]}
      }],
      "encoding": {
        "x": {"field": "Major Genre", "axis": {"labelAngle": -40}},
        "y": {"aggregate": "count"},
        "color": {
          "condition": {
            "param": "main",
            "field": "MPAA Rating"
          },
          "value": "lightgrey"
        }
      }
    },

    {
      "width": 400,
      "height": 150,  
      "transform": [{
        "filter": {"param": "main"}
      }],
      "mark": "bar",
      "params": [{
        "name": "i",
        "select": {"type": "point", "encodings": ["x"]}
      }],
      "encoding": {
        "x": {
          "field": "MPAA Rating"
        },
        "y": {"aggregate": "count"},
        "color": {
          "condition": {
            "param": "i",
            "field": "Source"
          },
          "value": "lightgrey"
          
        }
        
      }
    },

    {
      "width": 400,
      "height": 150,  
      "transform": [
        {"filter": {"param": "main"}},
        {"filter": {"param": "i"}}
        ],
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "Source"
        },
        "y": {"aggregate": "count"},
        "color": {
          "field": "Source",
          "legend": {
            "values": {"expr":""}
          }
        }
      }
    }
  ],
  "resolve": {
    "legend": {
      "opacity": "independent",
      "color": "independent",
      "size": "independent"
      
    }
  }
}

结果图可以在这里看到： 您可以使用在线编辑器。

此示例所需的行为是让第一个图表的图例仅显示 MPAA 评级，第二个图表的图例仅显示源材料。 如下所示：

我尝试使用手动声明在图例中显示哪些值：

"legend": {
    "values": ['x', 'y', 'z']
}

但我真的需要一种自动完成的方法

Answer 1

我认为你的决心只需要清理。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A dashboard with cross-highlighting.",
  "data": {"url": "data/movies.json"},

  "vconcat": [
    
    {
      "width": 400,
      "height": 150,
      "mark": "bar",
      "params": [
        {"name": "main", "select": {"type": "point", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "Major Genre", "axis": {"labelAngle": -40}},
        "y": {"aggregate": "count"},
        "color": {
          "condition": {"param": "main", "field": "MPAA Rating"},
          "value": "lightgrey"
        }
      }
    },
    {
      "width": 400,
      "height": 150,
      "transform": [{"filter": {"param": "main"}}],
      "mark": "bar",
      "params": [
        {"name": "i", "select": {"type": "point", "encodings": ["x"]}}
      ],
      "encoding": {
        "x": {"field": "MPAA Rating"},
        "y": {"aggregate": "count"},
        "color": {
          "condition": {"param": "i", "field": "Source"},
          "value": "lightgrey"
        }
      }
    },
    {
      "width": 400,
      "height": 150,
      "transform": [{"filter": {"param": "main"}}, {"filter": {"param": "i"}}],
      "mark": "bar",
      "encoding": {
        "x": {"field": "Source"},
        "y": {"aggregate": "count"},
        "color": {"field": "Source", "legend": false}
      }
    }
  ],
 "resolve": {"scale": {"color": "independent"}}
}