python - Plotly-Dash:下拉选项可以工作，但不会绘制数据

Question

我是达世币新手。我正在尝试绘制一个简单的线图并添加一个下拉列表来更改来自数据帧的数据(与其他数据帧嵌套在字典中)。这是数据框:

df_vals['corn']

time    2m_temp_prod    2m_temp_area    total_precip_prod   total_precip_area
0   2020-09-19 00:00:00 299.346777  299.799234  0.000000    0.000000
1   2020-09-19 06:00:00 294.039512  294.443352  0.191070    0.286952
2   2020-09-19 12:00:00 292.959274  293.182931  0.155765    0.216606
3   2020-09-19 18:00:00 301.318046  301.767516  0.421768    0.485691
4   2020-09-20 00:00:00 300.623567  300.979650  0.363572    0.501164
... ... ... ... ... ...
56  2020-10-03 00:00:00 301.177141  301.052273  0.371209    0.408515
57  2020-10-03 06:00:00 295.874298  295.720135  0.281793    0.300564
58  2020-10-03 12:00:00 293.838787  293.686738  0.586887    0.549365
59  2020-10-03 18:00:00 302.384474  302.191334  0.492712    0.493798
60  2020-10-04 00:00:00 300.920766  300.817993  0.522374    0.531138

这是我尝试绘图的代码。

app = JupyterDash(__name__)
cols=df_vals['corn'].columns[1:]
app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='variables',
                options=[{'label': i, 'value': i} for i in cols],
                value='2m_temp_prod'
            )
        ]),
    dcc.Graph(id='plot')])
])

@app.callback(
    Output('plot', 'figure'),
    [Input('variables', 'value')])

def update_graph(variable_name):
    fig=px.line(x=df_vals['corn']['time'], y=df_vals['corn'][variable_name])
    return fig

app.run_server(mode='inline')

这会生成具有正确下拉选项的绘图，但没有绘制任何数据。我在这里做错了什么？尝试按照 Dash 网站上的教程进行操作，但似乎遇到了一些问题。

Answer 1

您似乎已经接近解决方案了。我实际上认为您只是忘记了导入plotly.express as px。我花时间根据您在问题中提供的数据制作了适当的数据样本。在没有任何导入信息的情况下，我只需要选择标准的plotly 和 JupyteDash 导入即可。无论如何，下面的代码片段将产生以下 plotly 。请看一下我如何设置您的数据框。如果您花几分钟时间阅读 this post，您可以学会进行相同的设置。 .

Dash 应用程序 - 图 1

下拉选择 = '2m_temp_prod'

Dash 应用 - 图 2

**下拉选择 = 'total_precip_prod''

完整代码

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import numpy as np
from plotly.subplots import make_subplots
import plotly.express as px

df=pd.DataFrame({'time':{0:'2020-09-1900:00:00',
                        1:'2020-09-1906:00:00',
                        2:'2020-09-1912:00:00',
                        3:'2020-09-1918:00:00',
                        4:'2020-09-2000:00:00',
                        5:'2020-10-0300:00:00',
                        6:'2020-10-0306:00:00',
                        7:'2020-10-0312:00:00',
                        8:'2020-10-0318:00:00',
                        60:'2020-10-0400:00:00'},
                        '2m_temp_prod':{0:299.346777,
                        1:294.039512,
                        2:292.95927400000005,
                        3:301.318046,
                        4:300.623567,
                        5:301.177141,
                        6:295.874298,
                        7:293.838787,
                        8:302.384474,
                        60:300.920766},
                        '2m_temp_area':{0:299.799234,
                        1:294.443352,
                        2:293.182931,
                        3:301.767516,
                        4:300.97965,
                        5:301.052273,
                        6:295.720135,
                        7:293.686738,
                        8:302.191334,
                        60:300.817993},
                        'total_precip_prod':{0:0.0,
                        1:0.19107000000000002,
                        2:0.15576500000000001,
                        3:0.42176800000000003,
                        4:0.363572,
                        5:0.371209,
                        6:0.28179299999999996,
                        7:0.5868869999999999,
                        8:0.492712,
                        60:0.522374},
                        'total_precip_area':{0:0.0,
                        1:0.286952,
                        2:0.216606,
                        3:0.485691,
                        4:0.501164,
                        5:0.408515,
                        6:0.300564,
                        7:0.549365,
                        8:0.49379799999999996,
                        60:0.531138}})

df_vals = {'corn':df}

app = JupyterDash(__name__)
cols=df_vals['corn'].columns[1:]

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                id='variables',
                options=[{'label': i, 'value': i} for i in cols],
                value='2m_temp_prod'
            )
        ]),
    dcc.Graph(id='plot')])
])

@app.callback(
    Output('plot', 'figure'),
    [Input('variables', 'value')])

def update_graph(variable_name):
    fig=px.line(x=df_vals['corn']['time'], y=df_vals['corn'][variable_name])
    fig.update_layout(template='plotly_dark')
    return fig

app.run_server(mode='inline', debug=True)