You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

基于Dash/Plotly实现choropleth图下拉菜单切换CSV多列数据

Plotly choropleth地图添加下拉切换字段方案

以下是修改后的完整代码,你只需要将代码中可切换字段配置部分的字段名、色阶、数值范围替换为你实际的另外两列字段的对应参数即可:

import pandas as pd
import plotly.express as px

# 加载数据
df = pd.read_csv("ALLCOUNTRIES-PREDICTED.csv", header=0, encoding="utf-8")

# -------------------------- 可切换字段配置,按需修改 --------------------------
# 三个元素分别对应 New Cases、你的另外两个字段,可修改显示名称、列名、色阶、数值范围
switch_conf = [
    {"show_name": "新增病例", "col_name": "New Cases", "color": "Reds", "value_range": [0, 10000]},
    {"show_name": "替换为你的字段1显示名", "col_name": "替换为你的字段1列名", "color": "Blues", "value_range": [0, 50000]},
    {"show_name": "替换为你的字段2显示名", "col_name": "替换为你的字段2列名", "color": "Greens", "value_range": [0, 2000]}
]
# ---------------------------------------------------------------------------

# 生成初始地图(默认加载第一个配置的字段)
fig = px.choropleth(df,                                   
                 locations="iso_alpha_3",
                 color=switch_conf[0]["col_name"],
                 hover_name="Country",                                 
                 animation_frame="Date",
                 projection="equirectangular",
                 color_continuous_scale = switch_conf[0]["color"],
                 range_color=switch_conf[0]["value_range"]
                 )

# 配置下拉菜单按钮
buttons = []
for conf in switch_conf:
    buttons.append(
        dict(
            label=conf["show_name"],
            method="update",
            args=[
                # 第一部分:修改轨迹属性
                {"z": [df[conf["col_name"]]]},
                # 第二部分:修改颜色轴配置
                {
                    "coloraxis": {
                        "colorbar": {"title": conf["show_name"]},
                        "colorscale": conf["color"],
                        "cmin": conf["value_range"][0],
                        "cmax": conf["value_range"][1]
                    }
                },
                # 第三部分:同步更新所有动画帧的配置
                [f.name for f in fig.frames]
            ]
        )
    )

# 把下拉菜单添加到图表布局中
fig.update_layout(
    updatemenus=[
        dict(
            active=0,  # 默认选中第一个按钮
            buttons=buttons,
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=0.1,  # 下拉菜单x轴位置
            xanchor="left",
            y=1.15, # 下拉菜单y轴位置,放在地图上方避免遮挡
            yanchor="top"
        )
    ],
    # 配置颜色条标题
    coloraxis_colorbar_title=switch_conf[0]["show_name"]
)

fig.show()
fig.write_html("example_map1.html")

修改说明

  • 新增了可切换字段的统一配置项,方便你后续调整字段、色阶、数值范围
  • 下拉菜单的每个按钮绑定了字段切换逻辑,点击后会同步更新当前地图的数值字段、色阶、数值范围,同时所有日期的动画帧内容也会同步切换
  • 下拉菜单默认放在地图上方,你可以调整配置里的x、y参数修改位置

内容的提问来源于stack exchange,提问作者dhuhahuss

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 06:06:08