Plotly Dash中设置图例水平缩小及避免图表遮挡的问题

针对你用两个px.choropleth_mapbox()合并后出现的图例不生效、地图被遮挡问题，核心要区分**离散图例（"No Data"）和连续颜色条（"Number of Disconnections"）**的不同设置逻辑，以下是具体解决方案：

核心修改思路 #

1. 调整图表边距，为底部水平图例预留空间，避免遮挡地图
2. 分别配置离散图例和连续颜色条的位置、样式，实现浮动效果

完整代码示例 #

# 假设你已完成两个地图的绘制与合并，以下是布局调整代码
fig.update_layout(
    # 调整边距，底部预留足够空间放两个水平图例
    margin=dict(l=20, r=20, b=80, t=20, pad=4),
    # 配置离散图例（对应"No Data"）
    legend=dict(
        orientation="h",  # 水平布局
        yanchor="top",
        y=-0.1,  # 将图例放在图表外部底部（y<0表示在画布下方）
        xanchor="right",
        x=1,  # 对齐右下角
        bgcolor="rgba(255,255,255,0.8)",  # 半透明背景实现浮动效果
        bordercolor="rgba(0,0,0,0.2)",
        borderwidth=1
    )
)

# 配置连续颜色条（对应"Number of Disconnections"）
fig.update_coloraxes(
    colorbar=dict(
        orientation="h",  # 水平布局
        yanchor="top",
        y=-0.25,  # 放在离散图例下方，避免重叠
        xanchor="right",
        x=1,  # 对齐右下角
        len=0.6,  # 缩短颜色条长度，避免过宽
        title_text="Number of Disconnections",
        bgcolor="rgba(255,255,255,0.8)",
        bordercolor="rgba(0,0,0,0.2)",
        borderwidth=1
    )
)

关键说明 #

• 之前设置y=1.02会将图例放在图表顶部外侧，容易被忽略；改为y=-0.1将图例移到画布底部外侧，既不遮挡地图，又符合右下角布局需求
• 为两个图例设置半透明背景（rgba），实现「浮动」视觉效果
• 调整margin的b值（底部边距），确保图例不会挤压地图空间
• 离散图例和颜色条分别通过update_layout(legend=...)和update_coloraxes(colorbar=...)配置，不会互相覆盖

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