在页面刷新时更新 Plotly Dash 图答案

【问题标题】：Update Plotly Dash graph on page refresh在页面刷新时更新 Plotly Dash 图
【发布时间】：2021-05-06 09:51:17
【问题描述】：

Plotly Dash 的新手。我正在完成关于我的简单示例的教程。学习如何在将新数据添加到数据框（本例中为两个数据框）时更新图表，以及如何将其与仪表板上的下拉菜单连接起来。

我希望我的图表在每次页面加载或页面刷新时都使用新数据进行更新（因为我每天只有几次更新。）这是我正在处理的代码：

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

app = dash.Dash(__name__)

data = [['Blue', 20], ['Red ', 12], ['Green', 33]]
df = pd.DataFrame(data, columns=['Color', 'Number'])
data1 = [['A', 10, 88], ['B ', 50, 45], ['C', 25, 120]]
df1 = pd.DataFrame(data1, columns=['Letter', 'Column1', 'Column2'])

fig = px.bar(df, x=df['Color'], y=df['Number'])
fig1 = px.line(x=df1['Letter'], y=df1['Column1'], color=px.Constant('Column1'),
                     labels=dict(x='Letter', y='Column1', color='Letter'))
fig1.add_bar(x=df1['Letter'], y=df1['Column2'], name='Letter')

app.layout = html.Div(children=[
    html.H1(children='Colors and Letters', style={'text-align': 'center'}),
    html.Div(children='Color', style={'text-align': 'center'}),

    html.Div([
        html.Label(['Choose a graph:'], style={'font-weight': 'bold'}),
        dcc.Dropdown(
            id='dropdown',
            options=[
                {'label': 'Colors', 'value': 'graph1'},
                {'label': 'Letters', 'value': 'graph2'},
            ],
            value='graph1',
            style={"width": "60%"}),

        html.Div(dcc.Graph(id='graph')),
    ]),

])


@app.callback(
    Output('graph', 'figure'),
    [Input(component_id='dropdown', component_property='value')]
)
def select_graph(value):
    if value == 'graph1':
        return fig
    else:
        return fig1


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

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： python graph updates plotly-dash

【解决方案1】：

如live update 部分所述，您应该能够通过定义创建布局的函数来实现所需的行为，

def layout():
   return html.Div(...)

并将此功能分配为应用布局，

app.layout = layout # note no (), you must assign the function itself, not the layout

【讨论】：