Question

我在Python框架中隐藏和显示图表时出现问题，Dash。我定义了一个新图：

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

在使用回调函数更新跟踪数据后，我将其返回并显示在图表中，但如果从我的下拉菜单中未选择任何内容，则执行

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

因此我的图表没有显示，但由于某种原因它不起作用。有解决方法吗？

提前谢谢

Answer 1

您可以为包含图表的Div设置id元素，并使用@app.callback元素上的style隐藏整个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)

注意我使用了以下版本：

python 3.6.4
dash 0.21.0
dcc 0.22.1
html 0.10.0

Answer 2

感谢lwileczek提供the answer。我想提供一个更新，因为代码需要一些小的调整才能在以下环境中工作：

python 3.7.4
密谋4.1.1
破折号1.2.0
dcc 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'}

（这可能应该是评论，但我没有足够的观点来发表评论）

Plotly图隐藏和显示

2 个答案: