Plotly分组条形图点击跳转散点图索引报错如何解决

你报错的核心原因是混淆了Matplotlib和Plotly的对象API逻辑：

• Matplotlib的Figure对象支持通过索引fig[行,列]获取子图Axes对象，但Plotly的graph_objects.Figure完全没有这种索引语法，和你是否是单张子图没有关系，两个库的事件绑定逻辑完全不通用，不能直接迁移Matplotlib的写法。

Plotly的点击交互通过回调函数实现，你可以提前给每个条形绑定对应类别的标识，点击时获取到对应类别后调取预存的散点数据绘图即可，以下是Jupyter环境下最便捷的实现方式：

步骤1：构建带自定义数据的条形图 #

给每个条形的customdata属性绑定对应的类别名，点击时可以直接读取该值：

import plotly.graph_objects as go

# 替换为你自己的实际数据
x_cats = ["class1", "class2", "class3", "class4", "class5", "class6", "class7"]
length_values = [12, 25, 18, 32, 27, 19, 23]
number_values = [8, 16, 22, 14, 30, 21, 17]
# 你预先存储的每个类别散点数据，格式示例：scatter_data = {"class1": {"x": [1,2,3], "y": [4,5,6]}, ...}
scatter_data = {}

# 用FigureWidget创建支持交互回调的条形图
bar_fig = go.FigureWidget()
# 添加Length系列条形
bar_fig.add_trace(go.Bar(
    x=x_cats,
    y=length_values,
    name="Length",
    customdata=x_cats, # 每个条形绑定对应类别
    hovertemplate="类别：%{x}<br>Length值：%{y}<extra></extra>"
))
# 添加Number系列条形
bar_fig.add_trace(go.Bar(
    x=x_cats,
    y=number_values,
    name="Number",
    customdata=x_cats,
    hovertemplate="类别：%{x}<br>Number值：%{y}<extra></extra>"
))
bar_fig.update_layout(barmode="group", xaxis_title="类别", yaxis_title="数值")

步骤2：定义点击回调绑定事件 #

创建散点图容器，定义点击条形时的更新逻辑，再给所有条形系列绑定回调：

# 创建散点图容器
scatter_fig = go.FigureWidget(go.Scatter(x=[], y=[], mode="markers"))
scatter_fig.update_layout(title="选中类别散点图", xaxis_title="横轴", yaxis_title="纵轴")

# 定义点击事件回调函数
def bar_click_callback(trace, points, selector):
    if not points.point_inds:
        return
    # 读取点击条形绑定的类别
    selected_cat = trace.customdata[points.point_inds[0]]
    # 调取对应类别的散点数据更新绘图
    cat_data = scatter_data[selected_cat]
    with scatter_fig.batch_update():
        scatter_fig.data[0].x = cat_data["x"]
        scatter_fig.data[0].y = cat_data["y"]
        scatter_fig.update_layout(title=f"{selected_cat} 类别散点图")

# 给两个条形系列都绑定点击事件
for trace in bar_fig.data:
    trace.on_click(bar_click_callback)

步骤3：组合显示图表 #

from ipywidgets import VBox
# 垂直排列显示条形图和散点图，点击条形即可自动更新下方散点图
VBox([bar_fig, scatter_fig])

如果需要把功能部署为独立网页应用，可以使用Plotly官方的Dash框架，核心逻辑和上述一致：通过回调读取点击条形的customdata，再返回对应散点图即可。

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