Question

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

Answer 1

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

因此，在您的情况下，只需将id和数字放到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)

Answer 2

您可以通过这种方式使用回调（我为此创建了下拉菜单）：

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)

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

2 个答案: