如何在Dash dcc中更新链接的下拉列表值？

Question

破折号，如何将一个下拉列表的值更新到另一个清单或滑块？在下面的代码中，我从一个下拉列表中选择一个值，该值应根据从下拉列表中选择的值来更新清单值。在这里，我部分成功地从下拉列表中获取了价值，但它是积累清单中较早选择的值。请在代码的下面找到。

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
from dash.exceptions import PreventUpdate

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div([
                dash_table.DataTable(
                        id='datatable-upload-container',
                        columns=[{"name": i, "id": i} for i in df.columns],
                        data=df.to_dict('records'),
                        ),
                html.Div(dcc.Dropdown(
                    id='data_selector1',
                    options=[
                        {'label': '', 'value': ''}
                        ],
                    value=[]
                    )
                ),
                html.Br(),
                html.Div([
                    html.Div(id='numerical-slider'),
                    # this is a hack: include a hidden dcc component so that
                    # dash registers and serve's this component's JS and CSS
                    # libraries
                     dcc.Input(style={'display': 'none'})
                ])
           ])

@app.callback(Output('data_selector1', 'options'),
              [Input('datatable-upload-container', 'data')])
def update_dropdown(rows):
    print('updating menus')
    numerical_col = [i for i in df.columns if df[i].dtypes != "object"]
    col_labels=[{'label' :k, 'value' :k} for k in numerical_col]
    return col_labels

@app.callback(Output('numerical-slider','children'),
              [Input('data_selector1', 'value'),
              Input('datatable-upload-container', 'data')])
def explanatory_cat_slider(value, rows):
    if value:
        categories, intervals = pd.cut(df[value], 3, retbins=True)
        return html.Div(html.Label([value,
                            dcc.RangeSlider(id='numerical-slider',
                               min=min(intervals),
                               max=max(intervals),
                               step=None,
                               marks={str(val): str(round(val,2)) for val in intervals},
                               value = [intervals[0],intervals[-1]]
                               )
                            ],style={'width': '50%', 'display': 'inline-block', 'textAlign': 'left'})
                        )
    else:
        return []

if __name__ == '__main__':
    app.run_server(debug=False)

更新后的代码...我遇到了explanatory_cat_slider问题，它没有使用新选择的值进行更新。

In the first image I can select one value of dropdown which automatically shows slider of that value

In the second image sliders getting accumulated on upon other. How do I rectify this issue?

In the last image, how it becomes slider overlapped

Answer 1

您发布的代码不完整，因为您的回调中有输入ID data_selector和ID datatable-upload-container，但在您的layout中不存在。我可以看到回调也将对其Output产生问题，因为该回调正尝试使用包含相同ID的元素来更新children的categorical-checklist。这会导致您的版式中的ID不一致，这会中断。

我也许可以为完整的代码提供更多帮助，但是，从本质上讲，您具有检查if value:并在该块中运行代码的正确想法。确保您不要让回调默默地结束，因为这将返回None并给您带来麻烦。您应该在末尾或return []块内部包括return ''或else:，以防止这种情况的发生，并保持children组件有效，即使只有空值也是如此。

您还应该在初始布局中包含dcc.Checklist。给它以options=[]开头，并让您的回调更新其options道具。应该可以，但是，如果仍然有问题，请更新您发布的代码，我会再看一遍。