我要引用@chriddyp在此处https://community.plot.ly/t/dash-datatable-updating-rows-with-dropdowns/6714上发布的示例代码片段以及在链接的帖子上进行的讨论
可复制的示例
import flask
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import pandas as pd
from dash.dependencies import Input, Output, State
def create_dropdown_list(df, column):
dd = df.loc[:, [column]].drop_duplicates().reset_index(drop=True)
dd['label'] = dd[column]
dd = dd.rename(columns={column:'value'}).to_dict(orient='records')
return dd
city_temp = pd.DataFrame({'City':['Montreal','New York','San Francisco'],
'Temperature':[68,83,66]})
server = flask.Flask(__name__)
app = dash.Dash(server=server, )
dropdown_list = create_dropdown_list(city_temp, 'City')
app.layout = html.Div([
dcc.Dropdown(
id='my-dropdown',
options=dropdown_list, # which looks like [{'label': 'Montreal', 'value': 'Montreal'}, {'label': 'New York', 'value': 'New York'}, {'label': 'San Francisco', 'value': 'San Francisco'}]
value = 'Montreal'
),
html.H4(children='My table'),
dt.DataTable(id='my-datatable')
])
@app.callback(Output('my-datatable', 'rows'), [Input('my-dropdown', 'value')])
def update_rows(selected_value):
city_temp_sub = city_temp[city_temp.City == selected_value].reset_index(drop=True)
return city_temp_sub.to_dict('records')
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
if __name__ == "__main__":
app.run_server()
我在浏览器上得到“错误加载依赖项” 并在控制台上收到错误,提示为“ TypeError:无法读取未定义的属性'fantasy-land / map'”
有人可以帮忙吗?
谢谢
Anuj
答案 0 :(得分:2)
简短答案
Dash的DataTable需要初始化为空的rows
才能正常工作。
dt.DataTable(id='my-datatable', rows=[{}])
好答案
将代码减少到最低限度有助于发现问题。
import flask
import dash
import dash_html_components as html
import dash_table_experiments as dt
server = flask.Flask(__name__)
app = dash.Dash(server=server, )
app.layout = html.Div([
dt.DataTable(id='my-datatable', rows=[{}])
])
if __name__ == "__main__":
app.run_server()
参数rows
既不是required
,也没有默认值。
"rows": {
"type": {
"name": "arrayOf",
"value": {
"name": "custom",
"raw": "PropTypes.shape"
}
},
"required": false,
"description": ""
},