Python dash call back function

问题

This maybe asking alot, but I was curious if anyone had any tips for combining these two dash scripts. The purpose would be to incorporate the drop down menu to remove/add data points on the visualization plots.

The first script will visualize my data nicely and the second script with the callback function is for creating a drop down menu from the plotly tutorials.

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)



df = pd.read_csv('boilerData.csv', index_col='Date', parse_dates=True)
df = df.fillna(method = 'ffill').fillna(method = 'bfill')




app.layout = html.Div([
    dcc.Graph(
        id='hws',
        figure={
            'data': [
                {'x': df.index, 'y': df.HWST, 'type': 'line', 'name': 'hwst'},
                {'x': df.index, 'y': df.HWRT, 'type': 'line', 'name': 'hwrt'},
                {'x': df.index, 'y': df.OAT, 'type': 'line', 'name': 'oat'},
            ],
            'layout': {
                'title': 'Heating System Data Visualization'
            }
        }
    )
])

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

dropdown script:

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'Outdoor Temp', 'value': 'OAT'},
            {'label': 'Hot Water Supply Temp', 'value': 'HWST'},
            {'label': 'Hot Water Return Temp', 'value': 'HWRT'}
        ],
        value=['OAT','HWST','HWRT'],
        multi=True
    ),
    html.Div(id='output-container')
])


@app.callback(
    dash.dependencies.Output('output-container', 'children'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)


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

Any tips help, still learning...

回答1:

What you need to know is that the callback takes Input from some Dash element (here the value of the dropdown) and returns to Output for some property of another Dash element (here the figure from the graph; notice we only change the data property).

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import numpy as np

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)



df = pd.read_csv('boilerData.csv', index_col='Date', parse_dates=True)
df = df.fillna(method = 'ffill').fillna(method = 'bfill')

app.layout = html.Div([

    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'Outdoor Temp', 'value': 'OAT'},
            {'label': 'Hot Water Supply Temp', 'value': 'HWST'},
            {'label': 'Hot Water Return Temp', 'value': 'HWRT'}
        ],
        value=['OAT','HWST','HWRT'],
        multi=True
    ),

    dcc.Graph(
        id='hws',
        figure={
            'data': [
                {'x': df.index, 'y': df.HWST, 'type': 'line', 'name': 'hwst'},
                {'x': df.index, 'y': df.HWRT, 'type': 'line', 'name': 'hwrt'},
                {'x': df.index, 'y': df.OAT, 'type': 'line', 'name': 'oat'},
            ],
            'layout': {
                'title': 'Heating System Data Visualization'
            }
        }
    )
])


@app.callback(
    dash.dependencies.Output('hws', 'figure'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_output(columns):
    return {"data": [{'x': df.index, 'y': df[col], 'type':'line', 'name': col}
                     for col in columns]}


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

来源：https://stackoverflow.com/questions/56569959/python-dash-call-back-function