Plotly中fig.add_shape图例分组功能失效问题求助

你遇到的是Plotly的shape组件（vrect、vline属于shape）和trace组件在图例分组支持上的差异问题——shape的legendgroup并不能像trace那样自动关联同组内的所有元素，只有第一个设置了showlegend=True的shape会绑定图例项，后续同组shape不会响应图例的点击切换，这是Plotly当前的设计限制，不算严格意义上的bug，但确实和trace的表现不一致。

下面给两个可行的解决方案：

方案一：将shape转换为trace实现（推荐） #

既然trace的legendgroup功能正常，我们可以把vrect和vline转换成对应的trace类型：

• vrect → 用go.Scatter绘制填充区域（通过fill='toself'实现）
• vline → 用go.Scatter绘制竖直线段（设置mode='lines'，x轴为同一个值，y轴覆盖整个图表范围）

修改后的代码示例：

import plotly.graph_objects as go
from tqdm import tqdm

# 假设你已初始化子图：fig = make_subplots(rows=3, cols=1)
show_legend = True
for depot in tqdm(depots):
    mask = df_results['depot_drive'] == depot
    changes = mask.ne(mask.shift()).cumsum()
    for _, group in df_results[mask].groupby(changes[mask]):
        start = group['event_timestamp'].iloc[0]
        end = group['event_timestamp'].iloc[-1]
        color = depot_colors[depot]
        fill_color = color.replace('rgb', 'rgba').replace(')', ',0.2)')
        
        # 遍历每个子图行
        for row in [1, 2, 3]:
            # 替换vrect：用Scatter绘制填充区域
            y_range = fig.layout[f'yaxis{row}'].range or [0, 100] # 替换为你的y轴实际范围
            fig.add_trace(
                go.Scatter(
                    x=[start, start, end, end, start],
                    y=[y_range[0], y_range[1], y_range[1], y_range[0], y_range[0]],
                    fill='toself',
                    fillcolor=fill_color,
                    line=dict(width=0),
                    name="Depots",
                    legendgroup="Depots",
                    showlegend=show_legend and row == 1,
                    legend="legend1",
                    hoverinfo='skip'
                ),
                row=row, col=1
            )
            
            # 替换vline：用Scatter绘制竖直线（start位置）
            fig.add_trace(
                go.Scatter(
                    x=[start, start],
                    y=y_range,
                    mode='lines',
                    line=dict(width=2, color=color, dash='solid'),
                    name="Depots",
                    legendgroup="Depots",
                    showlegend=False,
                    legend="legend1",
                    hoverinfo='skip'
                ),
                row=row, col=1
            )
            
            # 替换vline：用Scatter绘制竖直线（end位置）
            fig.add_trace(
                go.Scatter(
                    x=[end, end],
                    y=y_range,
                    mode='lines',
                    line=dict(width=2, color=color, dash='solid'),
                    name="Depots",
                    legendgroup="Depots",
                    showlegend=False,
                    legend="legend1",
                    hoverinfo='skip'
                ),
                row=row, col=1
            )
    show_legend = False

注意：如果子图的y轴范围是动态生成的，建议先通过fig.update_layout()手动设置固定范围，确保填充区域和竖线能覆盖整个图表高度。

方案二：用JS回调监听图例点击（适合纯Plotly场景） #

如果不想修改shape为trace，可以通过自定义JavaScript代码监听图例点击事件，手动切换所有同组shape的可见性。

在生成的HTML中添加如下代码（若用Notebook，可通过fig.write_html()输出后嵌入，或直接在单元格中执行JS）：

document.addEventListener('DOMContentLoaded', function() {
    var plotDiv = document.getElementById('your-plot-id'); // 替换为你的图表DOM ID
    Plotly.addListener(plotDiv, 'legendclick', function(data) {
        var targetGroup = data.curve.legendgroup;
        if (targetGroup === 'Depots') {
            var shapes = plotDiv.layout.shapes;
            shapes.forEach(shape => {
                if (shape.legendgroup === 'Depots') {
                    shape.visible = !shape.visible;
                }
            });
            Plotly.relayout(plotDiv, {shapes: shapes});
        }
    });
});

需注意图表ID的正确性，确保JS代码在图表完全加载后执行。

补充说明 #

你之前尝试的「隐形trace」方法无效，是因为shape和trace的图例系统相互独立，trace的legendgroup无法关联shape的可见性。必须让shape直接绑定图例点击事件，或用trace替代shape才能利用原生的legendgroup同步功能。

内容的提问来源于stack exchange，提问作者Lobna Hisham Eldeeb