Plotly Dash Heatmap 未通过下拉选择更新答案

【问题标题】：Plotly Dash Heatmap not updating with dropdown selectionPlotly Dash Heatmap 未通过下拉选择更新
【发布时间】：2021-11-16 05:38:48
【问题描述】：

我是 plotly dash 的新手，我正在尝试制作一个随下拉选择而变化的热图。下拉菜单是选择月份，但热图没有变化！我的数据框称为“新”。这是我的代码：

Month_Default = New['Month'].unique()
Month_def = 2
#create the dash app
app = dash.Dash()

app.layout = html.Div([
 html.H1('//Title'),
 html.Div([
 html.Div([
 html.H4('Select Month...'),
 dcc.Dropdown(
 id='Month_dropdown',
 options=[{'label': i, 'value': i} for i in Month_Default],
 value = Month_Def
 ),
 ],
 style={'width': '48%', 'display': 'inline-block'}),
 

 dcc.Graph(id='heatmap', 
 figure = {
 'data': [go.Heatmap(
 x=New['Days'].where(New['Month']==2),
 y=New['Hour'],
 z=New['Usage'],
 
 colorscale='Viridis')],
 'layout': go.Layout(
 xaxis = dict(title = 'Days'),
 yaxis = dict( title = 'Hours'),
 )})
 ]),])



@app.callback(
    dash.dependencies.Output(component_id='heatmap',component_property='figure'),
    [dash.dependencies.Input(component_id='Month_dropdown',component_property='value')]
)



def update_graph(Month_dropdown):
    filtered_df = New[New['Month'] == Month_dropdown]
    heat_fig = go.Heatmap(filtered_df,
                       x='Days', y='Hour', z='Usage',
                       colorscale='Viridis',
                       title='PM KWH Usage')
    return heat_fig

【问题讨论】：

您能否提供您的 DataFrame New 的示例，或将与您的代码一起运行的类似 DataFrame？目前您的问题将难以重现，因为我们不知道 New 的样子
New 是一个有 4 列的数据框，其中一列是“月份”，其中包括 5 个月的日期。一列用于“小时”，一列用于“天”，每个月的每一天都包含 24 小时。最后一列是“使用情况”，这是我想在热图中显示的值。 X 轴代表一个月的 30-31 天，y 轴代表 24 小时，z 轴代表每个小时的使用值。下拉菜单是选择月份并显示相应的热图。谢谢！

标签： drop-down-menu plotly heatmap plotly-dash plotly-python

【解决方案1】：

已按照您在 cmets 中描述的方式创建了 New 数据框
使用 dash 2.0.0 因此只需要import dash
错过了两个关键步骤
1. 没有app.run_server() 启动dash应用
2. 没有响应下拉菜单的回调
dash layout 和 callback 中没有重复代码，而是将 figure 创建移至 callback

import dash
from jupyter_dash import JupyterDash
import plotly.graph_objects as go
from dash.dependencies import Input, Output, State
import pandas as pd
import numpy as np

New = pd.DataFrame(
    {"date": pd.date_range("1-jan-2021", "15-jun-2021", freq="H")}
).assign(
    Usage=lambda d: np.random.uniform(0, 1, len(d)),
    Month=lambda d: d["date"].dt.month,
    Days=lambda d: d["date"].dt.day,
    Hour=lambda d: d["date"].dt.hour,
)

Month_Default = New["Month"].unique()
Month_def = 2
# create the dash app
# app = dash.Dash()
app = JupyterDash(__name__)

app.layout = dash.html.Div(
    [
        dash.html.H1("//Title"),
        dash.html.Div(
            [
                dash.html.Div(
                    [
                        dash.html.H4("Select Month..."),
                        dash.dcc.Dropdown(
                            id="Month_dropdown",
                            options=[{"label": i, "value": i} for i in Month_Default],
                            value=Month_def,
                        ),
                    ],
                    style={"width": "48%", "display": "inline-block"},
                ),
                dash.dcc.Graph(id="heatmap"),
            ]
        ),
    ]
)

@app.callback(Output("heatmap", "figure"), Input("Month_dropdown", "value"))
def updateGraph(value):
    if not value:
        value = Month_def

    return {
        "data": [
            go.Heatmap(
                x=New["Days"].where(New["Month"] == value),
                y=New["Hour"],
                z=New["Usage"],
                colorscale="Viridis",
            )
        ],
        "layout": go.Layout(
            xaxis=dict(title="Days"),
            yaxis=dict(title="Hours"),
            margin={"l": 0, "r": 0, "t": 0, "b": 0},
        ),
    }

app.run_server(mode="inline")

【讨论】：