情節圖隱藏和顯示

Question

我在 Python 框架 Dash 中隱藏和顯示圖形時遇到問題。 我定義了一個新圖：

html.Div([
  dcc.Graph(id = 'graph'),
 ],),

使用回調函數更新跟蹤數據后，我將其返回並顯示在圖表中，但如果沒有從下拉菜單中選擇任何內容，我會這樣做

if not input or input == []:
  return {'display': 'none'}

所以我的圖表沒有顯示，但由於某種原因它不起作用。 有解決方法嗎？

先感謝您

Answer 1

您可以為包含圖形的 Div 設置id元素，並通過在style元素上使用@app.callback來隱藏整個 div。

html.Div(id="graph-container", children= [
  dcc.Graph(id = 'graph'),
 ]),

@app.callback(Output('graph-container', 'style'), [Input('input_widget','value')])
def hide_graph(input):
    if input:
        return {'display':'block'}
    else:
        return {'display':'none'}

要查看此代碼的實際效果，您可以測試我的代碼：

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

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    html.Label("Show?"),
    dcc.Dropdown(
        id="my-input",
        options = [
            {'label':'Yes', 'value':True},
            {'label':'No', 'value':False}
        ],
        value = True
    ),
    html.Div(
        id="graph-container", 
        children = [

        dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
    ])


])

@app.callback(Output('graph-container', 'style'), [Input('my-input', 'value')])
def hide_graph(my_input):
    if my_input:
        return {'display':'block'}
    return {'display':'none'}



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

注意我使用了以下版本：

• 蟒蛇 3.6.4
• 破折號 0.21.0
• 直流電 0.22.1
• html 0.10.0

Answer 2

感謝 lwileczek的回答。 我想提供更新，因為代碼需要一些小的調整才能在以下環境中工作：

• 蟒蛇 3.7.4
• 情節 4.1.1
• 破折號 1.2.0
• 直流電 1.1.2
• html 1.0.1

當我將 lwileczek 的代碼復制到上述環境中時，會出現一個關於將錯誤參數傳遞到下拉列表中的錯誤。 經過一段時間的反復試驗，如果我將下拉列表中的值更改為字符串並修改回調中的條件，以便它進行字符串比較而不是期望值是一個布爾值。

下拉菜單的代碼如下所示：

dcc.Dropdown( 
    id = 'my-input', 
    options = [
        {'label':'Yes', 'value':'Yes'}, 
        {'label':'No', 'value':'No'}
    ], 
    value='Yes'
),

回調中的條件代碼變為：

if my_input == 'Yes':
    return {'display': 'block'}
return {'display': 'none'}

（這應該是一個評論，但我沒有足夠的積分來發表評論）