无法读取带有下拉菜单的未定义Dash DataTable更新表的属性'fantasy-land / map'

时间:2018-08-23 18:29:00

标签: python reactjs plotly plotly-dash

我要引用@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

1 个答案:

答案 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()

潜在问题隐藏在源代码中: https://github.com/plotly/dash-table-experiments/blob/1e5b24eec53627418c51027f561cb7bae591a95e/dash_table_experiments/metadata.json

参数rows既不是required,也没有默认值。

"rows": {
    "type": {
      "name": "arrayOf",
      "value": {
        "name": "custom",
        "raw": "PropTypes.shape"
      }
    },
    "required": false,
    "description": ""
  },