带有 DASH 的仪表板 - 参数问题 dcc.graph()

Posted 2023-03-22

【中文标题】带有 DASH 的仪表板 - 参数问题 dcc.graph()

【英文标题】：Dashboard with DASH - Argument issues dcc.graph()

【发布时间】：2021-09-23 15:53:49

【问题描述】：

我正在尝试使用破折号在 Pycharm 中创建仪表板。这是我不断收到的错误，

 html.Div(dcc.Graph(id='line-plot')),
TypeError: Graph() takes no arguments

下面是我发现错误的代码的 sn-p（代码底部）。这段代码运行良好，我正要填充仪表板，而在 IBM 的 python 环境中没有收到任何错误。我假设我必须调整一些东西

   # TASK 3 - UPDATE LAYOUT COMPONENETS
# html.H1 tag for title  , style, and overall font size
# html.Div  & dcc.Input() tag to set inputs of the dashboard
# Update output componenent 2nd html.Div to layout the graph dcc.Graph()
app.layout = html.Div(children=[html.H1('Airline Performance Dashboard',
                                        style='textAlign': 'center', 'color': '#503D36',
                                               'font-size': 40),
                                html.Div(["Input Year: ", dcc.Input(id='input-year', value='2010',
                                                                    type='number',
                                                                    style='height': '50px', 'font-size': 35), ],
                                         style='font-size': 40),
                                html.Br(),
                                html.Br(),
                                html.Div(dcc.Graph(id='line-plot')),
                                ])

这是剩下的代码，

# TASK 4 - ADD APPLICATION CALL BACK FUNCTION and outputs / inputs
# add callback decorator
@app.callback(Output(component_id='line-plot', component_property='figure'),
              Input(component_id='input-year', component_property='value'))
# Add computation to callback function and return graph
def get_graph(entered_year):
    # Select 2019 data
    df = airline_data[airline_data['Year'] == int(entered_year)]

    # Group the data by Month and compute average over arrival delay time.
    line_data = df.groupby('Month')['ArrDelay'].mean().reset_index()
    # TASK 5 - UPDATE CALL BACK FUNCTION go.Figure(data=) and update fig.update_layout()
    fig = go.Figure(
        data=go.Scatter(x=line_data['Month'], y=line_data['ArrDelay'], mode='lines', marker=dict(color='green')))
    fig.update_layout(title='Month vs Average Flight Delay Time', xaxis_title='Month', yaxis_title='ArrDelay')
    return fig


# Run the app
if __name__ == '__main__':
    app.run_server()

可以肯定地说我需要一个成年人。

【参考方案1】：

已添加

导入

和模拟数据框 所有其他代码在

plotly 5.1.0

上运行没有问题

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go
from jupyter_dash import JupyterDash
import numpy as np

app = JupyterDash(__name__)

# simulate data...
dr = pd.date_range("1-jan-2010", freq="W", periods=200)
airline_data = pd.DataFrame("Year":dr.year, "Month":dr.month, "ArrDelay":np.random.uniform(2,5,len(dr)))

# TASK 3 - UPDATE LAYOUT COMPONENETS
# html.H1 tag for title  , style, and overall font size
# html.Div  & dcc.Input() tag to set inputs of the dashboard
# Update output componenent 2nd html.Div to layout the graph dcc.Graph()
app.layout = html.Div(children=[html.H1('Airline Performance Dashboard',
                                        style='textAlign': 'center', 'color': '#503D36',
                                               'font-size': 40),
                                html.Div(["Input Year: ", dcc.Input(id='input-year', value='2010',
                                                                    type='number',
                                                                    style='height': '50px', 'font-size': 35), ],
                                         style='font-size': 40),
                                html.Br(),
                                html.Br(),
                                html.Div(dcc.Graph(id='line-plot')),
                                ])

# TASK 4 - ADD APPLICATION CALL BACK FUNCTION and outputs / inputs
# add callback decorator
@app.callback(Output(component_id='line-plot', component_property='figure'),
              Input(component_id='input-year', component_property='value'))
# Add computation to callback function and return graph
def get_graph(entered_year):
    # Select 2019 data
    df = airline_data[airline_data['Year'] == int(entered_year)]

    # Group the data by Month and compute average over arrival delay time.
    line_data = df.groupby('Month')['ArrDelay'].mean().reset_index()
    # TASK 5 - UPDATE CALL BACK FUNCTION go.Figure(data=) and update fig.update_layout()
    fig = go.Figure(
        data=go.Scatter(x=line_data['Month'], y=line_data['ArrDelay'], mode='lines', marker=dict(color='green')))
    fig.update_layout(title='Month vs Average Flight Delay Time', xaxis_title='Month', yaxis_title='ArrDelay')
    return fig


app.run_server(mode="inline")