如何在Plotly Dash中创建关联两个Pandas DF下拉框的热图应用

核心逻辑很简单：先从Pandas DataFrame中提取两个下拉框的可选值，再通过Dash回调监听下拉框的取值变化，动态筛选数据后更新热图即可。

分步实现要点 #

• 依赖导入
  优先使用Dash 2.0+的简化导入方式，减少冗余代码：

  from dash import Dash, dcc, html, Input, Output, callback
  import plotly.express as px
  import pandas as pd
  import numpy as np
  

• 下拉框选项生成
  直接从DataFrame指定列的唯一值生成下拉框选项，示例如下：

  # 替换为你的真实DataFrame
  df = pd.DataFrame({
      "品类": ["电子产品", "家居用品", "服饰", "食品"]*12,
      "地区": ["华东", "华北", "华南", "西南"]*12,
      "月份": [f"{i}月" for i in range(1,13) for _ in range(4)],
      "销售额": [int(i) for i in np.random.randint(1000, 10000, 48)]
  })
  # 生成第一个下拉框选项：取品类列的唯一值
  dropdown1_options = [{"label": i, "value": i} for i in df["品类"].unique()]
  # 生成第二个下拉框选项：取地区列的唯一值
  dropdown2_options = [{"label": i, "value": i} for i in df["地区"].unique()]
  

• 页面布局定义
  布局中依次放置两个下拉框和热图渲染组件：

  app = Dash(__name__)
  app.layout = html.Div([
      html.Div([
          html.Div([
              html.Label("选择品类："),
              dcc.Dropdown(id="my_dropdown1", options=dropdown1_options, value="电子产品")
          ], style={"width": "45%", "display": "inline-block", "margin-right": "5%"}),
          html.Div([
              html.Label("选择地区："),
              dcc.Dropdown(id="my_dropdown2", options=dropdown2_options, value="华东")
          ], style={"width": "45%", "display": "inline-block"})
      ]),
      dcc.Graph(id="heatmap-graph")
  ])
  

• 联动回调编写
  监听两个下拉框的取值变化，筛选数据后生成热图返回：

  @callback(
      Output("heatmap-graph", "figure"),
      Input("my_dropdown1", "value"),
      Input("my_dropdown2", "value")
  )
  def update_heatmap(selected_category, selected_region):
      # 按下拉框选中值筛选数据
      filtered_df = df[(df["品类"] == selected_category) & (df["地区"] == selected_region)]
      # 生成热图，此处x为月份、y为品类、值为销售额，可根据你的需求调整字段
      fig = px.density_heatmap(filtered_df, x="月份", y="品类", z="销售额", 
                              title=f"{selected_region}地区{selected_category}月度销售额热图")
      return fig
  

• 启动应用

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

常见优化点 #

• 如果你的DataFrame会动态更新，可以额外加回调动态更新两个下拉框的options属性，避免选项过时
• 数据量较大时可以给热图组件套dcc.Loading，避免页面空白无反馈
• 筛选后数据为空时可以加判断，返回默认提示图避免报错

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