为Plotly Express Choropleth地图添加下拉按钮及报错修复、Dash适配求助

根因说明 #

update_traces() 是Plotly的原地修改方法，执行后无返回值（返回None）。你代码中直接将px.choropleth(...).update_traces(...)的结果加入trace列表，导致列表内出现None元素，触发报错。同时原代码中按钮生成逻辑放在for循环外，只会生成最后一个指标的按钮，也需要同步调整。

修复后纯Plotly代码 #

import pandas as pd
import numpy as np
import plotly.graph_objs as go
import plotly.express as px

# 请先自行定义df数据源，确保包含所需字段
# df = pd.read_csv("你的数据源路径")

cols_dd = ["Total tests", "Total cases", "Total deaths"]
visible = np.array(cols_dd)

traces = []
buttons = []
for value in cols_dd:
    # 先生成px的figure对象
    fig_px = px.choropleth(df,
            locations="Iso code",
            color=value,
            hover_data={'Iso code':False, 'Vaccines':True, 'Total tests':': ,0.f', 'Recent cases':': ,0.f', 'Total cases':': ,0.f','Total deaths':': ,0.f','Total vaccinations':': ,0.f','People vaccinated':': ,0.f','Population':': ,0.f','Vaccination policy':': 0.f'},
            color_continuous_scale="spectral_r",
            hover_name="Location",)
    # 单独调用update_traces修改可见性
    fig_px.update_traces(visible= True if value==cols_dd[0] else False)
    # 取出trace加入列表，px生成的choropleth只有1个trace，取data[0]即可
    traces.append(fig_px.data[0])
    # 按钮生成逻辑要放在for循环内，每个指标对应一个按钮
    buttons.append(dict(label=value, method="update", args=[{"visible":list(visible==value)}, {"title":f"<b>{value}</b>"}]))

updatemenus = [{"active":0,"buttons":buttons}]

layout = go.Layout(
    showlegend=True,
    font=dict(size=12),
    width = 800,
    height = 500,
    margin=dict(l=0,r=0,b=0,t=40),
    updatemenus=updatemenus
)

fig = go.Figure(data=traces, layout=layout)
first_title = cols_dd[0]
fig.update_geos(scope="africa")
fig.update_layout(title=f"<b>{first_title}</b>",title_x=0.5)
fig.show()

以下是适配Dash的下拉切换 choropleth 地图的实现代码，交互更灵活：

import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import pandas as pd

# 初始化Dash应用
app = dash.Dash(__name__)

# 自行加载数据源
# df = pd.read_csv("你的数据源路径")
cols_dd = ["Total tests", "Total cases", "Total deaths"]

app.layout = html.Div([
    html.H4("非洲疫情指标地图", style={"textAlign": "center"}),
    # 下拉选择器
    dcc.Dropdown(
        id="metric-select",
        options=[{"label": col, "value": col} for col in cols_dd],
        value=cols_dd[0],
        clearable=False,
        style={"width": "50%", "margin": "0 auto 20px"}
    ),
    # 地图容器
    dcc.Graph(id="choropleth-map", style={"height": "600px"})
])

@app.callback(
    Output("choropleth-map", "figure"),
    Input("metric-select", "value")
)
def update_map(selected_metric):
    fig = px.choropleth(df,
            locations="Iso code",
            color=selected_metric,
            hover_data={'Iso code':False, 'Vaccines':True, 'Total tests':': ,0.f', 'Recent cases':': ,0.f', 'Total cases':': ,0.f','Total deaths':': ,0.f','Total vaccinations':': ,0.f','People vaccinated':': ,0.f','Population':': ,0.f','Vaccination policy':': 0.f'},
            color_continuous_scale="spectral_r",
            hover_name="Location",
            title=f"<b>{selected_metric}</b>"
    )
    fig.update_geos(scope="africa")
    fig.update_layout(title_x=0.5, margin=dict(l=0,r=0,b=0,t=40))
    return fig

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

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