如何在Plotly choropleth等值区域图上创建点击可弹出图例的按钮

以下提供两种不同场景的可行实现方式： #

方案1：纯Plotly Python 实现（无额外依赖，直接生成可交互HTML） #

核心通过Plotly内置的updatemenus配置自定义按钮，绑定图例显隐的更新逻辑，模拟弹窗效果：

import plotly.express as px

# 加载示例数据，可替换为你的业务数据
df = px.data.gapminder().query("year==2007")
# 绘制基础等值区域图
fig = px.choropleth(df, locations="iso_alpha",
                    color="lifeExp",
                    hover_name="country",
                    color_continuous_scale=px.colors.sequential.Plasma)

# 隐藏默认图例，点击按钮后再显示
fig.update_layout(showlegend=False, coloraxis_showscale=False)

# 添加自定义按钮
fig.update_layout(
    updatemenus=[
        dict(
            type="buttons",
            direction="right",
            x=0.01,
            y=1.05,
            showactive=False,
            buttons=list([
                # 显示图例按钮
                dict(
                    label="显示图例",
                    method="update",
                    args=[{"showlegend": True, "coloraxis_showscale": True}]
                ),
                # 隐藏图例按钮
                dict(
                    label="隐藏图例",
                    method="update",
                    args=[{"showlegend": False, "coloraxis_showscale": False}]
                )
            ]),
        )
    ]
)
# 直接展示或者导出为HTML
fig.show()

你可以根据需求修改按钮的样式、位置，也可以调整图例弹出后的位置，实现和预期一致的悬浮效果。 #

方案2：Dash 框架实现（支持独立弹窗，交互效果更贴合需求） #

如果需要实现点击按钮弹出独立的模态框式图例，推荐用Dash搭配模态框组件实现，灵活度更高：

from dash import Dash, html, dcc, Input, Output, State
import plotly.express as px
from dash_bootstrap_components import Modal, ModalHeader, ModalBody, Button

# 可按需引入bootstrap样式依赖实现更美观的弹窗效果
app = Dash(__name__)

# 绘制基础等值区域图
df = px.data.gapminder().query("year==2007")
fig = px.choropleth(df, locations="iso_alpha",
                    color="lifeExp",
                    hover_name="country",
                    color_continuous_scale=px.colors.sequential.Plasma)
fig.update_layout(showlegend=False, coloraxis_showscale=False)

app.layout = html.Div([
    dcc.Graph(id='choropleth-map', figure=fig),
    # 自定义触发按钮，可修改样式匹配设计需求
    Button("查看图例", id="open-legend-btn", n_clicks=0, 
           style={"position": "absolute", "top": "20px", "left": "20px", "zIndex": 999}),
    # 弹窗组件
    Modal(id="legend-modal", is_open=False, children=[
        ModalHeader("图例说明"),
        ModalBody([
            # 这里可以放自定义图例内容，也可以单独生成只含图例的Plotly图嵌入
            html.Div([
                html.Div(style={"width": "20px", "height": "20px", "backgroundColor": "#fcae91", "display": "inline-block", "marginRight": "8px"}),
                html.Span("预期寿命 < 60岁"),
                html.Br(),
                html.Div(style={"width": "20px", "height": "20px", "backgroundColor": "#fb6a4a", "display": "inline-block", "marginRight": "8px"}),
                html.Span("预期寿命 60-70岁"),
                html.Br(),
                html.Div(style={"width": "20px", "height": "20px", "backgroundColor": "#cb181d", "display": "inline-block", "marginRight": "8px"}),
                html.Span("预期寿命 > 70岁")
            ])
        ])
    ])
])

# 回调控制弹窗显隐
@app.callback(
    Output("legend-modal", "is_open"),
    Input("open-legend-btn", "n_clicks"),
    State("legend-modal", "is_open"),
    prevent_initial_call=True
)
def toggle_modal(n_clicks, is_open):
    return not is_open

if __name__ == '__main__':
    app.run_server(debug=True)

自定义优化提示 #

• 如果需要多个按钮对应不同维度的图例，只需要新增对应按钮和回调逻辑，分别控制不同的图例内容即可
• 按钮和弹窗的样式都可以通过style参数完全自定义，匹配你的设计要求
• 若需要在纯前端Plotly.js中实现，逻辑和方案1一致，通过JS监听按钮点击事件，调用Plotly的restyle方法修改图例显隐属性即可

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