Блог

У меня есть два обратных вызова из выпадающих меню, которые должны привести к datatable. Существует база данных, состоящая из кода ввода, типа автомобиля и года. Выпадающее меню позволит вам выбрать автомобиль, а затем год, и результирующая таблица данных должна представлять собой список всех выбранных автомобилей и всех автомобилей новее выбранного года.

 external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

dataa = [[‘ABQ’,‘Toyota’,2015],[‘QRC’,‘Honda’,2016],[‘BFG’,‘Honda’,2017],[‘AAA’,‘Toyota’,2018],[‘KLX’,‘Toyota’,2020]]
dframe = pd.DataFrame(dataa,columns=[‘Entry’,‘Car’, ‘Year’])

app.layout = html.Div([

html.Label("Name:", style={'fontSize':70, 'textAlign':'center'}),

dcc.Dropdown(
    id='cars-dpdn',
    options=[{'label': s, 'value': s} for s in sorted(dframe.Car.unique())],

    clearable=False
),

html.Label("Year", style={'fontSize':30, 'textAlign':'center'}),
dcc.Dropdown(
    id='years-dpdn', 
    options=[],
),

html.Label("Results:", style={'fontSize':70, 'textAlign':'center'}),

html.Div(id="table1")
])

@app.callback(
Output(‘years-dpdn’, ‘options’),
Input(‘cars-dpdn’, ‘value’)
)
def years(chosen_car):
dff = dframe[dframe.Car==chosen_car]
return [{‘label’: c, ‘value’: c} for c in sorted(dff.Year.unique())]

@app.callback(
Output(‘years-dpdn’, ‘value’),
Input(‘years-dpdn’, ‘options’)
)
def years_value(available_options):
return [x[‘value’] for x in available_options]

@app.callback(
Output(‘table1’, ‘figure’),
Input(‘cars-dpdn’, ‘value’),
Input(‘years-dpdn’, ‘value’),
)

def update_table(car, year):

dfa = dframe[dframe['Car']==car]
dfb = dfa[dfa['Year']>year]

return html.Div([dash_table.DataTable(
    data=dfb.to_dict('rows'),
    columns=[{'name': i, 'id': i} for i in dfb.columns],
    ),
    html.Hr()
                ])
if name == ‘main’:
app.run_server(debug=False, port = 3060)
 

Выпадающие меню работают правильно, позволяя мне выбрать значение автомобиля и года, однако таблица не создается. Он просто пустой. Сообщение об ошибке длинное, но вот окончание:

 ValueError: Lengths must match to compare

127.0.0.1 - - [30/Dec/2020 20:45:00] “POST /_dash-update-component HTTP/1.1” 500 - 
127.0.0.1 - - [30/Dec/2020 20:45:00] “POST /_dash-update-component HTTP/1.1” 200 - 
127.0.0.1 - - [30/Dec/2020 20:45:02] “POST /_dash-update-component HTTP/1.1” 200 -
 

Было бы полезно получить полную обратную трассировку ошибки, если вы можете поделиться этим. Существует проблема с тем, как вы определили свои обратные вызовы. Все буквы Input s должны быть заключены в квадратные скобки. Например, у вас есть:

 @app.callback(
    Output(‘table1’, ‘figure’),
    Input(‘cars-dpdn’, ‘value’),
    Input(‘years-dpdn’, ‘value’),
)
 

но это должно быть:

 @app.callback(
    Output(‘table1’, ‘figure’),
    [
      Input(‘cars-dpdn’, ‘value’),
      Input(‘years-dpdn’, ‘value’),
    ]
)
 

Это должно быть так, даже если есть только один Input . В противном случае Dash будет выдавать ошибки.

Этот обратный вызов также выглядит подозрительно:

 @app.callback(
    Output(‘years-dpdn’, ‘value’),
    Input(‘years-dpdn’, ‘options’)
)
def years_value(available_options):
    return [x[‘value’] for x in available_options]
 

Вы выводите данные в value prop выпадающего списка, но этот prop не принимает список, поэтому вы должны предоставить ему только один элемент из созданного вами списка.