Vega-Lite图表交互需求：点击图例过滤对应柱状图数据

核心思路 #

你当前的逻辑是保留选中图例项的数据，只需反转过滤条件，改为排除选中图例项的数据，同时配置图例交互支持多选中/取消，即可实现点击图例隐藏对应柱子的需求。

具体修改步骤 #

1. 配置支持toggle的图例参数
   确保你的params配置开启toggle: true，允许点击图例项切换选中/取消状态（支持多选）：

   "params": [
     {
       "name": "legendToggle",
       "select": {
         "type": "point",
         "fields": ["你的分类字段名"], // 替换成你实际的分类字段，比如原示例中的"category"
         "toggle": true
       },
       "bind": "legend"
     }
   ]
   

2. 反转过滤条件
   将transform中的filter逻辑改为排除选中的图例项数据。使用Vega的indata函数检查当前数据项是否在选中集合中，取反后实现隐藏：

   "transform": [
     {
       "filter": "!indata('legendToggle', '你的分类字段名', datum.你的分类字段名)"
     }
   ]
   

逻辑解释 #

• 初始状态：无图例项被选中时，indata返回false，取反后为true，所有数据通过过滤，显示全部柱状图。
• 点击图例项：该分类被加入选中集合，indata返回true，取反后为false，对应数据被过滤隐藏。
• 再次点击已选中的图例项：该分类从选中集合中移除，对应数据重新显示。

适配你的原型示例 #

针对你提供的原型，只需修改两处：

1. 将params中的select添加toggle: true；
2. 将transform.filter改为!indata('selector', 'category', datum.category)（你的参数名是selector，分类字段是category）。

修改后的核心配置片段：

"params": [
  {
    "name": "selector",
    "select": {
      "type": "point",
      "fields": ["category"],
      "toggle": true // 新增toggle支持切换
    },
    "bind": "legend"
  }
],
"transform": [
  {
    "filter": "!indata('selector', 'category', datum.category)" // 反转过滤条件
  }
]

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