Plotly图表的隐藏和显示

Question

我需要翻译一段关于IT技术的内容，涉及Python框架Dash中图形隐藏和显示的问题。我定义了一个新的图形：

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

我使用回调函数更新跟踪数据，并将其返回，然后在图表中显示。但是，如果从下拉菜单中没有选择任何内容，就会发生以下情况

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

我希望我的图表不被显示出来，但由于某些原因这并没有起作用。有什么解决方法吗？

提前感谢您的帮助。

- user9351276

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

- lwileczek

---

很棒的答案。另外，我发现必须向dcc.Graph对象添加一个高度属性，否则我的图表只有1像素高。就像这样：style={'height': 400} - ollerend

Answer 2

感谢lwileczek提供答案。我想提供一些更新，因为代码需要进行一些微小的调整才能在以下环境中运行：

• python 3.7.4
• plotly 4.1.1
• dash 1.2.0
• dcc 1.1.2
• html 1.0.1

当我将lwileczek的代码复制到上述环境中时，dash会报错，指出下拉菜单传入了错误的参数。经过几次尝试后，我发现只有将下拉菜单中的值更改为字符串，并修改回调函数中的条件语句，使其进行字符串比较而不是期望该值为布尔值，才能使代码正常工作。

下拉菜单的代码如下：

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'}

（这可能应该是一条评论，但我没有足够的积分来发布评论）

- konsta