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

Python Plotly choropleth 下拉选变量+时间滑块及新增数据列实现

实现方法

你可以通过预生成全量图层+双控件联动的方式实现需求,核心是把下拉菜单和时间滑块的更新事件做绑定,切换变量时同步切换滑块控制的图层范围,具体改动步骤如下:

  • 预加载所有待展示变量的时序数据,为每个变量的每一个时间节点生成独立的choropleth图层,默认仅展示第一个变量首个时间节点的图层,其余图层设为隐藏
  • 为每个变量单独生成对应的时间滑块配置,滑块步骤仅控制当前变量所属的图层显隐
  • 添加下拉选择控件,绑定切换逻辑:选中某变量时,同步更新图层可见性、滑块配置、地图标题
  • 修正原示例缺失的pandas导入,避免运行报错

完整可运行代码
import pandas as pd
import plotly
import numpy as np

plotly.offline.init_notebook_mode()

# 加载基础数据
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv')

# 配置要展示的变量列表、时间节点
show_vars = ["total exports", "beef", "pork", "fruits fresh"]
years = list(range(1980, 1986))  # 对应6个时间节点
n_years = len(years)

data = []
var_layer_range = {}  # 记录每个变量对应的图层索引区间
current_idx = 0

# 为每个变量生成所有年份的图层
for var in show_vars:
    base_z = df[var].astype(float).values
    start_idx = current_idx
    # 生成该变量逐年的模拟数据,真实场景替换为实际时序值即可
    for year_idx in range(n_years):
        # 第一年用原始值,后续年份做随机波动模拟
        if year_idx == 0:
            z_val = base_z
        else:
            z_val = base_z * (0.7 + np.random.rand(*base_z.shape)*0.6)
        layer = dict(
            type='choropleth',
            locations=df['code'].astype(str),
            z=z_val,
            locationmode='USA-states',
            colorscale='Blues',
            colorbar=dict(title=var),
            visible=(current_idx == 0)  # 默认只显示第一个变量第一个年份
        )
        data.append(layer)
        current_idx += 1
    end_idx = current_idx - 1
    var_layer_range[var] = (start_idx, end_idx)

# 为每个变量生成专属滑块配置
var_sliders = {}
for var in show_vars:
    s_idx, e_idx = var_layer_range[var]
    steps = []
    for i in range(n_years):
        layer_pos = s_idx + i
        # 可见性规则:仅当前年份的图层显示
        visible_arr = [False]*len(data)
        visible_arr[layer_pos] = True
        step = dict(
            method='restyle',
            args=['visible', visible_arr],
            label=str(years[i])
        )
        steps.append(step)
    var_sliders[var] = [dict(
        active=0,
        pad={"t": 50},
        steps=steps
    )]

# 生成下拉菜单按钮
dropdown_buttons = []
for var in show_vars:
    s_idx, e_idx = var_layer_range[var]
    # 选中该变量时的初始可见性:显示该变量第一个年份
    init_visible = [False]*len(data)
    init_visible[s_idx] = True
    button = dict(
        label=var,
        method='update',
        args=[
            {'visible': init_visible},
            {'sliders': var_sliders[var], 'title': f'美国农业{var}分布'}
        ]
    )
    dropdown_buttons.append(button)

# 布局配置
layout = dict(
    title=f'美国农业{show_vars[0]}分布',
    geo=dict(scope='usa', projection={'type': 'albers usa'}),
    sliders=var_sliders[show_vars[0]],  # 默认加载第一个变量的滑块
    updatemenus=[dict(
        buttons=dropdown_buttons,
        direction='down',
        showactive=True,
        x=0.1,
        y=1.15,
        xanchor='left',
        yanchor='top'
    )]
)

fig = dict(data=data, layout=layout)
plotly.offline.iplot(fig)

关键说明
  • 代码中用随机数模拟了各变量的逐年波动,替换为真实业务数据时,只需把z_val的生成逻辑替换为对应变量、对应年份的真实值即可,交互部分不需要调整
  • 如果需要固定所有变量、所有年份的统一色阶,可以在每个choropleth图层中添加zmin和zmax参数,传入全局最小、最大值即可
  • 下拉菜单和滑块的位置可以通过布局里的x/y/pad参数调整,避免遮挡地图内容
  • 时间粒度不局限于年份,替换years列表为季度、月份等时间标签即可适配不同场景

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.26 22:45:46