python - Dash Plotly Textbox 回调交互
问题描述
我被指派与地图上的填充区域进行文本框交互。这是我的仪表板当前的样子:
因此,一旦我在文本框中输入我的数字并按提交,图形地图(位于左侧)应根据我在 Lat1、Long1 和 Lat2、Long2 中输入的数字显示填充区域。但是,我不太确定如何在数字输入、数字以及按钮之间进行回调。我上网搜索,但我找不到任何可以阅读的资源。我对此非常陌生,因此非常感谢任何帮助!因此,如果您有任何想法,请告诉我!谢谢 :)
这是我的输入框代码:
def custom_input1(paragraph_text, min_value=0, max_value=200, step=1):
return html.Div(
children=[
html.P(paragraph_text, style={"paddingRight": 10}),
dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input1'),
],
style={"display": "flex"},
)
def custom_input2(paragraph_text, min_value=0, max_value=200, step=1):
return html.Div(
children=[
html.P(paragraph_text, style={"paddingRight": 10}),
dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input2'),
],
style={"display": "flex"},
)
def custom_input3(paragraph_text, min_value=0, max_value=200, step=1):
return html.Div(
children=[
html.P(paragraph_text, style={"paddingRight": 10}),
dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input3'),
],
style={"display": "flex"},
)
def custom_input4(paragraph_text, min_value=0, max_value=200, step=1):
return html.Div(
children=[
html.P(paragraph_text, style={"paddingRight": 10}),
dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input4'),
],
style={"display": "flex"},
)
html.Div(children=[html.Div([
html.H1("Query1", style={'text-align': 'center','fontSize': 30}),
dbc.Row(
[
dbc.Col(dcc.Graph(id="graphQ", figure={}), md=8),
dbc.Col(
children=[
dbc.Row(
[
dbc.Col(custom_input1("Lat1")),
dbc.Col(custom_input2("Long1")),
],
style={"paddingBottom": 30},
),
dbc.Row(
[
dbc.Col(custom_input3("Lat2")),
dbc.Col(custom_input4("Lat2")),
],
style={"paddingBottom": 30},
),
html.Div(id="output"),
html.Button('Submit', id='submit_button', n_clicks=0),
],
md=4,
),
]
),
])]))
@app.callback(
Output("output", "children"),
Input("input1", "value"),
Input("input2", "value"),
Input("input3", "value"),
Input("input4", "value"),
)
def update_output(input1,input2,input3,input4):
return 'Lat1: {} and Long1: {}\nLat2: {} and Long2: {}'.format(input1, input2, input3, input4)
这是我的失败代码:(不太确定这是否是正确的方法哈哈……)
figt = go.Figure(go.Scattermapbox(
fill = "toself",
lon = [{}.format(input2,input4)], lat = [{}.format(input1,input3)],
marker = { 'size': 10, 'color': "orange" }))
figt.update_layout(
mapbox = {
'style': "stamen-terrain",
'center': {'lon': -73, 'lat': 46 },
'zoom': 5},
showlegend = False)
解决方案
注释中的格式有点奇怪,所以这里是代码:
首先,在最顶部,您需要定义一个名为 latitude and longitude 的空列表
longitude = []
latitude = []
从那里,使用您提供的回调,您可以使用更新此列表
@app.callback(
Output("output", "children"),
Input("input1", "value"),
Input("input2", "value"),
Input("input3", "value"),
Input("input4", "value"),
)
def update_output(input1,input2,input3,input4):
latitude.extend([input1,input3])
longitude.extend([input2,input4])
return 'Lat1: {} and Long1: {}\nLat2: {} and Long2 {}'.format(input1, input2, input3, input4)
然后使用这些值,例如:
figt = go.Figure(go.Scattermapbox(
fill = "toself",
lon = longitude,
lat = latitude,
marker = { 'size': 10, 'color': "orange" }))
figt.update_layout(
mapbox = {
'style': "stamen-terrain",
'center': {'lon': -73, 'lat': 46 },
'zoom': 5},
showlegend = False)
要在点/轨迹之间填写,您可以使用此链接
推荐阅读
- apache-flink - 合并重新平衡的分区
- jsp - 使用 JSTL 将字符串的某个元素更改为可点击的链接
- driver - HLK 测试失败(HyperVisor 代码完整性准备测试)
- javascript - Bootstrap 4 崩溃不是自动关闭
- wmi - WMI 过滤器以排除/包含特定版本的应用程序
- c# - 无法修复 Unity 中的单一行为脚本问题
- python - 如何让 Python 的 ElementTree 忽略引号和属性之间缺少空格?
- python - 有条件地提取数据帧行时列表索引超出范围
- graph - 有没有类似于 Stoer–Wagner 算法 mincut 算法的算法?
- powershell - 文件上传 PowerShell 使用