如何使用回调来更新 Dash 中的条形图答案

【问题标题】：How to use Callback to update Bar Graph in Dash如何使用回调来更新 Dash 中的条形图
【发布时间】：2019-02-07 23:38:26
【问题描述】：

由于 Dash 是用于制作基于 Web 的交互式图表的相当新的框架，因此对于初学者来说没有太多具体或详细的信息。就我而言，我需要使用回调函数更新一个简单的条形图。即使服务器运行良好而没有提示任何错误，数据也不会在浏览器上呈现。

需要帮助整理和理解数据不呈现的原因。

import dash
from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go

app = dash.Dash(__name__)

colors = {
    'background': '#111111',
    'background2': '#FF0',
    'text': '#7FDBFF'
}

app.layout = html.Div( children = [ 
        html.Div([
            html.H5('ANNx'),
            dcc.Graph(
                id='cx1'
                )

        ])
    ]
)


@app.callback(Output('cx1', 'figure'))

def update_figure( ):
    return  {
                    'data': [
                        {'x': ['APC'], 'y': [9], 'type': 'bar', 'name': 'APC'},
                        {'x': ['PDP'], 'y': [8], 'type': 'bar', 'name': 'PDP'},
                    ],
                    'layout': {
                        'title': 'Basic Dash Example',
                        'plot_bgcolor': colors['background'],
                        'paper_bgcolor': colors['background']
                    }
                    }


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

【问题讨论】：

标签： python callback plotly-dash

【解决方案1】：

你可以这样使用回调（我为此创建了下拉菜单）：

import dash
from dash.dependencies import Output, Input
import dash_core_components as dcc
import dash_html_components as html
import plotly
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash(__name__)

df = pd.DataFrame({'x': ['APC', 'PDP'], 'y': [9, 8]})

colors = {
    'background': '#111111',
    'background2': '#FF0',
    'text': '#7FDBFF'
}

app.layout = html.Div(children=[
        html.Div([
            html.H5('ANNx'),
            html.Div(
                id='cx1'
                ),
            dcc.Dropdown(id='cx2',
                         options=[{'label': 'APC', 'value': 'APC'},
                                  {'label': 'PDP', 'value': 'PDP'},
                                  {'label': 'Clear', 'value': None}
                                  ]
                         )
                  ])])


@app.callback(Output('cx1', 'children'),
              [Input('cx2', 'value')])
def update_figure(value):
    if value is None:
        dff = df
    else:
        dff = df.loc[df["x"] == value]
    return html.Div(
            dcc.Graph(
                id='bar chart',
                figure={
                    "data": [
                        {
                            "x": dff["x"],
                            "y": dff["y"],
                            "type": "bar",
                            "marker": {"color": "#0074D9"},
                        }
                    ],
                    "layout": {
                        'title': 'Basic Dash Example',
                        "xaxis": {"title": "Authors"},
                        "yaxis": {"title": "Counts"},
                        'plot_bgcolor': colors['background'],
                        'paper_bgcolor': colors['background']
                    },
                },
            )
    )


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

【讨论】：

如果我们在一个页面中有很多图表，我怎样才能避免我的输入（如 Input、Dropdown 等）刷新所有页面？我希望输入只刷新相关的输出。

【解决方案2】：

如果您在回调函数中编写输出，那么您还需要提供输入，它可以是滑块、日期选择器或下拉菜单等，但在您的情况下，您不需要任何输入和输出，因为您的图表不是在这种情况下是动态的。在这里查看https://dash.plot.ly/getting-started-part-2

所以在您的情况下，只需将 id 和 figure 放入 dcc.Graph 组件即可：

import dash
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash(__name__)

colors = {
    'background': '#111111',
    'background2': '#FF0',
    'text': '#7FDBFF'
}

app.layout = html.Div( children = [
        html.Div([
            html.H5('ANNx'),
            dcc.Graph(
                id='cx1', figure={
                    'data': [
                        {'x': ['APC'], 'y': [9], 'type': 'bar', 'name': 'APC'},
                        {'x': ['PDP'], 'y': [8], 'type': 'bar', 'name': 'PDP'},
                    ],
                    'layout': {
                        'title': 'Basic Dash Example',
                        'plot_bgcolor': colors['background'],
                        'paper_bgcolor': colors['background']
                    }}
                )

        ])
    ]
)


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

【讨论】：