带有多个输入的短跑输出 [英] Dash output with multiple inputs
本文介绍了带有多个输入的短跑输出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试让破折号组件正确输入变量并提供适当的输出.
当前有多个输入将使该功能不起作用.
我为dcc下拉菜单添加了multi = true-尚未成功运行.
这是我使用的代码.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import plotly.graph_objs as go
df = pd.read_excel('FreewayFDSData.xlsx', 'Volume', parse_dates=True, index_col="Time")
df = df.T
Detectors = list(df.columns)
mf = pd.read_excel('FreewayFDSData.xlsx', 'Coordinates')
mapbox_access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
# Layouts
layout_map = dict(
autosize=True,
height=500,
font=dict(color="#191A1A"),
titlefont=dict(color="#191A1A", size='18'),
margin=dict(
l=35,
r=35,
b=35,
t=45
),
hovermode="closest",
plot_bgcolor='#fffcfc',
paper_bgcolor='#fffcfc',
legend=dict(font=dict(size=10), orientation='h'),
title='Freeway detectors',
mapbox=dict(
accesstoken=mapbox_access_token,
style="light",
center=dict(
lon=145.061,
lat=-37.865
),
zoom=12,
)
)
def generate_table(dataframe, max_rows=10):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +
# Body
[html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))]
#Styling
)
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.H1(children='Managed Motorway'),
html.Div([
html.Div([
dcc.Dropdown(
id='xaxis-column',
options=[{'label': i, 'value': i} for i in Detectors],
value='Volume per 15 seconds',
style={"width" : '48%'}
),
dcc.RadioItems(
id='xaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
]),
dcc.Graph(id='indicator-graphic'),
dcc.Graph(
id='graph',
figure={
'data': [{
'lat': mf.Y, 'lon': mf.X, 'type': 'scattermapbox'
}],
'layout': layout_map
}
)
], style={'display': 'block'}),
html.Div([
html.H4(children='Example of Freeway FDS Data'),
html.Div([
generate_table(df)
], style={'overflowX': 'scroll','overflowY': 'scroll', 'width':'48%','height':'300px'})
])
])
@app.callback(
Output('indicator-graphic', 'figure'),
[Input('xaxis-column', 'value'),
Input('xaxis-type', 'value')])
def update_graph(xaxis_column_name, xaxis_type):
# xaxis column name will assign the x axis data being sought
return {
'data': [go.Scatter(
x=df.index,
y=df[xaxis_column_name])]
}
if __name__ == '__main__':
app.run_server(debug=True)
这是输入数据的示例.
Time 00:00 - 00:15 00:15 - 00:30 00:30 - 00:45 00:45 - 01:00 01:00 - 01:15 01:15 - 01:30 01:30 - 01:45 01:45 - 02:00 02:00 - 02:15 02:15 - 02:30 02:30 - 02:45 02:45 - 03:00 03:00 - 03:15 03:15 - 03:30 03:30 - 03:45 03:45 - 04:00 04:00 - 04:15 04:15 - 04:30 04:30 - 04:45 04:45 - 05:00 05:00 - 05:15 05:15 - 05:30 05:30 - 05:45 05:45 - 06:00 06:00 - 06:15 06:15 - 06:30 06:30 - 06:45 06:45 - 07:00 07:00 - 07:15 07:15 - 07:30 07:30 - 07:45 07:45 - 08:00 08:00 - 08:15 08:15 - 08:30 08:30 - 08:45 08:45 - 09:00 09:00 - 09:15 09:15 - 09:30 09:30 - 09:45 09:45 - 10:00 10:00 - 10:15 10:15 - 10:30 10:30 - 10:45 10:45 - 11:00 11:00 - 11:15 11:15 - 11:30 11:30 - 11:45 11:45 - 12:00 12:00 - 12:15 12:15 - 12:30 12:30 - 12:45 12:45 - 13:00 13:00 - 13:15 13:15 - 13:30 13:30 - 13:45 13:45 - 14:00 14:00 - 14:15 14:15 - 14:30 14:30 - 14:45 14:45 - 15:00 15:00 - 15:15 15:15 - 15:30 15:30 - 15:45 15:45 - 16:00 16:00 - 16:15 16:15 - 16:30 16:30 - 16:45 16:45 - 17:00 17:00 - 17:15 17:15 - 17:30 17:30 - 17:45 17:45 - 18:00 18:00 - 18:15 18:15 - 18:30 18:30 - 18:45 18:45 - 19:00 19:00 - 19:15 19:15 - 19:30 19:30 - 19:45 19:45 - 20:00 20:00 - 20:15 20:15 - 20:30 20:30 - 20:45 20:45 - 21:00 21:00 - 21:15 21:15 - 21:30 21:30 - 21:45 21:45 - 22:00 22:00 - 22:15 22:15 - 22:30 22:30 - 22:45 22:45 - 23:00 23:00 - 23:15 23:15 - 23:30 23:30 - 23:45 23:45 - 24:00
3674S_P1 88 116 84 68 76 56 56 48 72 48 76 40 76 44 36 76 76 116 124 176 236 352 440 624 1016 1172 1260 1280 1304 1312 1252 1344 1324 1336 1212 1148 1132 1120 1084 996 924 1040 952 900 900 1116 1136 1044 1144 1152 1224 1088 1132 1184 1208 1120 1240 1196 1116 1264 1196 1240 1308 1192 1164 1096 1080 1160 1112 1244 1244 1184 1232 996 1108 876 864 776 644 520 684 724 632 620 680 724 516 504 432 396 264 252 272 256 100 144
3674S_P0 88 116 76 68 76 56 56 48 68 48 76 48 80 44 32 76 76 108 120 180 240 340 456 624 1088 1268 1352 1384 1412 1376 1356 1372 1400 1436 1296 1240 1200 1256 1120 1028 1008 1072 980 944 932 1148 1192 1040 1188 1220 1292 1140 1116 1268 1292 1172 1272 1236 1216 1280 1248 1280 1388 1244 1224 1076 1096 1148 1108 1256 1356 1308 1236 992 1100 880 872 768 640 520 680 720 636 620 660 716 512 504 428 396 260 244 272 252 100 136
最终结果是输出的错误，其中更改了基本变量而不是折线图.
对于解决此问题的任何帮助，我们将不胜感激(并且，如果您能够使我的代码不那么混乱，我将不胜感激.
干杯！
完成调试的代码
def update_graph(xaxis_column_name, xaxis_type):
graph = []
if xaxis_column_name != None :
for i in range(0, len(xaxis_column_name)):
graph_obj = go.Scatter(
x=df.index,
y=df[xaxis_column_name[i]])
graph.append(graph_obj)
return {
'data': graph
}
return
解决方案
我无法完全运行您的代码来对其进行调试，因此我快速浏览了一下.
将xaxis-column Dropdown组件更改为进行多选时，它将返回list而不是value，因此对xaxis-column的回调将是错误的
将回调更改为类似的方式应该有效，
@app.callback(
Output('indicator-graphic', 'figure'),
[Input('xaxis-column', 'value'),
Input('xaxis-type', 'value')])
def update_graph(xaxis_column_name, xaxis_type):
graph = []
for i in range(0, len(xaxis_column_name)):
graph_obj = go.Scatter(
x=df.index,
y=df[xaxis_column_name[i]])
graph.append(graph_obj)
return {
'data': graph
}
I am trying to have a dash component properly input variables and give appropriate output.
Currently multiple inputs will make the functionality not work.
I've put multi=true for my dcc dropdown - hasn't worked successfully yet.
This is the code I have used.
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
import plotly.graph_objs as go
df = pd.read_excel('FreewayFDSData.xlsx', 'Volume', parse_dates=True, index_col="Time")
df = df.T
Detectors = list(df.columns)
mf = pd.read_excel('FreewayFDSData.xlsx', 'Coordinates')
mapbox_access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
# Layouts
layout_map = dict(
autosize=True,
height=500,
font=dict(color="#191A1A"),
titlefont=dict(color="#191A1A", size='18'),
margin=dict(
l=35,
r=35,
b=35,
t=45
),
hovermode="closest",
plot_bgcolor='#fffcfc',
paper_bgcolor='#fffcfc',
legend=dict(font=dict(size=10), orientation='h'),
title='Freeway detectors',
mapbox=dict(
accesstoken=mapbox_access_token,
style="light",
center=dict(
lon=145.061,
lat=-37.865
),
zoom=12,
)
)
def generate_table(dataframe, max_rows=10):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +
# Body
[html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))]
#Styling
)
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.H1(children='Managed Motorway'),
html.Div([
html.Div([
dcc.Dropdown(
id='xaxis-column',
options=[{'label': i, 'value': i} for i in Detectors],
value='Volume per 15 seconds',
style={"width" : '48%'}
),
dcc.RadioItems(
id='xaxis-type',
options=[{'label': i, 'value': i} for i in ['Linear', 'Log']],
value='Linear',
labelStyle={'display': 'inline-block'}
)
]),
dcc.Graph(id='indicator-graphic'),
dcc.Graph(
id='graph',
figure={
'data': [{
'lat': mf.Y, 'lon': mf.X, 'type': 'scattermapbox'
}],
'layout': layout_map
}
)
], style={'display': 'block'}),
html.Div([
html.H4(children='Example of Freeway FDS Data'),
html.Div([
generate_table(df)
], style={'overflowX': 'scroll','overflowY': 'scroll', 'width':'48%','height':'300px'})
])
])
@app.callback(
Output('indicator-graphic', 'figure'),
[Input('xaxis-column', 'value'),
Input('xaxis-type', 'value')])
def update_graph(xaxis_column_name, xaxis_type):
# xaxis column name will assign the x axis data being sought
return {
'data': [go.Scatter(
x=df.index,
y=df[xaxis_column_name])]
}
if __name__ == '__main__':
app.run_server(debug=True)
This is an example of the data being inputted.
Time 00:00 - 00:15 00:15 - 00:30 00:30 - 00:45 00:45 - 01:00 01:00 - 01:15 01:15 - 01:30 01:30 - 01:45 01:45 - 02:00 02:00 - 02:15 02:15 - 02:30 02:30 - 02:45 02:45 - 03:00 03:00 - 03:15 03:15 - 03:30 03:30 - 03:45 03:45 - 04:00 04:00 - 04:15 04:15 - 04:30 04:30 - 04:45 04:45 - 05:00 05:00 - 05:15 05:15 - 05:30 05:30 - 05:45 05:45 - 06:00 06:00 - 06:15 06:15 - 06:30 06:30 - 06:45 06:45 - 07:00 07:00 - 07:15 07:15 - 07:30 07:30 - 07:45 07:45 - 08:00 08:00 - 08:15 08:15 - 08:30 08:30 - 08:45 08:45 - 09:00 09:00 - 09:15 09:15 - 09:30 09:30 - 09:45 09:45 - 10:00 10:00 - 10:15 10:15 - 10:30 10:30 - 10:45 10:45 - 11:00 11:00 - 11:15 11:15 - 11:30 11:30 - 11:45 11:45 - 12:00 12:00 - 12:15 12:15 - 12:30 12:30 - 12:45 12:45 - 13:00 13:00 - 13:15 13:15 - 13:30 13:30 - 13:45 13:45 - 14:00 14:00 - 14:15 14:15 - 14:30 14:30 - 14:45 14:45 - 15:00 15:00 - 15:15 15:15 - 15:30 15:30 - 15:45 15:45 - 16:00 16:00 - 16:15 16:15 - 16:30 16:30 - 16:45 16:45 - 17:00 17:00 - 17:15 17:15 - 17:30 17:30 - 17:45 17:45 - 18:00 18:00 - 18:15 18:15 - 18:30 18:30 - 18:45 18:45 - 19:00 19:00 - 19:15 19:15 - 19:30 19:30 - 19:45 19:45 - 20:00 20:00 - 20:15 20:15 - 20:30 20:30 - 20:45 20:45 - 21:00 21:00 - 21:15 21:15 - 21:30 21:30 - 21:45 21:45 - 22:00 22:00 - 22:15 22:15 - 22:30 22:30 - 22:45 22:45 - 23:00 23:00 - 23:15 23:15 - 23:30 23:30 - 23:45 23:45 - 24:00
3674S_P1 88 116 84 68 76 56 56 48 72 48 76 40 76 44 36 76 76 116 124 176 236 352 440 624 1016 1172 1260 1280 1304 1312 1252 1344 1324 1336 1212 1148 1132 1120 1084 996 924 1040 952 900 900 1116 1136 1044 1144 1152 1224 1088 1132 1184 1208 1120 1240 1196 1116 1264 1196 1240 1308 1192 1164 1096 1080 1160 1112 1244 1244 1184 1232 996 1108 876 864 776 644 520 684 724 632 620 680 724 516 504 432 396 264 252 272 256 100 144
3674S_P0 88 116 76 68 76 56 56 48 68 48 76 48 80 44 32 76 76 108 120 180 240 340 456 624 1088 1268 1352 1384 1412 1376 1356 1372 1400 1436 1296 1240 1200 1256 1120 1028 1008 1072 980 944 932 1148 1192 1040 1188 1220 1292 1140 1116 1268 1292 1172 1272 1236 1216 1280 1248 1280 1388 1244 1224 1076 1096 1148 1108 1256 1356 1308 1236 992 1100 880 872 768 640 520 680 720 636 620 660 716 512 504 428 396 260 244 272 252 100 136
The end result is a bug with the output where instead of line graphs the base variable is changed.
Any help on fixing this issue is much appreciated (and if you're able to make my code less convulted I'd appreciate it.
Cheers!
Finished code with debug complete
def update_graph(xaxis_column_name, xaxis_type):
graph = []
if xaxis_column_name != None :
for i in range(0, len(xaxis_column_name)):
graph_obj = go.Scatter(
x=df.index,
y=df[xaxis_column_name[i]])
graph.append(graph_obj)
return {
'data': graph
}
return
解决方案
I'm not able to fully run your code to debug it well, I found this after a quick glance.
When the xaxis-column Dropdown component is changed to do a multi-select, it will return a list rather than a value, so the callback you have for xaxis-column will be erroneous,
Changing the callback to something like this should work,
@app.callback(
Output('indicator-graphic', 'figure'),
[Input('xaxis-column', 'value'),
Input('xaxis-type', 'value')])
def update_graph(xaxis_column_name, xaxis_type):
graph = []
for i in range(0, len(xaxis_column_name)):
graph_obj = go.Scatter(
x=df.index,
y=df[xaxis_column_name[i]])
graph.append(graph_obj)
return {
'data': graph
}
这篇关于带有多个输入的短跑输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
