Как использовать Callback для обновления гистограммы в Dash - PullRequest
Новая
       25

Как использовать Callback для обновления гистограммы в Dash

0 голосов
/ 08 февраля 2019

Поскольку Dash является довольно новой средой для создания интерактивных веб-графиков, не так уж много информации, которая является конкретной или подробной для начинающих.В моем случае мне нужно обновить простую гистограмму, используя функцию обратного вызова.Данные не отображаются в браузере, даже если сервер работает нормально, без каких-либо ошибок.

Нужна помощь в разборе и понимании того, почему данные не отображаются. 

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)

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Вы можете использовать обратный вызов таким способом (я создаю для этого выпадающее меню): 

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)
0 голосов
/ 08 февраля 2019

Если вы записываете выходные данные в своей функции обратного вызова, то вам также необходимо обеспечить ввод, это может быть ползунок, указатель даты или раскрывающееся меню и т. Д., Но в вашем случае вам не нужны никакие входные и выходные данные, поскольку ваш график не являетсядинамический в этом случае.отметьте здесь 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)
...