Python 如何使用回调更新短划线中的条形图

由于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)

---

如果您在calback函数中写入输出，那么您也需要提供输入，可以是滑块、日期选择器或下拉菜单等。但在您的情况下，您不需要任何输入和输出，因为在这种情况下，图形不是动态的。检查这里

因此，在您的情况下，只需将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)

---

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

---

如果一个页面中有很多图形，我如何避免我的输入（如输入、下拉列表等）刷新整个页面？我希望输入只刷新相关的输出。

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)