Vega Lite如何实现点击主柱状图条形后在下方展示更多关联图表

核心实现依赖Vega Lite原生的点选参数+垂直拼接布局能力，纯JSON配置即可完成，无需额外编写JavaScript逻辑。

调整步骤 #

1. 新增点击选择交互参数 #

在原主图配置和width、data同级的位置，添加参数定义点击选中规则，同时给图形加选中态反馈：

"params": [
  {
    "name": "selectedBar",
    "select": {
      "type": "point",
      "encodings": ["x"],
      "on": "click",
      "nearest": true,
      "empty": "none"
    }
  }
]

在主图全局encoding下添加透明度规则，选中项高亮、未选中项半透明：

"opacity": {
  "condition": {"param": "selectedBar", "value": 1},
  "value": 0.3
}

上述配置会按X轴的Name维度选中，点击同个名称下的任意柱形、三角标记都会选中该分组。

2. 重构为垂直拼接结构 #

将原单图结构改为vconcat垂直拼接结构，主图放在拼接数组第一位，关联详情图放在第二位，整体结构如下：

{
  "width": 400,
  "config": {
    // 原配置中的config项全部移到最外层，所有子图共用样式
    "axis": {"labelFont": "arial", "titleFont": "arial"},
    "header": {"labelFont": "arial", "titleFont": "arial"},
    "mark": {"font": "arial"},
    "title": {"font": "arial", "subtitleFont": "arial"},
    "legend": {"orient": "top", "layout": {"top": {"anchor": "middle"}}, "labelFont": "arial", "titleFont": "arial"}
  },
  "vconcat": [
    {
      // 原主图配置放在这里，移除重复的config、width字段
      "height": 300,
      "data": {"values": [/* 原始数据集完整粘贴在这里 */]},
      "params": [/* 上面定义的selectedBar参数放在这里 */],
      "encoding": {
        "x": {"field": "Name", "type": "nominal", "axis": {"labelAngle": -45, "title": null}},
        "opacity": {
          "condition": {"param": "selectedBar", "value": 1},
          "value": 0.3
        }
      },
      "layer": [/* 原主图的layer配置全部保留，无需修改 */],
      "resolve": {"scale": {"y": "independent"}}
    },
    {
      // 下方关联详情图配置
      "height": 250,
      "transform": [
        // 自动过滤出选中名称对应的所有数据
        {"filter": {"param": "selectedBar"}},
        // 建议在这里加类型转换，你当前的Dl、Cnc、I_Rate都是字符串格式，转成数字避免聚合错误
        {"calculate": "toNumber(datum.Dl)", "as": "Dl"},
        {"calculate": "toNumber(datum.Cnc)", "as": "Cnc"},
        {"calculate": "toNumber(datum.I_Rate)", "as": "I_Rate"}
      ],
      // 示例：按月份统计选中项的Dl值变化，可替换为你需要的任意图表类型
      "mark": "bar",
      "encoding": {
        "x": {"field": "Month", "type": "temporal", "title": "月份", "axis": {"labelAngle": -45}},
        "y": {"aggregate": "sum", "field": "Dl", "type": "quantitative", "title": "Dl事件总数"},
        "color": {"value": "steelblue"}
      },
      "title": {"text": "点击上方柱形查看对应名称的细分统计", "fontSize": 12, "color": "#666"}
    }
  ]
}

扩展说明 #

• 如需展示多个关联图表，直接在vconcat数组里追加子图配置即可，所有子图加{"filter": {"param": "selectedBar"}}规则就能自动关联选中项的数据
• 如需修改选中逻辑，可调整selectedBar参数：比如加"toggle": "event.shiftKey"实现仅按住Shift点击才取消选中，默认点击空白区域即可清空选中
• 详情图支持所有Vega Lite的图表类型（折线图、饼图、散点图等），按照常规配置编写即可，数据会自动过滤为选中条形对应的子集

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