Plotly Dash：通过更新不同的下拉组件隐藏/显示滑块组件答案

【问题标题】：Plotly Dash: Hide/show slider component by updating different dropdown componentPlotly Dash：通过更新不同的下拉组件隐藏/显示滑块组件
【发布时间】：2020-10-28 11:40:38
【问题描述】：

我有通过更新下拉组件隐藏/显示滑块组件的部分工作解决方案。该代码执行我想要的操作，但我在网页上遇到错误：

此组件的道具无效： 属性“style”与组件 ID：“slider”一起用于回调的输出项之一。此 ID 分配给布局中的 dash_core_components.Slider 组件，该组件不支持此属性。此 ID 用于 Output(s) 的回调中：slider.style

是否可以使用其他属性隐藏 Slider 组件？谢谢。

app.layout = html.Div([
    dcc.Graph(
        id='CZmap'   
    ),
    html.Label('Dropdown'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Kraje', 'value': 'Kraje'},
            {'label': 'Obce', 'value': 'Obce'}
        ],
        value='Obce'
    ),
     # Create Div to place a conditionally visible element inside
    html.Div([
        # Create element to hide/show, in this case an 'Input Component'
        dcc.Slider
            (
            id='slider',
            min=1,
            max=4,
            step=1,
            value=1,
            marks={str(i): str(i) for i in range(1,5)}
            )
    ], style= {'display': 'block'} # <-- This is the line that will be changed by the dropdown callback
    )
])

@app.callback(
   Output(component_id='slider', component_property='style'),
   [Input(component_id='dropdown', component_property='value')])
def show_hide_element(visibility_state):
    if visibility_state == 'Kraje':
        return {'display': 'block'}
    if visibility_state == 'Obce':
        return {'display': 'none'}

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


  [1]: https://stackoverflow.com/questions/50213761/changing-visibility-of-a-dash-component-by-updating-other-component

【问题讨论】：

标签： python plotly-dash

【解决方案1】：

您可以为滑块的容器分配一个 id，然后打开和关闭容器的可见性，如下例所示。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    dcc.Graph(id='CZmap'),

    html.Label('Dropdown'),

    dcc.Dropdown(id='dropdown',
                 options=[{'label': 'Kraje', 'value': 'Kraje'},
                          {'label': 'Obce', 'value': 'Obce'}],
                 value='Obce'),

    # Create Div to place a conditionally visible element inside
    html.Div(id='slider-container', children=[

        # Create element to hide/show, in this case a slider
        dcc.Slider(id='slider',
                   min=1,
                   max=4,
                   step=1,
                   value=1,
                   marks={str(i): str(i) for i in range(1,5)})

    ], style= {'display': 'block'}) # <-- This is the line that will be changed by the dropdown callback

])

@app.callback(
   Output(component_id='slider-container', component_property='style'),
   [Input(component_id='dropdown', component_property='value')])
def show_hide_element(visibility_state):
    if visibility_state == 'Kraje':
        return {'display': 'block'}
    if visibility_state == 'Obce':
        return {'display': 'none'}

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

【讨论】：

【解决方案2】：

我们可以直接设置组件的隐藏属性：

@app.callback(
    Output(component_id='slider-container', component_property='hidden'),
    [Input(component_id='dropdown', component_property='value')])
def show_hide_element(value):
    if visibility_state == 'Kraje':
        return True  # This will make hidden property true
    if visibility_state == 'Obce':
        return False  # This will make hidden property false

使用此解决方案，您无需编辑任何样式，而是直接编辑组件的“隐藏”属性，这可能更优雅。

【讨论】：