Question

我希望在仪表板应用程序中具有一组动态控件，这些控件在输入下拉菜单时会发生变化。这些值来自熊猫数据框。

但是，当我在回调中将返回值设置为破折号核心组件时，例如下拉菜单或“范围”滑块-仅呈现布局中声明的一个，而不会显示回调中的一个。

布局如下：

app.layout = html.Div([
    # Controls
    html.Div([

        #Top Layer Controls
        html.Div([

            #Project Dropdown
            html.Div([
                make_dropdown_menu(list(name_to_id.keys()), list(name_to_id.values()), id="project_selctor")
            ]),

            #date Slider
            html.Div(id = 'date_slider')

        ]),

        # State Controls

        html.Div([
            # Track State
            html.Div(id = 'track_state_dropdown_multi'),

            # Track Tags
            html.Div(id = 'track_tags_dropdown_multi'),

            # Track Changes
            html.Div(id = 'track_changes_dropdown_multi'),
        ]),

        # Filters

        html.Div([

            #Track Length
            html.Div(id = 'track_lenth_slider'),

            #Stop Numbers
            html.Div(id = 'number_of_stops_slider'),
        ]),

        html.Div(id = 'Selections')

    ])
])

并且我将回调设置为如下所示：

@app.callback(
    Output('track_state_dropdown_multi', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(value):
    filter_df = filter_track_data_by_project(track_data, value)

    menu = make_dropdown_menu(
        labels=filter_df.track_state.unique(),
        values=filter_df.track_state.unique(),
        id= "track_state_dropdown_comp",
        multi= True
    )
    return html.Div([menu])


@app.callback(
    Output('track_tags_dropdown_multi', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    menu = make_dropdown_menu(
        labels=list(set(flatten(filter_df.tags))),
        values = list(set(flatten(filter_df.tags))),
        id = 'track_tags_dropdown_comp',
        multi= True
    )
    return html.Div([menu])

@app.callback(
    Output('track_changes_dropdown_multi', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    track_changes = pd.DataFrame(flatten(filter_df.track_changes))
    menu = make_dropdown_menu(
        labels = track_changes.action.unique(),
        values = track_changes.action.unique(),
        id = "track_changes_dropdown_comp",
        multi = True

    )
    return html.Div([menu])

@app.callback(
    Output('track_length_slider', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    slider = dcc.RangeSlider(
        id = 'track_length_slider_comp',
        min = filter_df.track_lengh.min(),
        max = filter_df.track_lengh.max(),
        steps = 0.5

    )
    return html.Div([slider])

@app.callback(
    Output('number_of_stops_slider', 'children'),
    [Input("project_selctor", 'value')]
)
def update_project_df(project_selector):
    filter_df = filter_track_data_by_project(track_data, project_selector)
    slider = dcc.RangeSlider(
        id = 'number_of_stops_slider_comp',
        min = filter_df.number_of_stops.min(),
        max = filter_df.number_of_stops.max(),
        steps = 1

    )
    return html.Div([slider])

@app.callback(
    Output('Selections', 'children'),
    [Input('number_of_stops_slider_comp', 'value'),
    Input('track_changes_dropdown_comp', 'value')]
)
def update(stops, track):
    return('stops: {0}, tracks: {1}'.format(str(stops), str(track)))

这是相关的助手功能：

def make_dropdown_menu(labels, values, id, multi=False, **kwargs):
    options = []
    for i in range(len(labels)):
        d = dict(
            label = labels[i],
            value = values[i]
        )

        options.append(d)

    menu = dcc.Dropdown(
        id = id,
        options = options,
        value = options[0]['value'],
        style = {'width':'100%'}
    ) 
    return menu


def filter_track_data_by_project(df, proj_id):
    filtered_df = df[df.project_id ==  proj_id] 
    print(len(filtered_df))
    return filtered_df

由于我提供了似乎从未被点击的打印功能，因此似乎从未触发过回调。

这里的任何建议都是有帮助的，除了在布局中声明组件外，这不是我希望包含的动态控件的选项。

谢谢

Answer 1

不幸的是，这是Dash的限制。未使用布局初始化的任何组件或回调都将无法正常工作。

如果您要激活/停用的组件数量已知，则可以将其以function assemble() { arrayIndex = 0; for (var r = 0; r < rows; r++) { table += '<tr>'; for (var c = 0; c < cols; c++) { table += '<td id = "jsImg">'; table += '<img height = 50px width = 65px src = ' + imageArray[arrayIndex].src + '>'; table += '</td>'; arrayIndex++; } table += '</tr>'; } }样式加载到容器内部的布局中。为每个组件使用一个回调，然后可以在需要时显示该组件，而在不使用它时将其隐藏。这可能是一个负担，但如果要使用Dash进行动态UI，这实际上是唯一的选择。

在回叫中设置并输出到子级时，Plotly Dash Core组件不会呈现

1 个答案: