#python #plotly #plotly-dash #dash-bootstrap-components
Вопрос:
У меня есть довольно простое Dash приложение, которое использует dash bootstrap и dash core components .
Каждый второй ввод, последний Dbc.Row() , врезается в предыдущий Dbc.Row() , который оказывается основной таблицей данных. Это происходит только при любом другом вводе-т. Е. #1 правильный, #2 отключен, #3 правильный, #4 отключен и т. Д.
Чтобы быть кратким, я включил макет приложения и базовый фрагмент кода. Проблема может быть воспроизведена с любыми данными.
Ввод #1 — Никаких проблем 
Ввод #2 — «Тестовый текст» отсекает таблицу 
Ввод #3 — Никаких проблем 
Код:
# Initialize the app server, starting info, and rgba of background app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], meta_tags = [{'name': 'viewport', 'content': 'width=device-width, initial-scale=1' }] ) server = app.server rgba = 'rgba(248, 246, 243, 1)' input_options = df['col'] # ------------------------------------------------------------------------------ # App layout (REMEMBER, BOOTSTRAP LAYOUT HAS 12 COLUMNS) app.layout = dbc.Container([ # Row 1 dbc.Row([ # Row 1, Column 1 -- A blank gutter dbc.Col([ ], style={'height': '2vh', 'backgroundColor': rgba} ) ], no_gutters=True, justify='center'), # Row 2 dbc.Row([ # Row 2, Column 1 -- The City, State Dropdown dbc.Col([ dcc.Dropdown(id='select_citystate', options=[{'label': j, 'value': j} for j in input_options], multi=False, placeholder="Enter a City, State" ) ], width={'size': 12, 'offset': 0}, style={'backgroundColor': rgba}, align='center' ), ], no_gutters=True, justify='center'), # Row 3 dbc.Row([ # Row 3, Column 1 -- A blank gutter dbc.Col([ ], style={'height': '2vh', 'backgroundColor': rgba} ) ], no_gutters=True, justify='center'), # Row 4 dbc.Row([ # Row 4, Column 1 -- Text of selected city, state dbc.Col([ html.Div([html.H3(id='output_container')]) ], width={'size': 12, 'offset': 0}, style={'backgroundColor': rgba}, align='left' ), ], no_gutters=True, align='center', justify='center'), # Row 5 dbc.Row([ # Row 5, Column 1 -- A blank gutter dbc.Col([ ], style={'height': '2vh', 'backgroundColor': rgba} ) ], no_gutters=True, justify='center'), # Row 6 dbc.Row([ # Row 6, Column 1 -- The Migration Report Table dbc.Col([ dcc.Graph(id='report_table', figure={}, responsive=True, style={'min-height': '5vh', 'top': '50%', 'left': '50%', 'backgroundColor': rgba} ), ], width={'size': 11, 'offset': 0}, style={'min-height': '5vh', 'backgroundColor': rgba} ), ], no_gutters=True, align='center', justify='center'), # Row 7 dbc.Row([ # Row 7, Column 1 -- Test text dbc.Col([ html.Div([html.H3('Test text')]) ], style={'height': '2vh', 'backgroundColor': rgba} ) ], no_gutters=True), ], fluid=True, style={'backgroundColor': rgba}) # ------------------------------------------------------------------------------ # Connect the Plotly graphs with Dash Components @app.callback([ Output(component_id='report_table', component_property='figure'), Output(component_id='output_container', component_property='children')], [Input(component_id='select_citystate', component_property='value')]) def update_graph(selected_citystate): ################################################## ##### Do Data Transformation and Display Fig ##### ################################################## if len(df) gt; 0: output_container = 'Displaying recent reports near {}.'.format(selected_citystate) else: output_container = "Sorry, there are no recent reports near here.".format(selected_citystate) return fig, output_container # ------------------------------------------------------------------------------ if __name__ == '__main__': app.run_server()