Plotly中如何保留背景色块并实现下拉框集群高亮？

核心思路 #

不要通过完全替换layout实现高亮，而是控制已有背景色块的可见性，同时配合数据系列的显示/隐藏完成集群高亮。直接更新layout会覆盖之前用add_shape()添加的所有形状，这是问题的根源。

具体实现步骤 #

1. 预先添加所有集群的背景色块
   用fig.add_shape()为每个集群添加背景色块，给每个形状设置唯一的name用于后续识别，默认可设置为隐藏（按需调整）：

   # 示例：集群范围数据，每个元素包含坐标、颜色、集群名称
   cluster_ranges = [
       (0, 5, 0, 10, "#f0f0f0", "Cluster 1"),
       (5, 10, 0, 10, "#e0e0e0", "Cluster 2")
   ]
   for x0, x1, y0, y1, color, name in cluster_ranges:
       fig.add_shape(
           type="rect",
           x0=x0, x1=x1, y0=y0, y1=y1,
           fillcolor=color,
           opacity=0.3,
           line_width=0,
           name=name,
           visible=False  # 默认隐藏，选中对应集群时再显示
       )
   

2. 配置下拉框按钮的更新逻辑
   下拉框的args不再替换整个layout，而是通过update_shapes()控制对应色块的可见性，同时用update_traces()控制数据系列的显示：

   fig.update_layout(
       updatemenus=[
           dict(
               buttons=list([
                   dict(
                       label="全部集群",
                       method="update",
                       args=[
                           {"visible": [True]*len(fig.data)},  # 显示所有数据系列
                           {"shapes": [{"visible": True}]*len(fig.layout.shapes)}  # 显示所有背景色块
                       ]
                   ),
                   dict(
                       label="Cluster 1",
                       method="update",
                       args=[
                           # 仅显示Cluster 1的数据系列
                           {"visible": [trace.name == "Cluster 1" for trace in fig.data]},
                           # 仅显示Cluster 1的背景色块
                           {"shapes": [{"visible": shape.name == "Cluster 1"} for shape in fig.layout.shapes]}
                       ]
                   ),
                   dict(
                       label="Cluster 2",
                       method="update",
                       args=[
                           {"visible": [trace.name == "Cluster 2" for trace in fig.data]},
                           {"shapes": [{"visible": shape.name == "Cluster 2"} for shape in fig.layout.shapes]}
                       ]
                   )
               ]),
               direction="down",
               showactive=True,
           )
       ]
   )
   

3. 关键注意事项

   • 确保每个shape和对应的数据系列有匹配的标识（比如name），方便精准控制可见性
   • 避免直接覆盖layout.shapes数组，通过逐个设置visible属性修改显示状态
   • 若需要默认显示某个集群，初始化时将对应shape的visible设为True即可

内容的提问来源于stack exchange，提问作者Khoa Tan Dang