web-dev-qa-db-ja.com

他のコンポーネントを更新してダッシュコンポーネントの可視性を変更する

たとえば、チェックボックス（グラフやテーブルなど）をクリックして、一部のコンポーネントを非表示にする必要があります。ただし、ドキュメントにはこの目的に適したセクションがありませんでした。前もって感謝します！

pythonplotlydashboardplotly-dash
6
Иван Ситников

非表示にする必要のあるコンポーネントをhtml.div([])内に配置し、コールバックで'display'オプションを'none'に変更できます。コールバックには、たとえば、ドロップダウンをInputとして、html.div([])内のコンポーネントをOutputとして含める必要があります。

以下は、ドロップダウンと、ドロップダウンの値に基づいて表示/非表示になる入力コンポーネントのみを含むWebアプリです。コピーすると直接動作するはずです：

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

app = dash.Dash('example')

app.layout = html.Div([
    dcc.Dropdown(
        id = 'dropdown-to-show_or_hide-element',
        options=[
            {'label': 'Show element', 'value': 'on'},
            {'label': 'Hide element', 'value': 'off'}
        ],
        value = 'on'
    ),

    # Create Div to place a conditionally visible element inside
    html.Div([
        # Create element to hide/show, in this case an 'Input Component'
        dcc.Input(
        id = 'element-to-hide',
        placeholder = 'something',
        value = 'Can you see me?',
        )
    ], style= {'display': 'block'} # <-- This is the line that will be changed by the dropdown callback
    )
    ])

@app.callback(
   Output(component_id='element-to-hide', component_property='style'),
   [Input(component_id='dropdown-to-show_or_hide-element', component_property='value')])

def show_hide_element(visibility_state):
    if visibility_state == 'on':
        return {'display': 'block'}
    if visibility_state == 'off':
        return {'display': 'none'}

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

複数のコンポーネントがhtml.div([])内に配置されている場合でも、コールバックは、出力するコンポーネントの'display'プロパティのみを変更します。したがって、可視性に影響を与えずに、同じDiv内に他のダッシュコンポーネントを配置できます。

これがあなたの質問に正しく答えることを願っています。

5
Tim Skov Jacobsen